refactor: vue3

Author: ChuChencheng

README.md

@@ -5,6 +5,14 @@
 > 这是原先[ctree](https://github.com/wsfe/vue-tree/tree/2.x)的升级版本，同时支持 vue2 和 vue3。
 > 新版改变了包的名称和部分 export 模块名称。
 
+## **注意**
+
+`@wsfe/vue-tree` 使用了 `vue-demi` 包尝试使组件在 vue 2/3 都通用。但遗憾的是 `vue-demi` 并不能完美使 vue3 组件兼容 vue2 。
+
+`@wsfe/vue-tree` 将使用最新版 vue(3.x) 开发
+
+因此，建议 vue2 用户使用 2.x 使用 `@wsfe/ctree` 包。
+
 ## 案例
 
 [在线 demo](https://wsfe.github.io/vue-tree/)

examples/App.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref } from 'vue-demi'
+import { defineComponent, reactive, ref } from 'vue'
 import Drag from './Drag.vue'
 
 import Loading from './Loading.vue'

examples/Drag.vue

@@ -17,7 +17,7 @@
 <script lang="ts">
 import VTree from '../src'
 import treeDataGenerator from '../tests/tree-data-generator'
-import { defineComponent, ref } from 'vue-demi'
+import { defineComponent, ref } from 'vue'
 export default defineComponent({
   name: 'Drag',
   components: {

examples/Drop.vue

@@ -3,6 +3,7 @@
     <div style="width: 200px">
       <p>自定义展示 slot ：</p>
       <VTreeDrop
+        ref="treeDropRef"
         v-model="value"
         :data="data"
         checkable
@@ -51,6 +52,7 @@
         :placement="placement"
         :dropdown-min-width="300"
         dropdown-width-fixed
+        @selected-change="handleSelectedChange"
       >
         <template #empty>slot 传进来的暂无数据</template>
       </VTreeDrop>
@@ -63,7 +65,7 @@
 import { VTreeDrop, TreeNode } from '../src'
 import type { PlacementType } from '../src/types'
 import treeDataGenerator from '../tests/tree-data-generator'
-import { defineComponent, ref } from 'vue-demi'
+import { defineComponent, onMounted, ref } from 'vue'
 
 const genData = (extra = {}) => {
   return treeDataGenerator(
@@ -93,12 +95,22 @@ export default defineComponent({
     function handleCheckedChange() {
       console.log('checked-change')
     }
+    function handleSelectedChange() {
+      console.log('selected-change')
+    }
+    const treeDropRef = ref<InstanceType<typeof VTreeDrop>>()
+    onMounted(() => {
+      console.log('drop titleField', treeDropRef.value?.titleField)
+      console.log('drop keyField', treeDropRef.value?.keyField)
+    })
     return {
+      treeDropRef,
       data,
       value,
       value2,
       placement,
-      handleCheckedChange
+      handleCheckedChange,
+      handleSelectedChange,
     }
   }
 })

examples/DropDataChange.vue

@@ -18,7 +18,7 @@
 <script lang="ts">
 import { VTreeDrop } from '../src'
 import treeDataGenerator from '../tests/tree-data-generator'
-import { defineComponent, ref, watch } from 'vue-demi'
+import { defineComponent, ref, watch } from 'vue'
 const genData = (extra = {}) => {
   return treeDataGenerator(
     Object.assign(

examples/Feature.vue

@@ -167,7 +167,7 @@
 import VTree, { TreeNode } from '../src'
 import { IgnoreType } from '../src/types'
 import treeDataGenerator from '../tests/tree-data-generator'
-import { defineComponent, ref, nextTick } from 'vue-demi'
+import { defineComponent, ref, nextTick } from 'vue'
 
 const genData = (extra = {}) => {
   return treeDataGenerator(

examples/InsertRenderTree.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts">
 import VTree, { TreeNode } from '../src'
-import { defineComponent, reactive, ref, h } from 'vue-demi'
+import { defineComponent, reactive, ref, h } from 'vue'
 export default defineComponent({
   name: 'InsertRenderTree',
   components: {

examples/Loading.vue

@@ -8,7 +8,7 @@
 <script lang="ts">
 import VTree from '../src'
 import treeDataGenerator from '../tests/tree-data-generator'
-import { defineComponent, ref } from 'vue-demi'
+import { defineComponent, ref } from 'vue'
 
 const genData = (extra = {}) => {
   return treeDataGenerator(

examples/Mobile.vue

@@ -46,7 +46,7 @@
 import VTree, { TreeNode } from '../src'
 import { IgnoreType } from '../src/types'
 import treeDataGenerator from '../tests/tree-data-generator'
-import { defineComponent, ref, nextTick } from 'vue-demi'
+import { defineComponent, ref, nextTick } from 'vue'
 
 const genData = (extra = {}) => {
   return treeDataGenerator(

examples/Performance.vue

@@ -84,7 +84,7 @@
 <script lang="ts">
 import VTree from '../src'
 import treeDataGenerator from '../tests/tree-data-generator'
-import { computed, defineComponent, ref } from 'vue-demi'
+import { computed, defineComponent, ref } from 'vue'
 
 interface TreeMockMeta {
   treeDepth: number