vue判断移动设备是android / ios / 微信 && 模拟select标签

背景

2020年1月初，微信小程序内部select下拉菜单出现不能使用的bug，间接导致我们公司的小程序内的select下拉菜单歇菜，这客户哪能受得了，老大让我写一个替代方案。
在设备是安卓的条件下，微信版本为7.0.10，则进行替换方案。

逻辑

// 判断是否是安卓
isAndroid:function(){
  let userAgent = navigator.userAgent;
    const isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isiOS) {
        userAgent = "ios";
    } else {
        userAgent = "andriod";
    }
    return userAgent == "andriod" ? true : false
},
// 微信浏览器 且版本7.0.10
isWxHackV:function(){
    let UA = navigator.userAgent || "";
    // let UA = 'MicroMessenger/7.0.10' || "";
    return UA.toLowerCase().match(/MicroMessenger\/7.0.10/i) == 'micromessenger\/7.0.10';
},
// 两者同时满足
isPhanfone:function(){
     this.isPhanfoneFlag =  this.isAndroid() && this.isWxHackV()
 },
recognizeType:function(){
      const isPhanfone = this.isPhanfone();
      console.log(this.isPhanfoneFlag)
  },

模拟select标签

// html
<div v-else class="model-box">
     <div class="searchBox">
         <input type="text" :value="selectVal" placeholder="请选择" @click='ulShow = !ulShow'/>
     </div>
     <ul class="skill" v-show='ulShow'>
         <li class="select-list" v-for='item in options' @click='changeVal(item.text)'>{{item}}</li>
     </ul>
 </div>
 
 // js
 data() {
    return {
	    ulShow: false, //默认ul不显示，单击input改变ul的显示状态
        selectVal: '' //选项值，input的值与选项值动态绑定
    }
 }
 changeVal:function(value) {
    this.selectVal = value
    this.ulShow = false;
 }

 // scss
  .model-box {
        position: relative;
        width:180px;
        height: 30px;
        line-height: 30px;
        background-color: #fff;
        border-radius: 3px;
        text-indent: 5px;
        .searchBox {
            input{
                line-height: 1.5rem;
                height: 1.5rem;
                margin-bottom: 1rem;
                padding: 0 5px;
                vertical-align: middle;
                border: 1px solid #aaa;
                border-radius: 5px;
                outline: none;
                width: 100%;
                z-index:22;
                background: #fff;
            }
        }
        .skill {
            position: absolute;
            left: 6px;
            top: 30px;
            width: 100%;
            border: 1px solid #aaa;
            border-top: none;
            background: #f0f0f0;
            z-index: 999;
            & .select-list:hover {
            }
            li {
                font-size: 16px;
                padding-left: 5px;
                cursor: pointer;
                &:hover{
                    background: #4d9cfc;
                }
            }
        }
    }

吐槽

结果我改了不到一天过了个周末腾讯内部已经修复了…就知道会这样