按需引入级联测试

components.d.ts

@@ -9,6 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     AreaSelect: typeof import('./src/components/AreaSelect/index.vue')['default']
     Autocomplete: typeof import('./src/components/FormUI/autocomplete/index.vue')['default']
+    Cascade: typeof import('./src/components/FormUI/cascade/index.vue')['default']
+    Cascader: typeof import('./src/components/FormUI/cascader/index.vue')['default']
     Checkbox: typeof import('./src/components/FormUI/checkbox/index.vue')['default']
     Combobox: typeof import('./src/components/FormUI/combobox/index.vue')['default']
     ComboboxZhAndEn: typeof import('./src/components/FormUI/comboboxZhAndEn/index.vue')['default']

package.json

@@ -13,6 +13,7 @@
     "@vuepic/vue-datepicker": "^8.7.0",
     "axios": "^1.6.8",
     "echarts": "^5.4.3",
+    "element-plus": "^2.8.0",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
@@ -39,6 +40,7 @@
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
     "sass": "^1.71.1",
+    "unplugin-auto-import": "^0.18.2",
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.5",

src/components/CtForm/index.vue

@@ -57,6 +57,12 @@
                 :item="item"
                 @change="handleChange(item)"
               ></textareaUI>
+              <cascadeUI
+                v-if="item.type === 'cascade'"
+                v-model="item.value"
+                :item="item"
+                @change="handleChange(item)"
+              ></cascadeUI>
               <nestedListGroupUI
                 v-if="item.type === 'nestedListGroup'"
                 v-model="item.value"
@@ -118,6 +124,7 @@ import comboboxUI from './../FormUI/combobox'
 import radioGroupUI from './../FormUI/radioGroup'
 import checkboxUI from './../FormUI/checkbox'
 import textareaUI from './../FormUI/textArea'
+import cascadeUI from './../FormUI/cascade'
 import nestedListGroupUI from './../FormUI/nestedListGroup'
 import datePickerUI from './../FormUI/datePicker'
 import DatePicker from '@/components/DatePicker'

src/components/FormUI/cascade/index.vue

