增加form表单自定义组件

src/components.d.ts

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     DialogForm: typeof import('./components/form/DialogForm.vue')['default']
     DynamicFormEdit: typeof import('./components/DynamicFormEdit.vue')['default']
     Echarts: typeof import('./components/echarts/Echarts.vue')['default']
+    ElCustom: typeof import('./components/ElCustom.vue')['default']
     ElDict: typeof import('./components/ElDict.vue')['default']
     ElEditor: typeof import('./components/ElEditor.vue')['default']
     ElEmployees: typeof import('./components/ElEmployees.vue')['default']

src/components/ElCustom.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+interface Props {}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <slot></slot>
+</template>
+
+<style lang="scss" scoped></style>

src/components/index.ts

@@ -2,12 +2,14 @@ import type { App } from 'vue'
 import ElEditor from './ElEditor.vue'
 import ElDict from './ElDict.vue'
 import ElFormTabs from './ElFormTabs.vue'
+import ElCustom from './ElCustom.vue'
 import ImageUpload from './ImageUpload.vue'
 
 function registerComponent(app: App): void {
   app.component('ElEditor', ElEditor)
   app.component('ElDict', ElDict)
   app.component('ElFormTabs', ElFormTabs)
+  app.component('ElCustom', ElCustom)
   app.component('ElImageUpload', ImageUpload)
 }
 

src/views/form/Basic.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { BasicForm } from '@/types/form'
+import { ElInput } from 'element-plus'
 
 const formData = reactive<any>({})
 
@@ -233,6 +234,18 @@ const formConfig = reactive<BasicForm>({
           alias: 'file'
         }
       ]
+    },
+    {
+      label: '自定义',
+      value: '',
+      name: 'custom',
+      type: 'custom',
+      slots: [
+        {
+          name: 'default',
+          alias: 'customDefault'
+        }
+      ]
     }
   ]
 })
@@ -248,6 +261,30 @@ const proFormRef = ref<any>()
 const handleSave = () => {
   proFormRef.value.submit()
 }
+
+const inputValue = ref('')
+const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
+const inputVisible = ref(false)
+const InputRef = ref<InstanceType<typeof ElInput>>()
+
+const handleClose = (tag: string) => {
+  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
+}
+
+const showInput = () => {
+  inputVisible.value = true
+  nextTick(() => {
+    InputRef.value!.input!.focus()
+  })
+}
+
+const handleInputConfirm = () => {
+  if (inputValue.value) {
+    dynamicTags.value.push(inputValue.value)
+  }
+  inputVisible.value = false
+  inputValue.value = ''
+}
 </script>
 
 <template>
@@ -265,6 +302,30 @@ const handleSave = () => {
         <template #file>
           <el-button type="primary">上传</el-button>
         </template>
+        <template #customDefault>
+          <el-space wrap>
+            <el-tag
+              v-for="tag in dynamicTags"
+              :key="tag"
+              size="small"
+              closable
+              :disable-transitions="false"
+              @close="handleClose(tag)"
+            >
+              {{ tag }}
+            </el-tag>
+            <el-input
+              v-if="inputVisible"
+              ref="InputRef"
+              v-model="inputValue"
+              class="ml-1 w-20"
+              size="small"
+              @keyup.enter="handleInputConfirm"
+              @blur="handleInputConfirm"
+            />
+            <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput"> + New Tag </el-button>
+          </el-space>
+        </template>
       </pro-form>
       <div class="text-center">
         <el-button type="primary" @click="handleSave">保存</el-button>