Merhabalar bugün sizlere Laravel 6.x versiyonunda kullandığım vuejs tree menü kullanımını aktarmaya çalışacağım. Laravel Vuejs Tree nedir, nasıl kullanılır anlatmaya çalışacağım.
Vuejs LiquorTree Kullanmak
Vuejs projelerinizde recursive kullanmak elbette güzeldir lakin tree menü yapılarında kullanabileceğiniz component tavsiyem benim LiquorTree. Hem kullanımı açısından, hemde geliştirmesi ve dökümanı olan bir component.
Basit bir örnek olarak yukarıdaki gibi bir çıktı alabiliyorsunuz, örnek bir kod bloğunuda aşağıda sizinle paylaşacağım.
<!DOCTYPE html>
<html>
<head>
<title>Checkboxes</title>
<meta charset="UTF-8">
<!-- first import Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>
</head>
<body>
<div id="app">
<tree
:data="treeData"
:options="treeOptions"
/>
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
treeData: getTreeData(),
treeOptions: {
checkbox: true,
deletion(node) {
return node.checked()
}
}
}
}
})
function getTreeData() {
return [
{
text: 'JS: The Right Way',
// it makes node expanded
state: { expanded: true },
children: [
{ text: 'Getting Started', state: { checked: true } },
{ text: 'JavaScript Code Style', state: { selected: true } },
{ text: 'The Good Parts', children: [
{ text: 'OBJECT ORIENTED', state: { checked: true } },
{ text: 'ANONYMOUS FUNCTIONS', state: { checked: true } },
{ text: 'FUNCTIONS AS FIRST-CLASS OBJECTS', state: { checked: true } },
{ text: 'LOOSE TYPING', state: { checked: true } }
]},
{ text: 'Patterns', children: [
{ text: 'DESIGN PATTERNS', state: { expanded: true }, children: [
{ text: 'Creational Design Patterns', children: [
{ text: 'Factory' },
{ text: 'Prototype' },
{ text: 'Mixin' },
{ text: 'Singleton' }
]},
{ text: 'Structural Design Patterns'}
]},
{ text: 'MV* PATTERNS', cildren: [
{ text: 'MVC Pattern' },
{ text: 'MVP Pattern' },
{ text: 'MVVM Pattern' }
]}
]}
]
}
]
}
</script>
</body>
</html>Bunun yanında size ufak bir öneride bulunabilirim, select ile tree kullanmak isterseniz, Treeselect kullanabilirsiniz.
Nerelerde Kullanabiliriz?
Vuejs LiquorTree yapısını menülerinizde, kategori yapınızda kullanabilirsiniz. Dosya ve dizin görüntülemede kullanabilir, ekleme, silme ve düzenleme işlemleride yapabilirsiniz.
Vuejs Tree Neden
Yukarıda bahsettiğim üzeri projelerinizde sorunsuz bir şekilde kullanabileceğiniz plugin LiquorTree kütüphanesini inceleyebilirsiniz.
Nasıl Yüklenir ?
NPM $ npm install liquor-tree YARN $ yarn add liquor-tree
<!-- Vue Component -->
<template>
<tree
:data="items"
:options="options"
ref="tree"
/>
</template>
<script>
import Vue from 'Vue'
import LiquorTree from 'liquor-tree'
Vue.use(LiquorTree)
export default {
...
data() {
return {
items: [
{text: 'Item 1'},
{text: 'Item 2'},
{text: 'Item 3', children: [
{text: 'Item 3.1'},
{text: 'Item 3.2'}
]}
],
options: {
checkbox: true
}
}
}
...
}
</script>