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 反正是这个意思）

这才刚刚开始以后问题还多着呢！

vue3+ts 引入ztree插件相关推荐

vue3+ts引入百度地图
第一步: 首先在百度地图api获取他的秘钥把获取的秘钥和链接放到vue的public的inde.html中 https://api.map.baidu.com/api?type=webgl& ...
VUE3+TS 引入JQuery
先执行如下安装命令,安装jquery npm install jquery npm install @types/jquery 然后在main.ts中引入 import $ from 'jquery' ...
vue3+ts引入第三方js包，避免关键字报错
项目要使用第三方包leaflet 在入口文件index.html中引入之后,使用的时候ts检查时关键字L就会报错第一种方法用 ** //@ts-ignore**,在用了L关键字的每一行上面加这个 ...
《Vue3+TS》开发一个自己的起始页（二）chrome插件化
前言各位小伙伴们大家好,求关注,求收藏,求点赞: 另外为自己拉一波票:https://bbs.csdn.net/topics/603955887?spm=1001.2014.3001.6953,诚实 ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...
Vue3+ts——动画Loading以及引入本地随机背景效果
Vue3+ts--随机生成背景图片我这里是采用loading为例子制作的随机背景效果(底部附上代码和成品效果展示) 这里需要注意一下,数组的格式必须要用下面这种格式创建对象 new URL(&quo ...
2、Gantt 入门（vue3 + ts）
首先把 gantt 官网下载的相关文件放入 resource 文件中. 下载地址:https://dhtmlx.com/docs/products/dhtmlxGantt/download.shtml ...
vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...
vue3+ts+vite 路由详解
安装 1.首先创建项目 npm init vite@latest 输入文件名,选择Vue.TypeScript 2.vscode打开项目,安装router,less,less-loader,@type ...

vue3+ts 引入ztree插件

vue3+ts+ztree

一、ztree

二、开始

1.引入

写树

vue3+ts 引入ztree插件相关推荐

最新文章

热门文章