情景描述:项目使用的是vant ui框架,在引用popup组件,点击遮罩层时,代码报错
1、源码
<template>
<van-popup v-model="toggle" position="right">内容</van-popup>
</template>
<script>
export default {
computed:{
toggle(){
return this.show
}
}
}
</script>
2、修改
(1)直接给toggle设置set方法
<script>
export default {
computed:{
toggle:{
get(){
return this.show
},
set(){
this.$emit('setFn')
}
}
}
}
</script>
(2)给popup组件自定义点击遮罩层事件
<template>
<van-popup v-model="show" position="right" @click-overlay="handleClickOverlay" :close-on-click-overlay="false">内容</van-popup>
</template>
<script>
export default {
methods:{
handleClickOverlay(){
this.$emit('hideOverlay')
}
}
}
</script>