这里写图片描述

最近在开发wing插件的时候要用到一些树形结构，这些结构使用是想做一个引擎类库的导航。下面借助了nodejs 能够读取项目的目录，并生成一些json的数据，有了这个基础后，我们就可以实现遍历目录来获取想要的数据了。这个时候，还需要借助了vue里面一个树形结构的案例完成。

当然还有jq的树形菜单，主要配合一些jq的插件一些库就可以完成了。不过vue提供的案例也满足了我们使用。

http://cn.vuejs.org/examples/tree-view.html

这里写图片描述

生成的格式 需要满足这种父子格式。因此在遍历过程当中也在生成这种格式。

  var data = {name: 'My Tree',
  children: [
    { name: 'hello' }
    ]}

下面一段nodejs生成树形数据。

  var fs = require('fs')


//遍历文件夹，获取所有文件夹里面的文件信息
/*
 * @param path 路径
 *
 */

function geFileList(path)
{
   var filesList = [];
   var targetObj = {};
   readFile(path,filesList,targetObj);
   return filesList;
}

//遍历读取文件
function readFile(path,filesList,targetObj)
{
   files = fs.readdirSync(path);//需要用到同步读取
   files.forEach(walk);
   function walk(file)
   {  
        states = fs.statSync(path+'/'+file);         
        if(states.isDirectory())
        {
            var item ;
            if(targetObj["children"])
            {
                item = {name:file,children:[]};
                targetObj["children"].push(item);
            }
            else
            {
               item = {name:file,children:[]};
               filesList.push(item);
            }

            readFile(path+'/'+file,filesList,item);
        }
        else
        {   
            //创建一个对象保存信息
            var obj = new Object();
            obj.size = states.size;//文件大小，以字节为单位
            obj.name = file;//文件名
            obj.path = path+'/'+file; //文件绝对路径

            if(targetObj["children"])
            {
               var item = {name:file,value:obj.path}
               targetObj["children"].push(item);
            }
            else
            {
                var item = {name:file,value:obj.path};
                filesList.push(item);
            }
        }     
    }
}

//写入文件utf-8格式
function writeFile(fileName,data)
{  
  fs.writeFile(fileName,data,'utf-8',complete);
  function complete()
  {
     console.log("文件生成成功");
  } 
}


var filesList = geFileList("D:/Program Files/Egret/EgretEngine/win/egret/src");
var str = JSON.stringify(filesList);
str = "var data ={name:'Egret',children:#1}".replace("#1",str);
writeFile("tree.js",str);

创建一个网页，引用生成好的tree.js 数据。同时引入到vue.js

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    </head>
    <style>
    body {
          font-family: Menlo, Consolas, monospace;
          color: #444;
        }
        .item {
          cursor: pointer;
        }
        .bold {
          font-weight: bold;
        }
        ul {
          padding-left: 13px;
          line-height: 1.5em;
          list-style-type:none;
        }

    </style>
<body>

<!-- item template -->
<script type="text/x-template" id="item-template">
  <li>
    <div       :class="{bold: isFolder}"
      @click="toggle"
      @dblclick="changeType">
    <!--  <img src="{{open ? 'images/icon-right.png':'images/icon-right.png'}}" v-if="isFolder"/>-->
      <img src="{{isFolder ? 'images/folder.png':'images/card.png'}}"/>
      {{model.name}}
      <!--<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>-->
    <!--  <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>-->
    </div>

    <ul v-show="open" v-if="isFolder">      
      <item         class="item"
        v-for="model in model.children"
        :model="model">
      </item>
    </ul>

  </li>
</script>


<ul id="demo">
  <item
    class="item"
    :model="treeData">
  </item>
</ul>

</body>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/tree.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
</html>

Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object
  },
  data: function () {
    return {
      open: false
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
      else
      {
        alert(this.model.value);
      }
    },
    changeType: function () {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
      this.model.children.push({
        name: 'new stuff'
      })
    },
    openFolder:function(){

    }
  }
})

// boot up the demo
var demo = new Vue({
  el: '#demo',
  data: {
    treeData: data
  }
})

为了生成上面效果图，还需要找一些文件夹和文件的图片素材。因此nodejs做的工作就是生成出树形菜单所需要的json数据。

接下去就可以把这个菜单导航放置在wingIDE开发当中。

Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue