iview里面的使用draggable拖拽移动,禁止可以点击其他区域
分析:
1.iview里面的使用draggable拖拽移动后会让弹层消失,
文档里面:
mask | 是否显示遮罩层,开启 draggable 时,强制不显示 |
2.由此看到,iview 开启 draggable 时,弹层强制不显示了,
所以需要设置,不能点击其他区域,尤其是页面的按钮;
解决方法:
iview里面有个默认的属性:
.ivu-modal-no-mask {
pointer-events: none;
}
改成下面的就可以了:
.ivu-modal-no-mask {
pointer-events: auto;
}
效果图:
代码如下:
<template>
<div id="app">
<Button @click="modal12 = true">Open modal</Button>
<Button style="margin-left:20px;" @click="test">测试弹层消失后到底能不能点击</Button>
<Modal v-model="modal12" draggable title="Modal 1">
<div>This is the first modal</div>
</Modal>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
modal12: false,
}
},
methods: {
test() {
console.log(1);
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.ivu-modal-no-mask {
pointer-events: none;
}
</style>