vue2 element组件兼容性问题

1.el-select

聚焦问题 + 点两次才可以选择选项

 <el-select name="XXX" 
    v-model="form.XXX" clearable style="width: 100%"
    :popper-append-to-body="false" popper-class="popper-select-class"
    @change="XXX">
     <el-option
         v-for="item in XXX"
         :key="item.XXX"
         :label="item.XXX"
         :value="item.XXX">
       </el-option>
 </el-select>

如果多选框因为配置了fastclick会出现ios系统打开点击buig，这个是fastclick的错误配置 可以用如下配置在main.js中 

import FastClick from 'fastclick'
// 解决手指轻触输入框不聚焦的问题
try {
  let versionNumber = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)[1].replace(/_/g, '.')
  if (!(/iphone|ipod|ipad/i.test(navigator.appVersion)) || Number(versionNumber) < 11) {
    // 解决手指轻触输入框不聚焦的问题
    var deviceIsWindowsPhone = navigator.userAgent.indexOf('Windows Phone') >= 0
    var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone
    FastClick.prototype.focus = function (targetElement) {
      var length
      // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
      if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
        length = targetElement.value.length
        targetElement.setSelectionRange(length, length)
        targetElement.focus()
      } else {
        targetElement.focus()
      }
    }
    FastClick.attach(document.body)
  }
} catch (e) {
  console.log(e)
}

另外还需要配置一个css在对应组件的style中

  .el-input .el-input__suffix {
    display: none;
  }

  .popper-select-class{
    &.el-popper{
      .el-scrollbar {
        > .el-scrollbar__bar {
          opacity: 1 !important;
        }
      }
    }
  }

这样就能轻松解决选择框在ios的兼容性问题

Elementui的回到顶部不能用怎么办？

在入口处准备一个盒子并命名id

如

<div id="aboutUs">
  <div id="top"></div>
  <mbAboutUsIndex v-show="this.device.isPhone"/>
  <!--    -->
  <PcIndexAboutUs v-show="this.device.isPc"/>
</div>

然后在入口的vue.js中

mounted() {
  document.querySelector("#top").scrollIntoView({
    behavior: "smooth",  // 平滑过渡
    block:    "start"  //
  });
}

不能写在

created

一定要写在

mounted才会生效

整体页面：

<script>

import MbAboutUsIndex from "@/views/FrontDesk/aboutUs/mbIndex/mbIndex.vue";
import PcIndexAboutUs from "@/views/FrontDesk/aboutUs/pcIndex/pcIndex.vue";

export default {
  name:"aboutUsEntrance",
  components: {PcIndexAboutUs, MbAboutUsIndex},
  data(){
    return{
      device:{}
    }
  },
  methods:{
    getUserAgent() {
      var ua = navigator.userAgent,
          isWindowsPhone = /(?:Windows Phone)/.test(ua),
          isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
          isAndroid = /(?:Android)/.test(ua),
          isFireFox = /(?:Firefox)/.test(ua),
          isChrome = /(?:Chrome|CriOS)/.test(ua),
          isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) ||
              (isFireFox && /(?:Tablet)/.test(ua)),
          isPhone = /(?:iPhone)/.test(ua) && !isTablet,
          isPc = !isPhone && !isAndroid && !isSymbian;
      return {
        isChrome:isChrome,
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc,
      };
    },
  },
  created() {
    this.device = this.getUserAgent();
  },
  mounted() {
    document.querySelector("#top").scrollIntoView({
      behavior: "smooth",  // 平滑过渡
      block:    "start"  //
    });
  }
}
</script>
<template>
    <div id="aboutUs">
      <div id="top"></div>
      <mbAboutUsIndex v-show="this.device.isPhone"/>
      <!--    -->
      <PcIndexAboutUs v-show="this.device.isPc"/>
    </div>
</template>

<style scoped lang="scss">

</style>