uni+vue3+firstUI——组件弹框使用 v-model绑定参数

说明

将框架弹框组件 封装成子组件，在页面中引用该子组件，传参并控制弹框显示与隐藏。

子组件

<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 = falsethis.$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 = truereturn}
}