75 lines
2.9 KiB
JavaScript
75 lines
2.9 KiB
JavaScript
const CiyTreemenu = {
|
||
name: 'ciy-treemenu',
|
||
template: `
|
||
<div class="treemenu">
|
||
<ul>
|
||
<li v-for="item in treeData" :key="item.id">
|
||
<span v-if="item.children" @click="item.expanded = !item.expanded" style="font-weight:bold;">{{ item.name }}</span>
|
||
<span v-else @click="selectNode(item)" :style="{color:item.select?'#0068ac':''}">{{ item.name }}</span>
|
||
<div v-if="item.children && item.expanded" class="tree-children">
|
||
<ciy-treemenu :tree-data="item.children" @node-selected="selectNode"></ciy-treemenu>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
`,
|
||
|
||
props: {
|
||
treeData: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => []
|
||
}
|
||
},
|
||
beforeCreate() {
|
||
console.log('beforeCreate: 实例初始化之后，数据观测和事件配置之前被调用');
|
||
},
|
||
created() {
|
||
console.log('created: 实例创建完成后被调用，已完成数据观测、属性和方法的运算',this.treeData);
|
||
},
|
||
beforeMount() {
|
||
console.log('beforeMount: 挂载开始之前被调用，相关的render函数首次被调用');
|
||
},
|
||
mounted() {
|
||
console.log('mounted: 实例挂载完成后调用，此时DOM已经渲染', this.$el);
|
||
},
|
||
beforeUpdate() {
|
||
console.log('beforeUpdate: 数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前');
|
||
},
|
||
updated() {
|
||
console.log('updated: 数据更改导致的虚拟DOM重新渲染和打补丁后调用');
|
||
},
|
||
beforeUnmount() {
|
||
console.log('beforeUnmount: 实例销毁之前调用，此时实例仍然完全可用');
|
||
},
|
||
unmounted() {
|
||
console.log('unmounted: 实例销毁后调用，所有指令都已解绑，所有事件监听器都已移除');
|
||
},
|
||
activated() {
|
||
console.log('activated: 被keep-alive缓存的组件激活时调用');
|
||
},
|
||
deactivated() {
|
||
console.log('deactivated: 被keep-alive缓存的组件停用时调用');
|
||
},
|
||
errorCaptured(err, instance, info) {
|
||
console.log('errorCaptured: 捕获一个来自后代组件的错误时被调用');
|
||
console.error('Error:', err);
|
||
console.log('Vue instance:', instance);
|
||
console.log('Error info:', info);
|
||
// 可以阻止错误继续向上传播
|
||
return false;
|
||
},
|
||
renderTracked({ key, target, type }) {
|
||
// console.log('renderTracked: 跟踪虚拟DOM重新渲染时调用');
|
||
// console.log(`操作类型: ${type}, 目标: ${target}, 键: ${key}`);
|
||
},
|
||
renderTriggered({ key, target, type }) {
|
||
// console.log('renderTriggered: 虚拟DOM重新渲染被触发时调用');
|
||
// console.log(`操作类型: ${type}, 目标: ${target}, 键: ${key}`);
|
||
},
|
||
methods: {
|
||
selectNode(node) {
|
||
this.$emit('node-selected', node);
|
||
}
|
||
}
|
||
}; |