如果直接用 v-model 绑定值,然后封装在 dev 环境没有问题,但是放到服务器上会报错:
ReferenceError: visible is not defined at ut.onUpdate:modelValue.a.<computed
解决方案:
封装 el-dialog 为 base-dialog
<template>
<el-dialog
class="base-dialog"
:title="title"
width="60%"
v-model="visible"
:before-close="handleClose"
v-bind="$attrs"
@open="handleOpen"
>
<div
class="body-wrapper"
:class="autoHeight ? 'autoHeight' : 'fixedHeight'"
>
<slot></slot>
</div>
<template #footer>
<span class="dialog-footer">
<el-button v-if="showCancelButton" @click="handleClose">取消</el-button>
<el-button
v-if="showConfirmButton"
type="primary"
@click="handleConfirm"
>确认</el-button
>
</span>
</template>
</el-dialog>
</template>
<script setup>
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')
}
</script>
<style lang="scss" scoped>
.body-wrapper {
overflow: auto;
}
.autoHeight {
max-height: 56vh;
}
.fixedHeight {
height: 56vh;
}
</style>
<style lang="scss">
.base-dialog {
.el-dialog__body {
padding: 6px 16px 10px;
}
}
</style>
调用这个组件的的业务逻辑 addDialog:
<template>
<base-dialog
title="新增信息"
width="60%"
:visible="visible"
:autoHeight="false"
@open="handleOpen"
@handleConfirm="handleConfirm"
@close="handleClose"
>
<div class="body">
aaaaaaaaaa
</div>
</base-dialog>
</template>
<script setup>
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()
}
</script>
<style lang="scss" scoped>
.body {
height: 100%;
}
</style>
在主页页面调用上面的 添加 dialog
<template>
<Content>
<template #topbar>
<el-button type="primary" size="small" @click="showAddDialog"
>添加</el-button
>
</template>
<div class="content">
</div>
<!-- 新增 -->
<AddDialog
@closeDialog="addDialogShow = false"
:visible="addDialogShow"
@refreshTable="refreshTable"
/>
</Content>
</template>
<script setup>
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()
}
</script>
<style lang="scss" scoped>
.content {
height: 100%;
}
</style>