DevExtreme Vue應用程序模板可幫助您創建一個簡單的 Vue 應用程序，該應用程序帶有導航菜單和響應式布局中的多個示例視圖。

DevExtreme v21.2最新版下載

配置導航菜單

配置菜單項

編輯 src\app-navigation.js 文件來配置導航菜單項，每個項目配置可以有以下字段：

• text - 項目的文本
• icon - 項目的圖標
• path - 與項目關聯的導航路徑
• items - 子項目

注意：菜單項應該導航到頁面或包含子項，因此不要為同一菜單項同時指定路徑和項目。

JavaScript

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

在關閉狀態下隱藏菜單

在關閉狀態下，導航菜單部分可見，因為它顯示項目圖標。 如果項目沒有圖標，您可以隱藏菜單。 為此請打開 SideNavOuterToolbar 或 SideNavInnerToolbar 組件（取決于使用的布局）并更改 drawerOptions() 計算屬性如下：

side-nav-outer-toolbar.vue

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

添加自定義工具欄項

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

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

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 組件中聲明。 當使用外部工具欄布局時，此組件適用。 如果應用程序使用內部工具欄布局，請將相同的代碼添加到 SideNavInnerToolbar 組件。

DevExtreme | 下載試用

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

DevExpress技術交流群5：742234706      歡迎一起進群討論