vue弹窗组件常用的案例

父组件只引用组件，在子组件内进行弹窗的隐藏和显示

父组件：
  <overallSolution :showDialog="showDialog" :readonly="false" @close="showDialog = false"></overallSolution>
const showDialog = ref(false)
const addPlan = () => {
  showDialog.value = true;
  console.log("新增计划");
}

子组件：
<el-dialog v-model="dialogVisible" title="教务处方案" width="1000" :destroy-on-close="true" :close-on-click-modal="false"
    :show-close="true" @close="closeDialog" top="8vh">
   <el-form ref="formRef" :layout="'vertical'" :model="planData" label-position="top" size="default" class="formRef" >
      <el-form-item label="方案名称" prop="title" :rules="[{ required: true, message: '请选填写方案名称', trigger: ['blur'] }]">
        <el-input v-model="planData.title" />
      </el-form-item>
    </el-form>

   <template #footer>
      <div class="dialog-footer">
        <el-button size="default" @click="closeDialog">取消</el-button>
        <el-button size="default" type="primary" @click="submitForm(formRef)">确定</el-button>
      </div>
    </template>
</el-dialog>
const props = defineProps({
  // 只读
  readonly: {
    type: Boolean,
    default: false
  },
  showDialog: {
    type: Boolean,
    default: false
  }

})
//监听弹窗的打开与显示
const dialogVisible = ref(false)
watch(() => props.showDialog, (newVal, oldVal) => {
  dialogVisible.value = newVal;
}, {
  deep: true,
})
//关闭弹窗
const emit = defineEmits();
const closeDialog = () => {
  console.log("dddd")
  dialogVisible.value = false;
  emit('close', dialogVisible.value)
}

const formRef = ref()
const planData: any = ref({
  trainingSolutionEvaluationSystem:''
})
const modelValue = ref([])
//确认
const submitForm = async (formEl) => {
  console.log('planData',planData.value)
  let data={
    ...planData.value,
    startDate:planData.value.rangeTime[0],
    endDate:planData.value.rangeTime[1],

  }
  console.log('data',data)
  // SaveTrainingSolution
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
//重置
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}