vue封装ztree

Ztree官网下载全量的插件包，然后解压。

封装成vueZtree，代码如下：

<!—- ztree封装的vue树，依赖ztree3.5版本的css和js，setting配置项等配置可查看ztree官网的api文档。要正常使用，则项目需要引入jQuery--> 
<style>
@import "./ztree/metroStyle/metroStyle.css";

.boxDiv{
  display:block;
  padding: 0px 5px;
  text-align: center;
}
.searchInput {
  width: 95%;
  border: 1px solid #dddddd;
  border-radius: 3px;
  line-height: 18px;
  padding: 1px 5px;
  display: none;
}
.searchInput::-webkit-input-placeholder{
  color:#cccccc
}
</style>

<template>
   <div class="boxDiv">
      <input class="searchInput" placeholder="请输入关键字" :id="objId+'search'" :style="inputStyle"/>
      <ul :id="objId" class="ztree"></ul>
  </div>
</template>

<script>
import "./ztree/jquery.ztree.all.min.js"; //ztree
import "./ztree/jquery.ztree.exhide.min.js"; //ztree
import "./ztree/ztree.extendfunc.js"; //模糊搜索的方法，仅支持非异步加载时候的模糊搜索
import commonTool from "./commonTool.js";
/***
 * ================================函数说明=====================================
 * 此组件只是对ztree3.5版本的js进行了vue接口的封装，支持所有ztree3.5提供的方法，
 * 调用getTreeObj()函数获得ztree的对象后即可使用方法。
 * 如：addNodes方法在此组件中未封装，但可以通过getTreeObj().addNodes()来调用
 * 
 * 也可以根据ztree3.5的官方API文档在此组件的基础上再进行右键点击事件等方法的封装
 * ============================================================================
 *
 * ================================参数说明=====================================
 * zdatas：树的节点数据，形如：
 * [
      {
        id: "1",
        name: "test1",
        children: [
          {
            id: "3",
            name: "test3",
            children: [
              { id: "31", name: "test31", checked: true, chkDisabled: true }
            ]
          },
          { id: "4", name: "test4" },
          { id: "5", name: "test5" }
        ]
      },
      { id: "2", name: "test2" }
    ];
 * 
 * viewStyle：树的view样式，可参照ztree的官方文档API中setting-view部分
 * viewStyle例如：{
    //树的节点文本样式
    fontCss:{
      color:"#ff0011",
      background:"blue"