perf: 修改 use 为 hooks

docs/docs/zh-CN/components/switch.md

@@ -112,7 +112,7 @@ export default {
 :::
 
 | Name          | Description    | Accepted Values  |
-| ------------- | -------------- | ---------------- | ------------ |
+| ------------- | -------------- | ---------------- |
 | name          | 原生 name 属性 | --               |
 | v-model       | 是否启用       | `true` `false`   |
 | disabled      | 禁用           | `true` `false`   |

docs/docs/zh-CN/guide/norms.md

@@ -0,0 +1,2 @@
+::: field 开发规范
+:::

docs/src/router/zh-CN.ts

@@ -46,6 +46,11 @@ const zhCN = [
             component: () => import('../../docs/zh-CN/guide/contribution.md'),
             meta: { title: '贡献' },
           },
+          {
+            path: '/zh-CN/guide/norms',
+            component: () => import('../../docs/zh-CN/guide/norms.md'),
+            meta: { title: '规范' },
+          },
         ],
       },
       {

docs/src/view/guide.vue

@@ -86,6 +86,12 @@ export default {
             subTitle: 'change log',
             path: '/zh-CN/guide/changelog',
           },
+          {
+            id: 6,
+            title: '规范',
+            subTitle: 'norms',
+            path: '/zh-CN/guide/norms',
+          },
           {
             id: 4,
             title: '问题',

src/module/colorPicker/ColorBox.vue

@@ -8,7 +8,7 @@ import { Nullable } from '/@src/module/type'
 import { computed, onMounted, ref } from 'vue'
 import { HSBToHEX, RGBSTo, RGBToHSB } from '/@src/module/colorPicker/colorUtil'
 import ColorPicker from './ColorPicker.vue'
-import { usePosition } from '/@src/use/usePosition'
+import { usePosition } from '/@src/hooks/usePosition'
 
 interface BoxProps {
   color?: string

src/module/dropdown/index.vue

@@ -32,7 +32,7 @@
 
 <script setup name="LaySelect" lang="ts">
 import { defineProps, ref, watch } from 'vue'
-import useClickOutside from '../../use/useClickOutside'
+import useClickOutside from '../../hooks/useClickOutside'
 
 const dropdownRef = ref<null | HTMLElement>(null)
 const isClickOutside = useClickOutside(dropdownRef)

src/module/select/index.vue

@@ -22,7 +22,7 @@
 
 <script setup name="LaySelect" lang="ts">
 import { defineProps, provide, reactive, ref, watch } from 'vue'
-import useClickOutside from '../../use/useClickOutside'
+import useClickOutside from '../../hooks/useClickOutside'
 
 const selectRef = ref<null | HTMLElement>(null)
 const isClickOutside = useClickOutside(selectRef)

src/module/tab/index.vue

@@ -40,6 +40,7 @@ import {
   ref,
   onUpdated,
   onMounted,
+  watch,
 } from 'vue'
 
 const slot = useSlots()
@@ -57,16 +58,6 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
   })
 }
 
-onUpdated(() => {
-  childrens.value = []
-  setItemInstanceBySlot((slot.default && slot.default()) as VNode[])
-})
-
-onMounted(() => {
-  childrens.value = []
-  setItemInstanceBySlot((slot.default && slot.default()) as VNode[])
-})
-
 const props = defineProps<{
   type?: string
   modelValue: string
@@ -83,6 +74,7 @@ const active = computed({
     emit('update:modelValue', val)
   },
 })
+const slotsChange = ref(true)
 
 const change = function (id: any) {
   emit('update:modelValue', id)
@@ -93,5 +85,11 @@ const close = function (id: any) {
   emit('close', id)
 }
 
+watch(slotsChange, function () {
+  childrens.value = []
+  setItemInstanceBySlot((slot.default && slot.default()) as VNode[])
+})
+
 provide('active', active)
+provide('slotsChange', slotsChange)
 </script>

src/module/tabItem/index.vue

@@ -11,13 +11,15 @@ export default {
 </script>
 
 <script setup name="LayTabItem" lang="ts">
-import { defineProps, inject } from 'vue'
+import { defineProps, inject, defineEmits, Ref } from 'vue'
 
 const props = defineProps<{
   id?: string
 }>()
 
 const active = inject('active')
+const slotsChange: Ref<boolean> = inject('slotsChange') as Ref<boolean>
+slotsChange.value = !slotsChange.value
 </script>