VUE_TYPESCRIPE遇到问题

• rem 插件
  *（yarn add lib-flexible） vscode 工作区域设置75px
• vant 按需引入
  const tsImportPluginFactory = require('ts-import-plugin')
  config.module
  .rule('ts')
  .use('ts-loader')
  .loader('ts-loader')
  .tap((options) => {
  options.getCustomTransformers = () => ({
  before: [tsImportPluginFactory({
  libraryName: 'vant',
  })],
  })
  return options
  })

  * 
  

• 去除默认样式插件
  • https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css
• 设置ios键盘隐藏之后,页面回弹

  // 加上ios 判断 键盘隐藏的时候 页面回弹
  if (/(iPhone|iPad)/.test(navigator.userAgent)) {
    document.body.scrollIntoView(false)
  }
  

• 从一个对象一个分割出

  const { phone, captcha, address } = this.form
  

• Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
• vue 组件里引less文件前面加_@(小写)

  @import "~@/style/curing/curing.less";
  

• 只能输入数字
  • input 加pattern="[0-9]*"
• css：active伪类在手机上不起作用解决

mound(){
document.body.addEventListener('touchstart', function () { });
}
```

• 移动端判断安卓or ios 是否是在微信中打开 (在vue里写法 新建一个.ts文件)

const userAgent = navigator.userAgent || navigator.vendor

const platform = (agent: string) => {
let os = 'unknown'
if (/android/i.test(agent)) {
os = 'Android'
} else if (/iPad|iPhone|iPod/.test(agent)) {
os = 'iOS'
}
const wechatMatch = agent.match(/MicroMessenger/i)
const isWechat = wechatMatch && wechatMatch[0].toLowerCase() === 'micromessenger'
return {
os,
isWechat,
}
}

export default platform(userAgent)
组件直接调用就行 用法(platform.isWechat)

* es6 some 遍历方法的使用

const res = this.lendDataList.some(item => item.storage_code === data.storage_code)
if (res === false) {
this.lendDataList.unshift(data)
} else {
this.$message.error('已有数据了~')
}

* watch 的使用

value = 1
@Watch('value', { immediate:true })
change() {
console.log(this.value)
}
// 同步函数只会执行一次按顺序执行，异步的不会按顺序执行
// h 任务 setTimeout MessageChannel比setTimeout 0 要快
// w 任务promise dom h -》w -》h-》w 。。。。
// 第一个h任务执行完之后获取dom元素
// $nextTick dom 已经是渲染完毕了
// immediate 默认是false 首次执行不会监听到值， 想监听值 改成true

created() {
setTimeout(() => {
this.value = 2
}, 1000)
}

beforeMount() {
this.value = 3
}

mounted() {
setTimeout(() => {
this.value = 4
}, 300)
}