vue使用element元件實現選單的摺疊與展開
1.實現效果
1.未摺疊時
2.摺疊後
2. 程式碼
- template
<el-container>
<!--側邊欄-->
<!--側邊欄選單區-->
<el-aside :width="isCollapse ? '64px' : '200px' ">
<el-menu
background-color="#333744"
text-color="#fff"
active-text-color="#409Eff"
:collapse="isCollapse" //給Collapse動態賦值
:collapse-transition="false"
>
</el-menu>
</el-aside>
</el-container>
- script
data(){
return{
isCollapse:false,
}
}
methods:{
//點選按鈕摺疊選單
toggleCollapse(){
this.isCollapse = !this.isCollapse; //點選摺疊按鈕後,對isCollapse進行取反
}
},
說明
-
collapse
:elementNavMenu 導航選單
元件的一個能讓選單摺疊或收起的屬性- 預設為
false
,為true
時可摺疊
- 預設為
-
:width="isCollapse ? '64px' : '200px' "
表示:如果isCollapse
值為false
,寬度為200px;若isCollapse
值為true
,寬度為64px
相關文章
- jquery 實現的摺疊展開的選單jQuery
- 微信小程式實現多摺疊展開酷炫選單微信小程式
- jQuery實現的點選展開其他專案摺疊導航選單jQuery
- 用Javascript實現選單摺疊效果JavaScript
- 摺疊皮膚元件的設計與實現元件
- 垂直摺疊導航選單實現詳解
- 點選平滑下拉展開摺疊樹形導航選單
- HTML6實現摺疊選單與手風琴選單的例項程式碼HTML
- 手風琴方式展開和摺疊導航選單效果
- jQuery點選展開摺疊手風琴導航選單詳解jQuery
- web 端展現報表資料時如何實現摺疊展開效果?Web
- Axure 教程:製作摺疊選單
- jQuery垂直可摺疊展開導航選單程式碼例項詳解jQuery
- CSS 實現超過固定高度後出現展開摺疊按鈕CSS
- vue實現 可展開 且 可多選table 元件封裝Vue元件封裝
- js和css3實現能夠展開和摺疊的摺扇效果JSCSSS3
- js和css實現的扇子展開和摺疊效果程式碼例項JSCSS
- VUE 實現 Studio 管理後臺(五):手風琴式摺疊元件(Accordion)Vue元件
- vscode摺疊展開程式碼VSCode
- CSS3垂直摺疊導航選單CSSS3
- JavaScript下拉摺疊導航選單講解JavaScript
- JavaScript可摺疊屬性導航選單JavaScript
- JSON無限摺疊選單編寫JSON
- 封裝Vue Element的form表單元件封裝VueORM元件
- Vue +Element Ui 使用Upload元件實現多圖片上傳VueUI元件
- js輕鬆實現摺疊皮膚JS
- CoordinatorLayout實現酷炫摺疊效果
- 直播平臺原始碼,可摺疊式選單欄原始碼
- 實現一個可無限摺疊的table
- Vue遞迴元件實現樹形結構選單Vue遞迴元件
- vue+element-ui實現動態的許可權管理和選單渲染VueUI
- 使用Vue實現下拉選單框批量新增選項Vue
- vue使用iview實現單選,禁選,下拉框的效果VueView
- C++ Qt開發:Tab與Tree元件實現分頁選單C++QT元件
- 一個RecyclerView實現多級摺疊列表(二)View
- 一個RecyclerView實現多級摺疊列表(TreeRecyclerView)View
- el-menu使用遞迴元件實現多級選單元件遞迴元件
- 使用Jquery和CSS摺疊影象jQueryCSS