DevExtreme Vue應(yīng)用程序模板可幫助您創(chuàng)建一個(gè)簡單的 Vue 應(yīng)用程序，該應(yīng)用程序帶有導(dǎo)航菜單和響應(yīng)式布局中的多個(gè)示例視圖。

DevExtreme v21.2最新版下載

配置導(dǎo)航菜單

配置菜單項(xiàng)

編輯 src\app-navigation.js 文件來配置導(dǎo)航菜單項(xiàng)，每個(gè)項(xiàng)目配置可以有以下字段：

• text - 項(xiàng)目的文本
• icon - 項(xiàng)目的圖標(biāo)
• path - 與項(xiàng)目關(guān)聯(lián)的導(dǎo)航路徑
• items - 子項(xiàng)目

注意：菜單項(xiàng)應(yīng)該導(dǎo)航到頁面或包含子項(xiàng)，因此不要為同一菜單項(xiàng)同時(shí)指定路徑和項(xiàng)目。

JavaScript

{
text: 'Category',
icon: 'folder',
items: [{
text: 'About',
path: '/about'
}]
}

在關(guān)閉狀態(tài)下隱藏菜單

在關(guān)閉狀態(tài)下，導(dǎo)航菜單部分可見，因?yàn)樗@示項(xiàng)目圖標(biāo)。 如果項(xiàng)目沒有圖標(biāo)，您可以隱藏菜單。 為此請打開 SideNavOuterToolbar 或 SideNavInnerToolbar 組件（取決于使用的布局）并更改 drawerOptions() 計(jì)算屬性如下：

side-nav-outer-toolbar.vue

// ...
<script>
// ...
export default {
// ...
computed: {
drawerOptions() {
// ...
return {
// ...
minMenuSize: 0
};
},
// ...
},
// ...
};
</script>

添加自定義工具欄項(xiàng)

應(yīng)用程序模板使用 DevExtreme Toolbar 組件，Toolbar 是 HeaderToolbar 組件的一部分，其配置位于 src\components\header-toolbar.vue 文件中。要添加自定義工具欄項(xiàng)，請打開此文件并在 DxToolbar 中添加一個(gè) DxItem 元素。

以下代碼向工具欄添加了一個(gè)搜索按鈕：

header-toolbar.vue

<template>
<header class="header-component">
<DxToolbar class="header-toolbar">
<!-- ... -->
<DxItem
location="after">
<template #default>
<DxButton
icon="search"
@click="searchFunc"
/>
</template>
</DxItem>
<!-- ... --->
</DxToolbar>
</header>
</template>
<script>
// ...
export default {
props: {
// ...
searchFunc: Function
},
// ...
};
</script>

side-nav-outer-toolbar.vue

<template>
<div class="side-nav-outer-toolbar">
<header-toolbar ...
:search-func="search"
/>
<!-- ... -->
</div>
</template>
<script>
// ...
export default {
// ...
methods: {
// ...
search() {
console.log("search");
}
},
// ...
};
</script>

在上面的代碼中，按鈕單擊處理程序在 SideNavOuterToolbar 組件中聲明。 當(dāng)使用外部工具欄布局時(shí)，此組件適用。 如果應(yīng)用程序使用內(nèi)部工具欄布局，請將相同的代碼添加到 SideNavInnerToolbar 組件。

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群5：742234706      歡迎一起進(jìn)群討論