项目小笔记

需要做响应式的数据才需要写到data里，变化的值才需要用到watch和computed。。。切记切记

一、上传图片

1-验证图片格式
2-将图片转化为base46格式（调接口）
3-将转化的图片流转化为地址（调接口）
4-如果需要在保存之前在页面预览，可以现在将地址放到页面
5-保存上传图片

// html
<el-upload action="" :on-change="getImageFile">

// js
getImageFile(e) {
    console.log(e.raw)
}

二、全局导航守卫

导航守卫，在需要特殊处理的导航里打个戳，通过这个戳来判断走向

{
  path: 'myMessage',
  name: 'myMessage',
  component: MyMessage
  <!--在需要特殊处理的地方打个戳-->
  meta: {
     requiresAuth: true
   }
},

//对有戳的地方特殊处理
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

三、定时器判断关闭

let flag = false
if(xxx){
  flag = true
}
const id = setInterval(() => {
  if (flag) {
    flag = false
    clearInterval(id)
  }
}, 3000)

四、析构

const obj = {a:1,b:2,c:3}
const {a:res} = obj
// res --- 1
// 从obj取出a的赋给res

五、i18n

(1) data里i18n写法

this.$t('xxx')

(2) 数组里i18n切换在刷新之前不生效的问题

解决：将该数组写入computed再return出去即可

六、element-ui密码的password眼睛自定义

不要用自带的show-password属性。。。用原生的type = 'text/password'控制密码显示

<el-input :type='passwordType' v-model='password' >
    <i slot = 'suffix'>
      <!--眼睛图片-->
      <img :src='img' alt='' @click=checkPassword/>
    </i>
</el-input>
 <!-- 可以用一个flag来当切换的标志-->

七、登录之后自动回到之前页面

思路：在点击进入登录页面时只需要获取当前路由，并将当前路由通过路由传参传给登录页面，在点击登录且登录成功时直接跳到传过来的路由

api : router.currentRoute获取当前路由

八、自定义el-upload图片

在自定义el-upload图片时只在picFileList里push URL会报Cannot create property 'uid' on string。。。原因：（赋值的类型错误）。。。picFileList是一个对象的列表

 this.picFileList.push({ url: item })
//  item 是需要自定义图片的url

九、uiapp路由传参及获取参数

uni.navigateTo({
   url: `/pages/other/index?id=${this.myFlag.openId}&id2=${this.myFlag.isOfficial}`,
})

获取

// /pages/other/index页面
 onLoad(option) {
  console.log(option.id)
  console.log(option.id2)
}