改進Vue.js的treeview
前言
最近要為遊戲引擎製作物件的treeview，就想到之前的使用vue.js建構treeview，但沒想到實際使用後發現不太符合需求，之前的範例是把某個Node作root後將其繪製，但實際的需求是root的Node不只一個，所以要做一個改進，在此做個紀錄。內容
先來看改進後的html部分<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> <div id='app'> <root_treenodeview :rootnode_list='nodelist'></root_treenodeview> </div> </body> </html>
再來是javascript的部分
Vue.component('treenodeview',{
props : ['node'],
template : [
'<ul>\n',
' <li>\n',
' <div @click="onClick">\n',
' {{node.name}}\n',
' <span v-show="isFolder">[{{isExpand?"-":"+"}}]</span>\n',
' </div>\n',
' </li>\n',
' <treenodeview v-show="isExpand" v-for="childNode in node.child" :node="childNode"></treenodeview>\n',
'</ul>\n'
].join(''),
data : function(){
return {
isExpand : false
};
},
computed:{
isFolder:function(){
return this.node.child &&
this.node.child.length;
}
},
methods:{
onClick:function(){
if(this.isFolder){
this.isExpand=!this.isExpand;
}
}
}
});
Vue.component('root_treenodeview',{
props : ['rootnode_list'],
template:[
'<div>\n',
' <treenodeview v-for="rootNode in rootnode_list" :node="rootNode"></treenodeview>\n',
'</div>\n',
].join(''),
});
//
let node1={
name:'node1',
child:[
{
name : 'subNode1',
child : []
},
{
name : 'subNode1',
child : []
}
]
}
let node2={
name:'node2',
child:[
{
name : 'subNode1',
child : []
}
]
}
let app = new Vue({
el : '#app',
data:function(){
return {
nodelist:[node1,node2],
}
}
});
這次的程式碼風格跟上次有些不一樣，像之前的template是用html的方式來取值，這次是直接用字串陣列來輸入， 兩者的效果是一樣的，請根據喜好使用。在"treenodeview"的部分跟上次是一樣的，這次多了個"root_treenodeview"，作用是將多個root顯示來符合本次的需求，程式碼的部分比"treenodeview"簡單許多，就只是依據"rootnode_list"的內容來產生對應的"treenodeview"。
這次製作時卡了一陣子，一方面因為太久沒用Vue.js，所以還複習了一下，還有一個我以前沒發現的問題，那就是Vue.js的變數命名對"大寫"不友善，像是"props"的命名規則可以接受"_"與"-"但不接受大寫，而在Component的命名規則可以接受"_"，但大寫與"-"都不被接受，在"data"的命名規則可以接受"_"與大寫，但不接受"-"。綜合3種狀況來看，"_"在Vue.js的接受度是最高的，3種狀況都能用，在Vue.js總是使用"_"來隔開字詞，這樣就可以不用管會不會違反命名規則了。
沒有留言:
張貼留言