说明
将框架弹框组件 封装成子组件,在页面中引用该子组件,传参并控制弹框显示与隐藏。
子组件
<template>
<view>
<wh-modal :show="showPopup" :descr="descr" maskClosable @click="onClick" :buttons="buttons"></wh-modal>
</view>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {
buttons: [{
//按钮文本,必选
text: '取消',
//按钮文本颜色,可选
color: '#fff',
//按钮背景颜色,可选
background: '#C5C5C5',
//是否为镂空按钮,即背景色为透明,可选
plain: false
}, {
//按钮文本,必选
text: '去完善',
//按钮文本颜色,可选
color: '#fff',
//按钮背景颜色,可选
background: '#353834',
//是否为镂空按钮,即背景色为透明,可选
plain: false
}],
descr: '暂未完善信息',
showPopup: false,
}
},
watch: {
show(val) {
this.showPopup = val
}
},
methods: {
onClick(e) {
// 关闭弹框
this.showPopup = false
this.$emit('update:show',this.showPopup) //更新
// 去认证
if (e.index == 1) {
uni.$common.to('/pages/mine/register')
return
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
父页面使用
<perfectPup v-model:show="showPup"></perfectPup>
import perfectPup from '@/components/perfectPup/perfectPup.vue'
const showPup = ref(false)
function toYuYueCar() {
if (user.state.level == 'unregister') {
showPup.value = true
return
}
}