vue3 + ts 使用el-dialog

弹窗组件

<template>
  <el-dialog v-model="dialogVisible" title="Tips" width="50%" :before-close="cancel">
    <div>
      <Form :formData="formData" :formDesc="formDesc" @submit="handleBaseSubmit" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">Cancel</el-button>
        <el-button @click="confirm" type="primary"> Confirm </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { TableData } from './tableData'
import Form from '../commonForm/Form.vue'
import { formDesc } from '../commonForm/FormData'
type Props = {
  dialogVisible: boolean
  currentRow: TableData
}
const props = defineProps<Props>()
console.log(props)
const emit = defineEmits(['update:dialogVisible'])
const formData = reactive<Record<string, any>>({
  name: '',
  region: '',
  time: '',
  delivery: false,
  type: [],
  resource: '',
  desc: ''
})
const cancel = () => {
  emit('update:dialogVisible', false)
}
const confirm = () => {
  emit('update:dialogVisible', false)
}
const handleBaseSubmit = (model: Record<string, any>) => {
  console.log(model) // 获取表单数据
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>

 父组件

<template>
  <addDialog v-model:dialogVisible="dialogVisible" v-if="dialogVisible" />
</template>
<script setup lang="ts">
import addDialog from './addDialog.vue'
let dialogVisible = ref<boolean>(false)
const viewRow = () => {
  dialogVisible.value = true
}
</script>
<style></style>