快捷導(dǎo)航

Vue組件tree實(shí)現(xiàn)樹(shù)形菜單

更新時(shí)間：2017年04月13日 14:05:36 作者：Stephen__

這篇文章主要為大家詳細(xì)介紹了Vue組件tree實(shí)現(xiàn)樹(shù)形菜單，小巧實(shí)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue 編寫的樹(shù)形菜單，小巧實(shí)用，支持vue1.0，vue2.0

v1.0 功能:

1.支持多級(jí)樹(shù)目錄
2.支持高亮點(diǎn)擊的節(jié)點(diǎn)
3.支持展開(kāi)點(diǎn)擊節(jié)點(diǎn)
4.支持點(diǎn)擊收縮節(jié)點(diǎn)時(shí)收縮所有子目錄
5.支持自定義回調(diào)函數(shù)，點(diǎn)擊節(jié)點(diǎn)時(shí)回調(diào)，參數(shù)為節(jié)點(diǎn)信息

用法：<launch-tree :list='list' :options='options'></launch-tree>

list = [
  {
    name: '一級(jí)目錄', // 目錄名字
    isOpen: true, // 是否初始展開(kāi)目錄
    hightLight: true, // 是否初始高亮
    className: undefined, // 添加自定義樣式
    childs: [], // 二級(jí)目錄
    ...{} // 其他用戶額外參數(shù)
  }
]
options = {
  callback: undefined // 自定義點(diǎn)擊事件，callback(node)
}

github地址

圖示：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

多頁(yè)vue應(yīng)用的單頁(yè)面打包方法(內(nèi)含打包模式的應(yīng)用)
這篇文章主要介紹了多頁(yè)vue應(yīng)用的單頁(yè)面打包方法(內(nèi)含打包模式的應(yīng)用)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
Vue.js directive自定義指令詳解
這篇文章主要介紹了Vue.js directive自定義指令詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
vue實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
axios前端訪問(wèn)后端攜帶cookie的代碼實(shí)例
當(dāng)用戶在網(wǎng)站登錄后,服務(wù)器會(huì)在其瀏覽器上設(shè)置一個(gè)包含登錄信息的Cookie,通過(guò)這個(gè)Cookie,服務(wù)器能夠識(shí)別用戶是否已登錄,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
vue data對(duì)象重新賦值無(wú)效(未更改)的解決方式
這篇文章主要介紹了vue data對(duì)象重新賦值無(wú)效(未更改)的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
利用Vue+intro.js實(shí)現(xiàn)頁(yè)面新手引導(dǎo)流程功能
在同學(xué)們使用某些網(wǎng)站的新版本頁(yè)面的時(shí)候,經(jīng)常會(huì)出現(xiàn)一個(gè)類似于新手引導(dǎo)一樣的效果,來(lái)幫助同學(xué)們更好的熟悉新版本頁(yè)面的功能和使用,這篇文章主要給大家介紹了關(guān)于如何利用Vue+intro.js實(shí)現(xiàn)頁(yè)面新手引導(dǎo)流程功能的相關(guān)資料,需要的朋友可以參考下
2023-11-11
elementui之封裝下載模板和導(dǎo)入文件組件方式
這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue3.x中emits的基本用法實(shí)例
emits是Vue3新增的選項(xiàng),emits主要作用在子組件中,用于接收在父組件中綁定的方法,這篇文章主要給大家介紹了關(guān)于vue3.x中emits的基本用法,需要的朋友可以參考下
2022-07-07
vue $attrs和$listeners的使用與區(qū)別
本文主要介紹了vue $attrs和$listeners的使用與區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
vue中將html字符串轉(zhuǎn)換成html后遇到的問(wèn)題小結(jié)
這篇文章主要介紹了vue中將html字符串轉(zhuǎn)換成html后遇到的問(wèn)題小結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-12-12