vue3下的updateKeyChildren怎么使用

.browserslistrc

@@ -1,2 +1,4 @@
 > 1%
 last 2 versions
+not dead
+not ie 11

.eslintrc.js

@@ -3,12 +3,21 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
-  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
   parserOptions: {
-    parser: "babel-eslint"
+    parser: '@babel/eslint-parser'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    "vue/multi-word-component-names": "off",
+    "no-useless-escape": "off",
+    "no-unused-vars": "off",
+    "vue/no-mutating-props": "off",
+    "no-prototype-builtins": "off",
+    "vue/no-unused-components": "warn"
   }
-};
+}

README.md

@@ -1,27 +1,16 @@
-## 更新日志
-
-
- * 更新时间 2020/12/02 
-   * 修复异步修改data不渲染问题 对应版本：[email protected]
- * 更新时间 2020/12/05
-   * 修改部分展示 bug 对应版本：[email protected]
- * 更新时间 2021/01/13
-   * 增加 updateKeyChildren 方法：[email protected]
- * 更新时间 2021/02/03
-   * 增加 node-btn-content 属性，对展开圆圈内容自定义处理  [email protected]
- * 更新时间 2021/02/04
-    * 增加 showNodeNum  属性显示子节点数   [email protected]
- * 更新时间 2021/09/07
-   * 修复节点倒叙显示问题 对应版本：[email protected]
+## 使用前阅读
 
-## 文档和事例
-
-地址：http://www.longstudy.club/vue-okr-tree-doc/index.html
+* 该库fork自qq449245884/vue-okr-tree vue2.x版本
+* 因不想在提PR上浪费时间，所以直接fork修改并发布vue3.x版本
 
+## 更新日志
 
+ * 更新时间 2022/02/21 
+   * 修复```render-content```和```nodeBtnContent```在vue3.x使用问题
+
 ## vue-okr-tree
 
-基于 Vue 2的组织架构树组件
+基于 Vue 3的组织架构树组件
 
 ## Install
 
@@ -36,22 +25,11 @@ yarn add vue-okr-tree
 
 ``` js
 
-import {VueOkrTree} from 'vue-okr-tree';
-import 'vue-okr-tree/dist/vue-okr-tree.css'
+import {VueOkrTree} from 'vue-okr-tree-vue3';
+import 'vue-okr-tree-vue3/dist/vue-okr-tree.css'
 
 // ...
 ```
-
-### CDN
-
-``` html
-# css
-<link href="http://qjge81f6q.hd-bkt.clouddn.com/vue-okr-tree.css">
-
-# js
-<script src="http://qjge81f6q.hd-bkt.clouddn.com/vue-okr-tree.umd.min.js"></script>
-```
-
 ## API
 
 #### Attributes
