element-ui遇到的相关问题

1. 移动端用了elementUI的el-select的组件，苹果手机下拉框选项需要点击两次才能选中切换

问题一：移动端用了elementUI的el-select的组件，苹果手机下拉框选项需要点击两次才能选中切换。

在app.vue里面，（特备注意：注意是在app.vue里，不是在页面或者组件里！！！！），加上一段css代码。

.el-scrollbar {
    > .el-scrollbar__bar {
        opacity: 1 !important;
    }
}

2. el-select 多选 ，选择下拉内容后自动关闭

 <el-select 
    ref="multiSelect" 
    v-model="selectName" 
    filterable 
    multiple 
    value-key="userid" 
    @change="chooseCustom">
                   
        <el-option v-for="(item, index) in customList" 
            :key="index" 
            :label="item.username" 
            :value="item" 
        />
 
 </el-select>

chooseCustom(){
//调用element-ui select组件blur方法
//要包再timeout里面，直接调用不会关闭下拉框option
    setTimeout(() => {
        this.$refs.multiSelect.blur()
    }, 50)
}

3.vue-解决弹出蒙层滑动穿透问题

<!-- 列表 -->
    <div :class="{noScroll: isShowPopup}">
      <div class="item" v-for="num in 50" @click="itemClick(num)">
        <div style="width:100%">点击item{{num}}</div>
      </div>
    </div>

　　 <!-- 蒙层 -->
    <div v-if="isShowPopup" class="popup" @click="popUpEmptyClick()">
      <div class="message">
        <p class="message-title" v-for="num in 30" @click.stop="messageTitleClick(num)">
          消息提示 ,确认
        </p>
      </div>
    </div> 

解决办法： 给列表整个div动态绑定 .noScroll 后，底部列表照样可以滑动，所以考虑继续向上追溯。利用watch监听蒙层是否显示，当显示时，设置body相应样式；但蒙层消失时，body样式恢复。但是在vue里怎么操作body里，虽然vue是数据驱动的，不提倡直接操作Dom。但此刻我也是没什么好办法了，就直接操作Dom了。如下：

watch: {
    isShowPopup(newVal, oldVal) {
      if (newVal == true) {
        let cssStr = "overflow-y: hidden; height: 100%;";
        document.getElementsByTagName('html')[0].style.cssText = cssStr;
        document.body.style.cssText = cssStr;
      } else {
        let cssStr = "overflow-y: auto; height: auto;";
        document.getElementsByTagName('html')[0].style.cssText = cssStr;
        document.body.style.cssText = cssStr;
      }

      // 下面需要这两行代码，兼容不同浏览器
      document.body.scrollTop = this.pageScrollYoffset;
      window.scroll(0, this.pageScrollYoffset);
    }
  }

另一种方式是直接在method里面用addEventListen进行监听,采用方式如下

 。。。
 <template>
	 <div id="actPage"> 
		 <div v-if=rulesShow ></div>
	 </div>
</template>
 
 。。。
methods:{
//蒙层展示
    swiperStop() {
      this.rulesShow = true
      this.$nextTick(() => {
        this.disabledSrcoll()
      })
    },
	//置灰层停止穿透滑动
    disabledSrcoll() {
      document.getElementById('actPage').addEventListener('touchmove', this.lockBody)
    },
    //置灰层停止滑动
    lockBody(e) {
      // e.preventDefault && e.preventDefault();【这种方式会连着子元素的滚动一起滑动，如果无子元素滚动要求可以使用】
      document.body.style.overflow = 'hidden';
      document.getElementById('app').style.overflow = 'hidden';
      document.html.style.overflow = 'hidden';
    },
}

4. vue如何根据返回的值对元素进行样式渲染

在vue中的 export default 中的methods中进addclassStatus以及addclassPriority方法的计算和赋值

在css文件中定义css样式

5. el-input-number 没有值的情况下，默认值为0

解决办法：需要将默认值改为undefied,此刻输入框显示的值为空

<template>
  <el-input-number :value="num" @change="updateNum"></el-input-number>
</template>
 
<script>
export default {
  data() {
    return {
      num: undefined // 初始值设为null或undefined，表示默认值为空
    }
  },
  methods: {
  
    /** 处理修改时，数字框null 展示为0的问题 */
    numberToEmpty(data) {
      for (var index in data) {
        if (data[index] === null) {
          data[index] = undefined;
        }
      }
      return data;
    },
    updateNum(val) {
      this.num = val
    },
    getData () {
        getRecord(id).then(response => {
          this.form = this.numberToEmpty(response.data);
          this.open = true;
          this.title = "xx";
        });
    },
  }
}
</script>