vue3实现el-dialog弹窗如图弹窗代码

需求：

实现如图弹窗 

 上码：

<template>
  <el-dialog
    title="添加变量"
    v-model="dialogVisible"
    width="30%"
  >
    <el-form :model="form">
      <el-form-item label="字段类型">
        <el-radio-group v-model="form.type">
          <el-radio label="文本">文本</el-radio>
          <el-radio label="段落">段落</el-radio>
          <el-radio label="下拉选项">下拉选项</el-radio>
          <el-radio label="数字">数字</el-radio>
          <el-radio label="给文件">给文件</el-radio>
          <el-radio label="文件列表">文件列表</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="变量名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="显示名称">
        <el-input v-model="form.displayName"></el-input>
      </el-form-item>
      <el-form-item label="最大长度">
        <el-input-number v-model="form.maxLength" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="form.required">必填</el-checkbox>
        <el-checkbox v-model="form.hidden">隐藏</el-checkbox>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { ref } from 'vue';
import { ElDialog, ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElInputNumber, ElCheckbox, ElButton } from 'element-plus';

export default {
  components: {
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElRadioGroup,
    ElRadio,
    ElInputNumber,
    ElCheckbox,
    ElButton
  },
  setup() {
    const dialogVisible = ref(false);
    const form = ref({
      type: '文本',
      name: '',
      displayName: '',
      maxLength: 48,
      required: false,
      hidden: false
    });

    const save = () => {
      console.log('保存的表单数据：', form.value);
      dialogVisible.value = false;
    };

    return {
      dialogVisible,
      form,
      save
    };
  }
};
</script>

<style>
/* 你可以在这里添加自定义样式 */
</style>