如果直接使用:value与@input的语法糖解构,还是会有问题,具体表现为:
- 关闭时popup会上下横跳、抖动一下,再关闭
- 关闭后,popup可能不会再展现,即使v-model的值再次被设为true
注意:uview的版本为1.x
- 直接上代码:
<template>
<u-popup :value="value" mode="bottom" @close="closeHandler">
<view style="height: 40vh">我是popUp的内容</view>
</u-popup>
</template>
<script>
export default {
props: {
value: {
type: Boolean,
default: false,
},
},
data() {
return {}
},
methods: {
inputHandler(val) {
this.$emit('input', val)
},
confirmHandler(item = null) {
this.$emit('confirm', item )
this.inputHandler(false)
},
closeHandler() {
this.$emit('close')
this.inputHandler(false)
},
},
}
</script>
注意:这里的
confirmHandler
是用来处理业务的,比如在这个popup里面展示里面,点击列表中的一项,需要关闭popup,甚至返回所点击项对应的数据
- 父级调用:
<template>
<view>
<u-button @click="show = true">展示popup</u-button>
<MyPopUp v-model="show"></MyPopUp>
</view>
</template>
<script>
import MyPopUp from './MyPopUp.vue'
export default {
components: { MyPopUp },
data() {
return {
show: false,
}
},
methods: {},
}
</script>
MyPopUp
就是第一点的代码,最后简单说明下思路,不使用@input
是因为close的逻辑会执行两遍,有兴趣的可以自己去尝试,写一个@close
打印的方法。