fix(layer): 使用 guid 作为 layer 实例的唯一标识

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

@@ -234,12 +234,12 @@ function handleClick(node) {
 ::: table
 
 | Name     | Description    | Accepted Values |
-| -------- | -------------- | --------------- | 
+| -------- | -------------- | --------------- |
 | id       | 唯一值         | -               |
 | title    | 节点名称       | -               |
 | children | 子节点         | []              |
 | disabled | 该节点是否禁用 | false           |
-| spread   | 该节点是否展开 | false           | 
+| spread   | 该节点是否展开 | false           |
 
 :::
 

src/module/layer/index.vue

@@ -89,6 +89,7 @@ export default {
 <script lang="ts" setup>
 import { onMounted, onUpdated, ref, useSlots, watch } from 'vue'
 import useMove from '../../hooks/useMove'
+import { guid } from '../../tools/guidUtil'
 
 const slot = useSlots()
 
@@ -120,7 +121,7 @@ const props = withDefaults(
     btnAlign?: string
   }>(),
   {
-    id: 'layer',
+    id: 'layer-' + guid(),
     zIndex: 99999999,
     title: '标题',
     offset: () => ['50%', '50%'],

src/tools/guidUtil.ts

@@ -0,0 +1,7 @@
+export function S4() { 
+    return (((1+Math.random())*0x10000)|0).toString(16).substring(1); 
+ }; 
+
+ export function guid() { 
+    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); 
+ };