vue elementui简易侧拉栏的使用小结

遗忘的世界

如图所示，增加了侧拉栏，目的是可以选择多条数据展示数据

组件： celadon.vue

1. <template>
   
2.   <div class="LayoutMain">
   
3.     <el-aside :width="sidebarIsCollapse ? '180px' : '0px'" class="aside-wrap">
   
4.       <template>
   
5.         <div
   
6.           :class="[
   
7.             'aside-wrap-header',
   
8.             { 'aside-wrap-header--hide': sidebarIsCollapse },
   
9.           ]"
   
10.           @click="toggleCollapse"
    
11.         ></div>
    
12.         <div class="aside-wrap-slot">
    
13.           <slot class="btnSlot" name="asideWrapSlot" />
    
14.         </div>
    
15.       </template>
    
16.     </el-aside>
    
17.     <div
    
18.       class="layout-main-btn"
    
19.       :class="['left', { hide: !sidebarIsCollapse }]"
    
20.       @click="toggleCollapse"
    
21.     >
    
22.       <template v-if="sidebarIsCollapse">
    
23.         <i class="el-icon-arrow-left" />
    
24.       </template>
    
25.       <template v-else>
    
26.         <i class="el-icon-arrow-right" />
    
27.       </template>
    
28.     </div>
    
29.   </div>
    
30. </template>
    
31. <script>
    
32. export default {
    
33.   name: "LayoutMain",
    
34.   components: {},
    
35.   props: {
    
36.     sidebarIsCollapse: {
    
37.       type: Boolean,
    
38.       default: false,
    
39.     },
    
40.     menuName: {
    
41.       type: String,
    
42.       default: "",
    
43.     },
    
44.   },
    
45.   data() {
    
46.     return {};
    
47.   },
    
48.   methods: {
    
49.     toggleCollapse() {
    
50.       this.$emit("toggleCollapse");
    
51.     },
    
52.   },
    
53. };
    
54. </script>
    
55. <style  lang="scss" scoped>
    
56. .LayoutMain {
    
57.   background: transparent;
    
58.   height: 100%;
    
59.   width: 100%;
    
60.   display: flex;
    
61.   ::v-deep .el-main {
    
62.     padding: 16px !important;
    
63.   }
    
64.   .aside-wrap {
    
65.     height: 100%;
    
66.     background: rgba(67, 133, 219, 0.301);
    
67.     transition: width 0.4s;
    
68.     .aside-wrap-header {
    
69.       display: flex;
    
70.     //   height: 48px;
    
71.       align-items: center;
    
72.       padding: 0 16px;
    
73.       font-size: 14px;
    
74.       font-family: PingFangSC-Semibold, PingFang SC;
    
75.       font-weight: 600;
    
76.       color: #333333;
    
77.       cursor: pointer;
    
78.       &::v-deep .el-menu::-webkit-scrollbar {
    
79.         width: 0 !important;
    
80.         -ms-overflow-style: scroll;
    
81.         overflow: scroll;
    
82.       }
    
83.     }
    
84.   }
    
85.   .layout-main-btn {
    
86.     position: absolute;
    
87.     top: 40px;
    
88.     z-index: 999;
    
89.     height: 56px;
    
90.     line-height: 54px;
    
91.     text-align: center;
    
92.     width: 14px;
    
93.     border-radius: 10px;
    
94.     border: 0.5px solid #ccc;
    
95.     background: rgb(27, 118, 238);
    
96.     cursor: pointer;
    
97.     i {
    
98.       color: #e4dada;
    
99.       font-size: 14px;
    
100.     }
     
101.   }
     
102.   .left {
     
103.     left: 180px;
     
104.     transition: left 0.4s;
     
105.   }
     
106.   .hide {
     
107.     left: -5px;
     
108.     transition: left 0.4s;
     
109.   }
     
110. }
     
111. </style>

复制代码

在页面使用

1. <!--数据分析侧拉栏-->
   
2.           <div style="z-index:999; position: absolute;width: 180px;height: 300px;"
   
3.           >
   
4.             <celadon
   
5.               style="
   
6.                 margin-top: 40px;
   
7.                 height: 100%;
   
8.                 width: 100%;
   
9.                 overflow: scroll;
   
10.               "
    
11.               :sidebar-is-collapse="sidebarIsCollapse"
    
12.               @toggleCollapse="toggleCollapse"
    
13.             >
    
14.               <div class="select-items" slot="asideWrapSlot">
    
15.                 <div
    
16.                   class="selset-item"
    
17.                   v-for="(item, index) in items"
    
18.                   :key="index"
    
19.                 >
    
20.                   <input
    
21.                     type="checkbox"
    
22.                     :id="'checkbox-' + index"
    
23.                     v-model="selectedItems"
    
24.                     :value="item"
    
25.                     @click="selectCheckBox"
    
26.                   />
    
27.                   <label :for="'checkbox-' + index">{{ item.name }}</label>
    
28.                 </div>
    
29.                 <el-button style="margin: 20px 30px" size="small" type="primary"
    
30.                   >选择</el-button
    
31.                 >
    
32.               </div>
    
33.             </celadon>
    
34.           </div>
    
35.           <!--data-->
    
36.           items: [
    
37.         { name: "1号设备", value: "12" },
    
38.         { name: "2号设备", value: "13" },
    
39.         { name: "3号设备", value: "4" },
    
40.         { name: "3号设备", value: "2" },
    
41.         { name: "3号设备", value: "3" },
    
42.         { name: "3号设备", value: "1" },
    
43.         { name: "3号设备", value: "11" },
    
44.         { name: "3号设备", value: "14" },
    
45.         { name: "3号设备", value: "15" },
    
46.         { name: "3号设备", value: "16" },
    
47.         { name: "3号设备", value: "17" },
    
48.         { name: "3号设备", value: "33" },
    
49.         { name: "3号设备", value: "22" },
    
50.         { name: "3号设备", value: "55" },
    
51.         { name: "3号设备", value: "66" },
    
52.         { name: "3号设备", value: "31" },
    
53.         { name: "3号设备", value: "56" },
    
54.         { name: "3号设备", value: "45" },
    
55.       ],
    
56.           <!--methods-->
    
57.     selectCheckBox(value){
    
58.       console.log(value)
    
59.     },
    
60.     toggleCollapse() {
    
61.       this.sidebarIsCollapse = !this.sidebarIsCollapse;
    
62.     },

复制代码

到此这篇关于vue elementui简易侧拉栏的使用的文章就介绍到这了,更多相关vue elementui侧拉栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323377b4i.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！