vue3 抽取el-dialog子组件

vue3 抽取el-dialog子组件

• 自定义弹窗组件myDialog.vue

<template>
  <el-dialog :model-value="visible" title="新增" width="600px" :before-close="handleBeforeClose" destroy-on-close>
    <el-form ref="rowformRef" :model="rowForm" label-position="top" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input v-model="rowForm.name" placeholder="请输入名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(['update:visible']);

const rules = ref({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
});
const rowformRef = ref(null);
const rowForm = ref({});

const handleSubmit = () => {
  rowformRef.value.validate((valid) => {
    if (valid) {
    }
  });
};

const handleBeforeClose = (done) => {
  done();
  emit('update:visible', false);
};

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

• 使用弹窗组件

<myDialog v-model:visible="dialogVisible" />