如果直接用 v-model 绑定值,然后封装在 dev 环境没有问题,但是放到服务器上会报错:
ReferenceError: visible is not defined at ut.onUpdate:modelValue.a. 解决方案: 封装 el-dialog 为 base-dialog class="base-dialog" :title="title" width="60%" v-model="visible" :before-close="handleClose" v-bind="$attrs" @open="handleOpen" > class="body-wrapper" :class="autoHeight ? 'autoHeight' : 'fixedHeight'" > v-if="showConfirmButton" type="primary" @click="handleConfirm" >确认 > import { computed } from 'vue' const props = defineProps({ visible: { type: Boolean, default: false, }, title: { type: String, default: '提示', }, autoHeight: { type: Boolean, default: true, }, showCancelButton: { type: Boolean, default: true, }, showConfirmButton: { type: Boolean, default: true, }, }) const emit = defineEmits([ 'update:modelValue', 'closeDialog', 'handleConfirm', 'close', 'confirm', 'open', ]) // 打开 const handleOpen = () => { emit('open') } // 子组件定义自己的visible const visible = computed({ get: () => props.visible, set: (value) => { // emit('update:modelValue', value) }, }) // 关闭弹窗 const handleClose = () => { emit('closeDialog') emit('close') // visible.value = false } // 点击确定 const handleConfirm = () => { emit('handleConfirm') emit('confirm') } .body-wrapper { overflow: auto; } .autoHeight { max-height: 56vh; } .fixedHeight { height: 56vh; } .base-dialog { .el-dialog__body { padding: 6px 16px 10px; } } 调用这个组件的的业务逻辑 addDialog: title="新增信息" width="60%" :visible="visible" :autoHeight="false" @open="handleOpen" @handleConfirm="handleConfirm" @close="handleClose" > aaaaaaaaaa import { ref, watch, getCurrentInstance } from 'vue' import { AddKouKuanInfo, } from '@/api/modules/personnelMana/deductionMana.js' defineProps({ visible: { type: Boolean, default: false, }, }) const { proxy: ctx } = getCurrentInstance() const handleClose = () => { baseFormRef.value.reset() emit('closeDialog') } // 弹窗弹出 const handleOpen = () => { // getAddFormOptions() } // 刷新表格事件 const emit = defineEmits(['refreshTable', 'closeDialog']) // 添加 async function addDeductionInfo() { const { code, msg } = await AddKouKuanInfo() ctx.$message({ type: code === 1 ? 'success' : 'warning', message: msg, }) if (code === 1) { // 刷新表格 emit('refreshTable') emit('closeDialog') } } // 点击确定 const handleConfirm = () => { addDeductionInfo() } .body { height: 100%; } 在主页页面调用上面的 添加 dialog >添加 >
@closeDialog="addDialogShow = false" :visible="addDialogShow" @refreshTable="refreshTable" /> import { ref } from 'vue' import AddDialog from './components/AddDialog.vue' // 新增 const addDialogShow = ref(false) const showAddDialog = () => { addDialogShow.value = true } // 刷新表格 const tableRef = ref(null) const refreshTable = () => { tableRef.value.refresh() } .content { height: 100%; } 推荐链接
发表评论