@@ -0,0 +1,317 @@
+<!-- 级联选择器 -->
+<template>
+  <div>
+    <div style="height: 50px;"></div>
+    <v-text-field
+      v-model="value"
+      variant="outlined" 
+      id="menu-activator"
+      label="查找职位关键字"
+      color="primary"
+      append-inner-icon="mdi-magnify"
+      :rules="[v => !!v || '请输入测试内容']"
+      style="width: 500px;"
+    >
+    </v-text-field>
+    <v-menu activator="#menu-activator" :close-on-content-click="closeOnContentClick">
+      <!-- <el-cascader-panel
+        v-model="value"
+        :options="options"
+        style="width: fit-content; background-color: #fff;"
+        @change="handleChange"
+      >
+      </el-cascader-panel> -->
+    </v-menu>
+  </div>
+</template>
+
+<script setup>
+// import 'element-plus/es/components/cascader-panel/style/css'
+// import { ElCascaderPanel  } from 'element-plus'
+
+// import 'element-plus/es/components/cascader/style/css'
+// import { ElCascader  } from 'element-plus'
+import { ref } from 'vue'
+defineOptions({ name:'FormUI-el-cascade'})
+
+const value = ref('')
+// setTimeout(() => { value.value = 'controllability' }, 1000)
+
+// const handleChange = (val, val1, val2) => {
+//   console.log('1', val, val1, val2)
+// }
+
+const closeOnContentClick = ref(false) // multiple
+
+const options = [
+  {
+    value: 'guide',
+    label: 'Guide',
+    children: [
+      {
+        value: 'disciplines',
+        label: 'Disciplines',
+        children: [
+          {
+            value: 'consistency',
+            label: 'Consistency',
+          },
+          {
+            value: 'feedback',
+            label: 'Feedback',
+          },
+          {
+            value: 'efficiency',
+            label: 'Efficiency',
+          },
+          {
+            value: 'controllability',
+            label: 'Controllability',
+          },
+        ],
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'side nav',
+            label: 'Side Navigation',
+          },
+          {
+            value: 'top nav',
+            label: 'Top Navigation',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'component',
+    label: 'Component',
+    children: [
+      {
+        value: 'basic',
+        label: 'Basic',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout',
+          },
+          {
+            value: 'color',
+            label: 'Color',
+          },
+          {
+            value: 'typography',
+            label: 'Typography',
+          },
+          {
+            value: 'icon',
+            label: 'Icon',
+          },
+          {
+            value: 'button',
+            label: 'Button',
+          },
+        ],
+      },
+      {
+        value: 'form',
+        label: 'Form',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio',
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox',
+          },
+          {
+            value: 'input',
+            label: 'Input',
+          },
+          {
+            value: 'input-number',
+            label: 'InputNumber',
+          },
+          {
+            value: 'select',
+            label: 'Select',
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader',
+          },
+          {
+            value: 'switch',
+            label: 'Switch',
+          },
+          {
+            value: 'slider',
+            label: 'Slider',
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker',
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker',
+          },
+          {
+            value: 'datetime-picker',
+            label: 'DateTimePicker',
+          },
+          {
+            value: 'upload',
+            label: 'Upload',
+          },
+          {
+            value: 'rate',
+            label: 'Rate',
+          },
+          {
+            value: 'form',
+            label: 'Form',
+          },
+        ],
+      },
+      {
+        value: 'data',
+        label: 'Data',
+        children: [
+          {
+            value: 'table',
+            label: 'Table',
+          },
+          {
+            value: 'tag',
+            label: 'Tag',
+          },
+          {
+            value: 'progress',
+            label: 'Progress',
+          },
+          {
+            value: 'tree',
+            label: 'Tree',
+          },
+          {
+            value: 'pagination',
+            label: 'Pagination',
+          },
+          {
+            value: 'badge',
+            label: 'Badge',
+          },
+        ],
+      },
+      {
+        value: 'notice',
+        label: 'Notice',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert',
+          },
+          {
+            value: 'loading',
+            label: 'Loading',
+          },
+          {
+            value: 'message',
+            label: 'Message',
+          },
+          {
+            value: 'message-box',
+            label: 'MessageBox',
+          },
+          {
+            value: 'notification',
+            label: 'Notification',
+          },
+        ],
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'menu',
+            label: 'Menu',
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs',
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb',
+          },
+          {
+            value: 'dropdown',
+            label: 'Dropdown',
+          },
+          {
+            value: 'steps',
+            label: 'Steps',
+          },
+        ],
+      },
+      {
+        value: 'others',
+        label: 'Others',
+        children: [
+          {
+            value: 'dialog',
+            label: 'Dialog',
+          },
+          {
+            value: 'tooltip',
+            label: 'Tooltip',
+          },
+          {
+            value: 'popover',
+            label: 'Popover',
+          },
+          {
+            value: 'card',
+            label: 'Card',
+          },
+          {
+            value: 'carousel',
+            label: 'Carousel',
+          },
+          {
+            value: 'collapse',
+            label: 'Collapse',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'resource',
+    label: 'Resource',
+    children: [
+      {
+        value: 'axure',
+        label: 'Axure Components',
+      },
+      {
+        value: 'sketch',
+        label: 'Sketch Templates',
+      },
+      {
+        value: 'docs',
+        label: 'Design Documentation',
+      },
+    ],
+  },
+]
+
+</script>
+<style lang="scss" scoped>
+</style>

vite.config.mjs

@@ -4,6 +4,8 @@ import Vue from '@vitejs/plugin-vue'
 import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 // import ViteFonts from 'unplugin-fonts/vite'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import AutoImport from 'unplugin-auto-import/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import path from 'path'
 
 // Utilities
@@ -26,8 +28,12 @@ export default defineConfig({
             return { importName: name.slice(4), path: `@/components/CtVuetify/${name}.vue` }
           }
         },
+        ElementPlusResolver(),
       ]
     }),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
     createSvgIconsPlugin({
       iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
       // symbolId: 'icon-[dir]-[name]',