【移动端】ios或者本身一些容易出现的问题

移动端的一些问题

1. 光标定位事件，比如出现下拉选择，不做额外处理，会弹出键盘 ——利用失去焦点将键盘事件收起
   同时ios上会出现光标出现在弹出层上，利用在focus事件中的失去焦点，同时可以解决这个ios上的bug！

 startTimeShow (e) {
      this.showStartDatePicker = true
      e.target.blur() // 或者 document.activeElement.blur()
    },

2. ios需要点击两次才能选中van-field
辅助在index.html 可不加试试

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">

在main.js中引入FastClick ！

FastClick.attach(document.body)
FastClick.prototype.focus = function (targetElement) {
  var length

  var deviceIsWindowsPhone = navigator.userAgent.indexOf('Windows Phone') >= 0
  var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone
  // 兼容处理:在iOS7中，有一些元素（如date、datetime、month等）在setSelectionRange会出现TypeError
  // 这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
  if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
    length = targetElement.value.length
    targetElement.setSelectionRange(length, length) // 修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘
    targetElement.focus()
  } else {
    targetElement.focus()
  }
}

3. 移动端日志插件
   在main.js中引入 需要安装插件 npm install vconsole

import Vconsole from 'vconsole'
const vConsole = new Vconsole()
 Vue.use(vConsole)

4. 在filter中暴露一个时间戳方法

import Vue from 'vue'
export function timeToDate (time, formate = 'YYYY-MM-DD HH:mm:ss') {
  if (!time) {
    return ''
  }
  return Vue.prototype.$moment(time).format(formate)
}

在main.js中将moment挂载到Vue.prototype中

import moment from 'moment'
Object.defineProperty(Vue.prototype, '$moment', { value: moment })

再将filter文件放到main.js中

import * as filters from './utils/filter'
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key])
})

就可以直接在页面的template中使用

 <span slot="right">{{item.outDate|timeToDate}}</span>