fix(docs): fixed some bugs of demo (#978)

examples/sites/demos/pc/app/modal/footer-btn-content-composition-api.vue

@@ -26,7 +26,7 @@ const confirmContent2 = ref('确定')
 const cancelContent2 = ref('再想想')
 
 function btnClick1() {
-  Modal.confirm({
+  TinyModal.confirm({
     message: '自定义确定按钮和取消按钮文本',
     confirmContent: confirmContent1.value,
     cancelContent: cancelContent1.value

examples/sites/demos/pc/app/steps/size-composition-api.vue

@@ -1,12 +1,12 @@
 <template>
-  <tiny-steps vertical line size="small" :data="data" :visible-num="4" :active="advancedActive"></tiny-steps>
+  <tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
+import { Steps as TinySteps, Modal } from '@opentiny/vue'
 
-const normalActive = ref(0)
+const active = ref(0)
 const data = ref([
   {
     name: 'Basic Info'
@@ -23,5 +23,8 @@ const data = ref([
     disabled: true
   }
 ])
-const normalActive1 = ref(0)
+
+const normalClick = (index, node) => {
+  active.value = index
+}
 </script>

examples/sites/demos/pc/app/steps/size.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-steps vertical line size="small" :data="data" :visible-num="4" :active="advancedActive"></tiny-steps>
+  <tiny-steps vertical line size="small" :data="data" :active="advancedActive" @click="normalClick"></tiny-steps>
 </template>
 
 <script>
@@ -26,6 +26,11 @@ export default {
         { name: 'Billing', status: '', description: '默认无状态' }
       ]
     }
+  },
+  methods: {
+    normalClick(index, node) {
+      normalActive.value = index
+    }
   }
 }
 </script>

examples/sites/demos/pc/app/steps/slot-description-composition-api.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { TimeLine as TinyTimeLine, TimelineItem as TinyTimelineItem } from '@opentiny/vue'
 
 const active = ref(0)
 const data = ref([

examples/sites/demos/pc/app/steps/vertical-steps-composition-api.vue

@@ -23,7 +23,7 @@ const data = ref([
 ])
 
 const onClick = (index, node) => {
-  timeActive1.value = index
+  timeActive.value = index
 
   Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
 }

examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
-  <tiny-time-line :active="active" text-position="right" space="200px">
-    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick(i)"> </tiny-timeline-item>
+  <tiny-time-line :active="active" space="200px">
+    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick"> </tiny-timeline-item>
   </tiny-time-line>
 </template>
 

examples/sites/demos/pc/app/time-line/timeline-item.vue

@@ -1,11 +1,11 @@
 <template>
   <tiny-time-line :active="active" text-position="right" space="200px">
-    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick(i)"> </tiny-timeline-item>
+    <tiny-timeline-item v-for="(item, i) in data" :node="item" :key="i" @click="onItemClick"> </tiny-timeline-item>
   </tiny-time-line>
 </template>
 
 <script lang="ts">
-import { TimeLine, TimelineItem } from '@opentiny/vue'
+import { TimeLine, TimelineItem, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -24,8 +24,12 @@ export default {
     }
   },
   methods: {
-    onItemClick(index) {
+    onItemClick(index, node) {
       this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
     }
   }
 }

examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue

@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
 
 const treeData = ref([
   {

examples/sites/demos/pc/app/tree/drag-composition-api.vue

@@ -61,22 +61,22 @@ function allowDrop(srcNode, targetNode, type) {
   return !targetNode.data.id.startsWith('3')
 }
 function nodeDrop(srcNode, targetNode, dropType, event) {
-  this.listenEvent == 'node-drop' && console.log('nodeDrop 事件参数：', { srcNode, targetNode, dropType, event })
+  listenEvent.value == 'node-drop' && console.log('nodeDrop 事件参数：', { srcNode, targetNode, dropType, event })
 }
 function dragStart(node, event) {
-  this.listenEvent == 'node-drag-start' && console.log('dragStart 事件参数：', { node, event })
+  listenEvent.value == 'node-drag-start' && console.log('dragStart 事件参数：', { node, event })
 }
 function dragEnter(srcNode, targetNode, event) {
-  this.listenEvent == 'node-drag-enter' && console.log('dragEnter 事件参数：', { srcNode, targetNode, event })
+  listenEvent.value == 'node-drag-enter' && console.log('dragEnter 事件参数：', { srcNode, targetNode, event })
 }
 function dragOver(srcNode, targetNode, event) {
-  this.listenEvent == 'node-drag-over' && console.log('dragOver 事件参数：', { srcNode, targetNode, event })
+  listenEvent.value == 'node-drag-over' && console.log('dragOver 事件参数：', { srcNode, targetNode, event })
 }
 function dragLeave(srcNode, targetNode, event) {
-  this.listenEvent == 'node-drag-leave' && console.log('dragLeave 事件参数：', { srcNode, targetNode, event })
+  listenEvent.value == 'node-drag-leave' && console.log('dragLeave 事件参数：', { srcNode, targetNode, event })
 }
 function dragEnd(srcNode, targetNode, dropType, event) {
-  this.listenEvent == 'node-drag-end' && console.log('dragEnd 事件参数：', { srcNode, targetNode, dropType, event })
+  listenEvent.value == 'node-drag-end' && console.log('dragEnd 事件参数：', { srcNode, targetNode, dropType, event })
 }
 </script>
 

examples/sites/demos/pc/app/tree/node-op.vue

@@ -7,7 +7,13 @@
       <tiny-button @click="updateKeyChildren">更新子节点</tiny-button>
       <tiny-button @click="remove">删除当前节点</tiny-button>
     </div>
-    <tiny-tree ref="treeRef" :data="data" node-key="id" default-expand-all></tiny-tree>
+    <tiny-tree
+      ref="treeRef"
+      :data="data"
+      node-key="id"
+      default-expand-all
+      :current-node-key="currentNodeKey"
+    ></tiny-tree>
   </div>
 </template>
 
@@ -41,7 +47,8 @@ export default {
           label: '数据 3',
           children: [{ id: '3-1', label: '数据 3-1' }]
         }
-      ]
+      ],
+      currentNodeKey: '1-1'
     }
   },
   methods: {