更新

src/components/FormDialog/example.vue

@@ -0,0 +1,70 @@
+<template>
+  <!-- 使用示例 -->
+  <FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
+    <template #default>
+      <el-form :model="form" label-width="120px">
+        <el-form-item label="Activity name">
+          <el-input v-model="form.name" />
+        </el-form-item>
+        <el-form-item label="Activity zone">
+          <el-select v-model="form.region" placeholder="please select your zone">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Activity time">
+          <el-col :span="11">
+            <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
+          </el-col>
+          <el-col :span="2" class="text-center">
+            <span class="text-gray-500">-</span>
+          </el-col>
+          <el-col :span="11">
+            <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
+          </el-col>
+        </el-form-item>
+      </el-form>
+    </template>
+  </FormDialog>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+/* 表单弹框 */
+const formDialog = ref(false)
+const FormDialogData = reactive({
+  title: '新增', // String | 必填 | 标题
+  width: '30%', // String | 默认值 30% | 弹框宽度
+  formType: 'slot', // 'slot' 默认为 slot  | 'json' （后台接口返回就配置 json）
+
+  /* ------------- */
+  // 注意：以下配置为 json 时才有效
+  formJosnRules: {}, // 默认为{}，表单校验规则
+  formJosnLabelWidth: '120px', // 默认为 120px，表单 label 宽度
+  // form 元素
+  formJosnElement: [
+    {
+      type: 'input', // 元素类型
+      cloSpan: '24', // 栅格布局所占份数 （默认24）
+      disabled: false, // 元素是否禁用（默认为false）
+      label: '姓名', // 元素的 label
+      placeholder: '请填写姓名', // 元素的 placeholder
+      model: 'name', // 元素 form 的 key
+
+      // options: [] // type 为 select 生效 （默认为 [] ）
+
+      // dateType: [] // type 为 date 生效 （默认为 date ）
+      // dateValueformat: [] // type 为 date 生效 （默认为 YYYY-MM-DD ）
+    },
+  ],
+  formJosnDisabled: false, // 表单是否禁用
+  formJsonData: {}, // 新增或者编辑表单值 （编辑必须传）
+})
+const handleSubmit = (formJsonValue) => {
+  formDialog.value = false
+}
+const form = ref({})
+
+</script>
+<style lang='scss' scoped></style>
+