ADD: TagInput组件

src/components/Taginput.vue

+<template>
+    <el-tag
+      v-for="tag in dynamicTags"
+      :key="tag"
+      class="mx-1"
+      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">
+      + 添加值
+    </el-button>
+  </template>
+  
+  <script setup>
+  import { nextTick, ref } from 'vue'
+  
+
+  const props = defineProps({
+    modelValue:String
+  })
+
+
+  const emit =  defineEmits(["update:modelValue"])
+  
+  const inputValue = ref('')
+  const dynamicTags = ref(props.modelValue ? props.modelValue.split(',') :[])
+  const inputVisible = ref(false)
+ 
+  
+  const handleClose = (tag) => {
+    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
+    emit("update:modelValue", dynamicTags.value.join(','))
+  }
+  
+  const showInput = () => {
+    inputVisible.value = true
+    nextTick(() => {
+      InputRef.value.input.focus()
+    })
+  }
+  
+  const handleInputConfirm = () => {
+    if (inputValue.value) {
+      dynamicTags.value.push(inputValue.value)
+      emit("update:modelValue", dynamicTags.value.join(','))
+    }
+    inputVisible.value = false
+    inputValue.value = ''
+  }
+  </script>
\ No newline at end of file

src/pages/skus/list.vue

@@ -35,7 +35,7 @@
                 :page-size="limit" @current-change="getData" />
         </div>
 
-        <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
+        <FormDrawer destroyOnClose ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
             <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
                 <el-form-item label="规格名称" prop="name">
                     <el-input v-model="form.name" placeholder="规格名称"></el-input>
@@ -48,7 +48,7 @@
                     </el-switch>
                 </el-form-item>
                 <el-form-item label="规格值" prop="default">
-                    <el-input v-model="form.default" placeholder="规格值"></el-input>
+                    <TagInput v-model="form.default" />
                 </el-form-item>
                 
                 
@@ -72,6 +72,7 @@ import {
 
 import FormDrawer from "@/components/FormDrawer.vue"
 import ListHeader from "@/components/ListHeader.vue"
+import TagInput from "@/components/TagInput.vue"
 import { useInitTable, useInitForm } from "@/composables/useCommon.js"