VUE和MUI框架结合使用时冲突问题的解决，面向初学者

背景

最近刚开始使用vue和mui两者都是很初级的水平，发现如果两者结合使用经常出现，点击页面按钮没反应的状态。我尝试过调整导入的顺序，有时可以解决，有时解决不了。我想说明一种可以解决大部分问题的方法。

解决方法

请准守一条原则：

在vue渲染完成dom后再实例化mui组件

示例

在vue的mounted方法下面初始化mui组件，mounted是在vue渲染完成后，挂载到页面后执行的方法。这时vue已经完成了渲染，简单说就是页面已经加载完成了。这时候执行mui才会有效果。否则有可能在页面为加载的时候执行mui，等加载完成后，就不能在执行mui了。

<template>
  <div class="mui-conent">
      <div>mui的左滑删除</div>   
    <div class="mui-table-view">
      <div
        class="mui-input-group mui-table-view-cell "
        v-for="(elem,index) in fileListInfo"
        :key="index"
        ref="parentLi"
      >
        <div class="mui-slider-handle fileListBox">{{elem}}</div>
        <div
          class="mui-slider-right mui-disabled mui-tab-item fileListDele"
          @click="tabDele(index,elem)"
        >
          <a class="mui-btn mui-btn-red">删除</a>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "swiperLeft",
  data() {
    return {
      fileListInfo: ["第一列", "第二列","第三列","第四列"],
       confirmDate: "确认删除该文件？", //滑动列表删除键后的弹框信息
    };
  },
  methods: {
    //给下拉是列表中的滑动删除添加点击事件
    tabDele: function(index, id) {
        //通过ref获取到当前点击的列表
      var curChild = this.$refs.parentLi[index];
      var mui = this.mui;
      //预先保留this指向
      var $this = this;
      //mui的弹框信息
      mui.confirm(this.confirmDate, name, btnArray, function(e) {
        if (e.index == 1) {
            //点击确认后删除当前的数组信息
          $this.fileListInfo.splice(index,1)
          //删除后关闭滑动的红色删除块
          mui.swipeoutClose(curChild);
        } else {
          setTimeout(function() {
            mui.swipeoutClose(curChild);
          }, 0);
        }
      });
      //提示的信息
      var btnArray = ["确认", "取消"];
    }
  },
  mounted() {
    var mui = this.mui;
    //mui初始化
    mui.init({
      gestureConfig: {
        tap: true, //默认为true-----单击事件
        doubletap: true, //默认为false-----双击事件
        longtap: true, //默认为false-------长按事件
        swipe: true, //默认为true------滑动事件
        drag: true, //默认为true------拖动事件
        hold: false, //默认为false，不监听-------按住屏幕事件
        release: true //默认为false，不监听-------------离开屏幕事件
      }
    });
  }
};
</script>
 
<style>
.mui-table-view-cell{
    height:40px;
    line-height: 40px;
}
</style>
 

重点是把mui放在mounted方法里，如果报错或者没效果，尝试调整下js的加载顺序。