VUE和MUI框架结合使用时冲突问题的解决,面向初学者
背景最近刚开始使用vue和mui两者都是很初级的水平,发现如果两者结合使用经常出现,点击页面按钮没反应的状态。我尝试过调整导入的顺序,有时可以解决,有时解决不了。我想说明一种可以解决大部分问题的方法。解决方法请准守一条原则:在vue渲染完成dom后再实例化mui组件示例在vue的mounted方法下面初始化mui组件,mounted是在vue渲染完成后,挂载到页面后执行的方法。这时...
·
背景
最近刚开始使用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的加载顺序。
更多推荐
已为社区贡献6条内容
所有评论(0)