vue 移动端

表单验证

可以给标签添加 :rules="验证规则对象" , 在 data 中定义这个规则

data(){
 return {
  formRules:{
   mobile:[
    {required:true,message:'手机号不能为空'},  //  required 表示是否必须 /  message 为提示信息
    {pattern: /^1[3|5|7|8]\d{9}$/,message: '手机号格式错误'}   //  pattern  为验证规则
   ]
  }
 }
}

还可以在标签中添加type属性(规定输入的类型),maxlength属性(内容的自大长度)

验证码

验证按钮<button> 和 倒计时组件 同时只展示一个, 可以通过定义一个变量,再配合 v-if 来实现

倒计时组件有一个结束事件 finish , 通过@finish 来改变变量的值,让按钮再展现出来

Token

在登录成功后会获得 Token 值,需要存储的一个公共位置,方便取用

将 Token 值存储到 Vuex 容器中,数据是响应式的,而且方便获取,再将 Token 放到本地存储中, 可以实现 Token 的持久化 ( Token 有两小时的时效性,过期需要重新登录获取)

个人中心模块

TabBar 标签栏

为实现点击切换功能, 使用路由模式标签栏

<van-tabbar route>
  <van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
   ...
</van-tabbar>