vue3+ts+ztree
新公司 要用新技术 vue3+ts 一切从头学 最近要引一个树的插件 ztree 所以把遇到的问题 都记下来
一、ztree
找了无数个tree的插件，最后被ztree征服，主要是他的官网的demo简直太厉害了，想要的功能几乎都能复现出来，贴上网址：http://www.treejs.cn/v3/main.php#_zTreeInfo
我用到的功能就是拖拽 两棵树之间互相拖 ztree YYDS
二、开始
1.引入
因为ztree是jQuery插件 所以不仅得引入ztree 也得引入jQuery
npm install @ztree/ztree_v3 npm i jquery //然后在main.ts 中引入 import '@ztree/ztree_v3/js/jquery-1.4.4.min.js' import '@ztree/ztree_v3/js/jquery.ztree.core.min.js' import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js' import '@ztree/ztree_v3/js/jquery.ztree.exedit.min.js' // import '@ztree/ztree_v3/css/metroStyle/metroStyle.css' import '@ztree/ztree_v3/css/zTreeStyle/zTreeStyle.css' //引入之后 可能会报找不到jQuery 这个时候要下载npm install @types/jquery //这个js引入的顺序 一定不能变奥 因为我就在这碰过壁 咋写都写不出来 结果是顺序变了
然后需要在vue.config.ts 中配置一下jQuery 不然会报错：
const { defineConfig } = require('@vue/cli-service') const webpack = require('webpack') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ] }, })
这里要配置webpack的 就是自己建立一个 webpack.config.js 这也是打包的关键了
写树
我建议把官网的demo下载出来 这样在本地看非常方便
这个文件夹里的HTML 就是所有需要用到的功能文件 然后去对比官网的demo路径就能找到
下面贴出vue页面 整个代码 我这个写的是两棵树互拖 里面会有注释
<template> <!-- vue3页面 --> <div class="about-wrap"> <h1>测试树结构</h1> <div class="btnwrap"> <a id="addLeaf" href="#" title="增加叶子节点" onclick="return false;">增加叶子节点</a> <a id="remove" href="#" title="删除节点" onclick="return false;">删除节点</a> </div> <div class="content_wrap"> //这里的class="ztree"必须要写的 显示不出 <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="right"> <ul id="treeDemo2" class="ztree"></ul> </div> </div> </div> </template> <script lang='ts'> import { defineComponent, onMounted, reactive } from 'vue' import $ from 'jquery'; export default defineComponent({ name: 'App', props :{ }, setup(props) { //以下 都是ts的写法 因为要配置类型 可以和ztree官方的做对比 其实差不多 就是多了类型 我都写了any 但后期一定要改 let onDrag =(event:any, treeId:any, treeNodes:any)=> { alert(treeNodes.length); }; let onDrop = (event:any, treeId:any, treeNodes:any, targetNode:any, moveType:any)=>{ alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" )); }; let beforeDrag=(treeId:any, treeNodes:any)=> { console.log(treeId, treeNodes,'beforeDrag'); for (var i=0,l=treeNodes.length; i<l; i++) { if (treeNodes[i].drag === false) { return false; } } return true; } let beforeDrop=(treeId:any, treeNodes:any, targetNode:any, moveType:any)=> { console.log(treeId,'b drop'); return targetNode ? targetNode.drop !== false : true; } let showCode=(id:any, str:any)=> { var code = $("#code" + id); code.empty(); for (var i=0, l=str.length; i<l; i++) { code.append("<li>"+str[i]+"</li>"); } } let setCheck=()=> { let tree:any = $.fn; var zTree = tree.zTree.getZTreeObj("treeDemo"), isCopy = $("#copy").attr("checked"), isMove = $("#move").attr("checked"), prev = $("#prev").attr("checked"), inner = $("#inner").attr("checked"), next = $("#next").attr("checked"); zTree.setting.edit.drag.isCopy = isCopy; zTree.setting.edit.drag.isMove = isMove; showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]); zTree.setting.edit.drag.prev = prev; zTree.setting.edit.drag.inner = inner; zTree.setting.edit.drag.next = next; showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]); } let newCount = 1; let trees:any = $.fn; // 增加子节点 let add=(e:any)=>{ var zTree = trees.zTree.getZTreeObj("treeDemo"), isParent = e.data.isParent, nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (treeNode) { treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)}); } else { treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)}); } if (treeNode) { zTree.editName(treeNode[0]); } else { alert("叶子节点被锁定，无法增加子节点"); } }; // 删除子节点 let remove = (e:any) => { var zTree = trees.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (nodes.length == 0) { alert("请先选择一个节点"); return; } var callbackFlag = $("#callbackTrigger").attr("checked"); zTree.removeNode(treeNode, callbackFlag); }; //在这里要配置树所用到的功能 官网写的非常清楚了 var setting = { edit: { enable: true, // 显示删除按钮 showRemoveBtn: true, // 显示更改名称按钮 showRenameBtn: true }, data: { simpleData: { enable: true } }, view: { showLine: false }, callback: { beforeDrag: beforeDrag, beforeDrop: beforeDrop } }; // 数据格式 可以是这样并列的 也可以是json嵌套的那种 var zNodes =[ { id:1, pId:0, name:"父节点 1", open:true}, { id:11, pId:1, name:"叶子节点 1-1"}, { id:12, pId:1, name:"叶子节点 1-2"}, { id:13, pId:1, name:"叶子节点 1-3"}, { id:2, pId:0, name:"父节点 2", open:true}, { id:21, pId:2, name:"叶子节点 2-1"}, { id:22, pId:2, name:"叶子节点 2-2"}, { id:23, pId:2, name:"叶子节点 2-3"}, { id:3, pId:0, name:"父节点 3", open:true}, { id:31, pId:3, name:"叶子节点 3-1"}, { id:32, pId:3, name:"叶子节点 3-2"}, { id:33, pId:3, name:"叶子节点 3-3"} ]; onMounted(()=>{ ss(); }); let ss= ()=>{ $(document).ready(function(){ // 这句话要写 要配置类型 因为在jQuery里是找不到ztree的 // 配置为any类型就不报错了 这个问题困扰了我两天 就这一句话 let tree:any = $.fn; // $("#copy").bind("click", copy); // $("#cut").bind("click", cut); // $("#paste").bind("click", paste); tree.zTree.init($("#treeDemo"), setting, zNodes); tree.zTree.init($("#treeDemo2"), setting); $("#addLeaf").bind("click", {isParent:false}, add); $("#remove").bind("click", remove); }); } //vue3 的形式 只要定义了 所有的都得return出来 不然找不到 return { setting, zNodes, ss, beforeDrag, beforeDrop, setCheck, showCode, add, } } }) </script> <style lang='less' scoped> //这里就是写的树的样式了 自己随意改 // @import '../../public/css/demo.css'; @import '../../public/css/zTreeStyle.css'; .about-wrap{ width:100%; height: 100%; .btnwrap{ display: flex; justify-content: space-around; color: #222; font-size: 16px; padding-bottom: 20px; a{ cursor: pointer; } } .treewrap{ width: 100%; height: 100%; display: flex; } .left{ width: 50%; height: 100%; margin: 0 auto; float: none !important; border: solid pink; } .right{ width: 50%; height: 100%; border:solid forestgreen } } </style>
最后的呈现（左右随便来回拖 我不会放GIF 反正是这个意思 ）
这才刚刚开始 以后问题还多着呢！