@@ -111,19 +89,5 @@ append   |  为 Tree 中的一个节点追加一个子节点 | 		(data, parentNo
 insertBefore   |  为 Tree 的一个节点的前面增加一个节点 | 	(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的后一个节点的 data、key 或者 node
 insertAfter   |  为 Tree 的一个节点的后面增加一个节点 | 	(data, refNode) 接收两个参数，1. 要增加的节点的 data 2. 要增加的节点的前一个节点的 data、key 或者 node
 
-
-
-
-## 浏览器支持情况
-
-Modern browsers and Internet Explorer 10+.
-
 ## License
 [MIT](http://opensource.org/licenses/MIT)
-
-
-
-## 作品展示
-
-
-![](./src/assets/pro1.png)

babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
-  presets: ["@vue/app"]
-};
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "vue-okr-tree",
-  "version": "1.0.10",
+  "name": "vue-okr-tree-vue3",
+  "version": "1.0.1",
   "main": "dist/vue-okr-tree.umd.min.js",
   "scripts": {
     "dev": "vue-cli-service serve --open",
@@ -11,36 +11,45 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^2.6.5",
+    "core-js": "^3.8.3",
+    "events": "^3.3.0",
     "github-markdown-css": "^4.0.0",
     "prismjs": "^1.22.0",
-    "vue": "^2.6.10"
+    "vue": "^3.2.13"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.5",
-    "@vue/cli-plugin-eslint": "^3.0.5",
-    "@vue/cli-service": "^3.0.5",
+    "@babel/core": "^7.17.5",
+    "@babel/eslint-parser": "^7.17.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-prettier": "^5.0.0",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "prettier": "^1.18.2",
-    "vue-template-compiler": "^2.6.10"
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
   },
-  "description": "一个特殊布局模式结构的`vue Tree`组件",
-  "keywords": ["vue-chart", "vue-tree", "org-tree", "chart", "tree", "org","okr","vue-ork-tree"],
+  "description": "基于qq449245884/vue-okr-tree改为vue3版本",
+  "keywords": [
+    "vue-chart",
+    "vue-tree",
+    "org-tree",
+    "chart",
+    "tree",
+    "org",
+    "okr",
+    "vue-ork-tree"
+  ],
   "license": "MIT",
   "author": {
-    "name": "前端小智",
-    "email": "449245884@qq.com",
-    "url": "https://github.com/qq449245884"
+    "name": "Kevin老师",
+    "email": "lanlazy@163.com",
+    "url": "https://github.com/lazyhero"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/qq449245884/vue-okr-tree"
+    "url": "https://github.com/lazyhero/vue-okr-tree"
   },
   "bugs": {
-    "url": "https://github.com/qq449245884/vue-okr-tree/issues"
+    "url": "https://github.com/lazyhero/vue-okr-tree/issues"
   }
 }

src/App.vue

@@ -1,18 +1,16 @@
 <template>
   <div id="app">
-    <VueOkrTreeDeom />
+    <VueOkrTreeDemo></VueOkrTreeDemo>
   </div>
 </template>
-
 <script>
-import VueOkrTreeDeom from "./components/VueOkrTreeDeom.vue";
+import VueOkrTreeDemo from "./components/VueOkrTreeDemo.vue";
 
 export default {
   name: "app",
   components: {
-    VueOkrTreeDeom
-  }
-};
+    VueOkrTreeDemo
+  },
+  setup() {},
+}
 </script>
-
-<style></style>

src/components/Attributes.vue

@@ -170,13 +170,3 @@
     </table>
   </div>
 </template>
-
-<script>
-export default {
-  data() {
-    return {};
-  }
-};
-</script>
-
-<style scoped></style>

src/components/Base06.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 class="tree-demo-title-h3">节点自定义内容</h3>
+    <h3 class="tree-demo-title-h3">自定义节点结构</h3>
     <p>可自行设置节点内容</p>
     <BaseCard>
       <template v-slot:header>
@@ -27,6 +27,7 @@
   </div>
 </template>
 <script>
+import CustomRenderContentCard from './CustomRenderContentCard.vue';
 import mixins from "./mixins";
 export default {
   mixins: [mixins],
@@ -137,12 +138,7 @@ export default {
   },
   methods: {
     renderContent(h, node) {
-      return (
-        <div class={`diy-wrapper ${node.isCurrent ? "current-select" : ""}`}>
-          <div class="diy-con-name">{node.data.label}</div>
-          <div class="diy-con-content">{node.data.content}</div>
-        </div>
-      );
+      return <CustomRenderContentCard data={node.data}></CustomRenderContentCard>
     }
   }
 };

src/components/Base07.vue

@@ -38,16 +38,6 @@ export default {
   mixins: [mixins],
   data() {
     return {
-      testData: [
-        {
-          id: 1,
-          label: "xxx科技有有限公司",
-          // children: [{
-          //   id: 3,
-          //   label: "产品研发部",
-          // }]
-        }
-      ],
       testData: [
         {
           id: 1,

src/components/BaseCard.vue

@@ -11,7 +11,7 @@
       <div v-if="$slots.description" class="description">
         <slot name="description" />
       </div>
-      <slot></slot>
+      <slot ref="slotDefault"></slot>
     </div>
     <div class="base-card-control" @click="handleClick">
       {{ show ? "隐藏代码" : "显示代码" }}
@@ -30,7 +30,7 @@ export default {
     handleClick() {
       this.show = !this.show;
       if (this.show) {
-        const { height } = this.$slots.default[0].elm.getBoundingClientRect();
+        const { height } = this.$refs.meta.getBoundingClientRect();
         this.metaHeight = height + 80;
       } else {
         this.metaHeight = 0;

src/components/CustomRenderContentCard.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="custom">
+    <span class="custom-label">{{ data.label }}</span>
+    <span class="custom-content">{{ data.content }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CustomRenderContentCard',
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {
+          label: '',
+          content: ''
+        }
+      }
+    }
+  },
+  setup() {},
+}
+</script>
+<style scoped>
+.custom-label {
+  font-weight: 600;
+}
+</style>