vue3+ts 引入ztree插件

vue3+ts引入ztree插件

target_for

3906人浏览 · 2022-04-18 17:13:48

target_for · 2022-04-18 17:13:48 发布

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 反正是这个意思）
在这里插入图片描述

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^