vue移動端時彈出側邊抽屜菜單效果
更新時間：2022年06月17日 09:32:27 作者：~疆
這篇文章主要介紹了vue移動端時彈出側邊抽屜菜單,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
效果圖：
aside.vue:
<template>
<div class="aside">
<div
style="
height: 60px;
background-color: #2e6baa;
line-height: 60px;
display: flex;
align-items: center;
justify-content: center;
"
>
<img
src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
style="width: 30px; height: 30px"
/>
<span
style="
font-size: 20px;
font-weight: 600;
color: white;
margin-left: 10px;
"
>xxx平臺</span
>
</div>
<perfect-scrollbar>
<el-menu
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#017BC4"
text-color="white"
active-text-color="white"
>
<el-menu-item index="/page1" @click="$router.push({ path: '/page1' })">
<el-image
src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
style="width: 30px; height: 30px; margin-right: 5px"
></el-image>
<span slot="title">page1</span> </el-menu-item
><el-menu-item index="/page2" @click="$router.push({ path: '/page2' })">
<el-image
src="https://lj-common.oss-cn-chengdu.aliyuncs.com/vue.png"
style="width: 30px; height: 30px; margin-right: 5px"
></el-image>
<span slot="title">page2</span>
</el-menu-item>
</el-menu>
</perfect-scrollbar>
</div>
</template>
<script>
export default {
data() {
return {};
},
created() {},
computed: {},
methods: {},
};
</script>
<style lang='scss' scoped>
.aside {
height: 100vh;
.ps {
height: calc(100vh - 60px);
//展開時寬度
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 256px;
}
.el-menu {
height: 100%;
border: 0 !important; //垂直時，去除右側白邊
}
//item激活時的樣式
.el-menu-item.is-active {
background-color: #1890ff !important;
border-bottom: 0 !important;
}
}
}
</style>控制抽屜顯隱：
<el-drawer
:visible.sync="drawer"
direction="ltr"
:with-header="false"
:size="256"
>
<vAside></vAside>
</el-drawer><i class="el-icon-s-unfold hidden-sm-and-up" @click="collapseChange"></i>
<script>
import vAside from "./aside.vue";
export default {
name: "home",
components: { vAside },
props: {},
data() {
return {
drawer: false,
};
},
methods: {
// 切換折疊狀態(tài)
collapseChange() {
this.drawer = !this.drawer;
},
},
};
</script>由于上面使用了hidden-sm-and-up樣式，該樣式需要在main.js中引入display.css，如下：
import 'element-ui/lib/theme-chalk/display.css';
更多樣式參考：
Vue中使用vue2-perfect-scrollbar制作滾動條
element-ui 實現(xiàn)響應式導航欄的示例代碼
到此這篇關于vue移動端時彈出側邊抽屜菜單的文章就介紹到這了,更多相關vue彈出側邊抽屜菜單內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Nuxt3?使用?Vue.js?作為視圖引擎，Nuxt3?中提供了所有?Vue?3?功能，所以我們創(chuàng)建的Nuxt項目其實也是vue3項目，這篇文章主要介紹了Nuxt3重點特性使用舉例記錄,需要的朋友可以參考下2022-12-12
本篇文章主要介紹了使用vue-cli編寫vue插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue實現(xiàn)Excel文件的上傳與下載功能的兩種方式
這篇文章主要介紹了vue實現(xiàn)Excel文件的上傳與下載功能，本文通過兩種方式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章介紹了vue項目環(huán)境搭建的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
Vue $mount實戰(zhàn)之實現(xiàn)消息彈窗組件
這篇文章主要介紹了Vue $mount實現(xiàn)消息彈窗組件的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
平時我們能在網(wǎng)頁上看到很多動畫效果,這些效果看起來就很引人注目,我們是不是也可以在自己的項目中添加一些動畫效果,讓我們的頁面看起來更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實現(xiàn)動畫效果的多種方法,需要的朋友可以參考下2024-07-07
Vue2學習筆記之請求數(shù)據(jù)交互vue-resource
本篇文章主要介紹了Vue2學習筆記之數(shù)據(jù)交互vue-resource ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法
這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問題解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue3中的伸縮菜單組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解element-ui表格的合并行和列(非常細節(jié))
最近在需求中遇到了elementUI合并行,索性給大家整理下,這篇文章主要給大家介紹了關于element-ui表格的合并行和列的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06