翻譯|使用教程|編輯:龔雪|2022-01-11 09:58:06.810|閱讀 353 次
概述:本文主要介紹如何使用DevExtreme的應(yīng)用程序模板配置導(dǎo)航菜單、自定義工具欄等,歡迎下載最新版體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
DevExtreme Vue應(yīng)用程序模板可幫助您創(chuàng)建一個(gè)簡單的 Vue 應(yīng)用程序,該應(yīng)用程序帶有導(dǎo)航菜單和響應(yīng)式布局中的多個(gè)示例視圖。
配置菜單項(xiàng)
編輯 src\app-navigation.js 文件來配置導(dǎo)航菜單項(xiàng),每個(gè)項(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>
應(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擁有高性能的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)群討論
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)