秦建辉 发表于 2024-7-5 22:49:36

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

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


组件: celadon.vue
<template>
<div class="LayoutMain">
    <el-aside :width="sidebarIsCollapse ? '180px' : '0px'" class="aside-wrap">
      <template>
      <div
          :class="[
            'aside-wrap-header',
            { 'aside-wrap-header--hide': sidebarIsCollapse },
          ]"
          @click="toggleCollapse"
      ></div>
      <div class="aside-wrap-slot">
          <slot class="btnSlot" name="asideWrapSlot" />
      </div>
      </template>
    </el-aside>
    <div
      class="layout-main-btn"
      :class="['left', { hide: !sidebarIsCollapse }]"
      @click="toggleCollapse"
    >
      <template v-if="sidebarIsCollapse">
      <i class="el-icon-arrow-left" />
      </template>
      <template v-else>
      <i class="el-icon-arrow-right" />
      </template>
    </div>
</div>
</template>
<script>
export default {
name: "LayoutMain",
components: {},
props: {
    sidebarIsCollapse: {
      type: Boolean,
      default: false,
    },
    menuName: {
      type: String,
      default: "",
    },
},
data() {
    return {};
},
methods: {
    toggleCollapse() {
      this.$emit("toggleCollapse");
    },
},
};
</script>
<stylelang="scss" scoped>
.LayoutMain {
background: transparent;
height: 100%;
width: 100%;
display: flex;
::v-deep .el-main {
    padding: 16px !important;
}
.aside-wrap {
    height: 100%;
    background: rgba(67, 133, 219, 0.301);
    transition: width 0.4s;
    .aside-wrap-header {
      display: flex;
    //   height: 48px;
      align-items: center;
      padding: 0 16px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      cursor: pointer;
      &::v-deep .el-menu::-webkit-scrollbar {
      width: 0 !important;
      -ms-overflow-style: scroll;
      overflow: scroll;
      }
    }
}
.layout-main-btn {
    position: absolute;
    top: 40px;
    z-index: 999;
    height: 56px;
    line-height: 54px;
    text-align: center;
    width: 14px;
    border-radius: 10px;
    border: 0.5px solid #ccc;
    background: rgb(27, 118, 238);
    cursor: pointer;
    i {
      color: #e4dada;
      font-size: 14px;
    }
}
.left {
    left: 180px;
    transition: left 0.4s;
}
.hide {
    left: -5px;
    transition: left 0.4s;
}
}
</style>在页面使用
<!--数据分析侧拉栏-->
          <div style="z-index:999; position: absolute;width: 180px;height: 300px;"
          >
            <celadon
            style="
                margin-top: 40px;
                height: 100%;
                width: 100%;
                overflow: scroll;
            "
            :sidebar-is-collapse="sidebarIsCollapse"
            @toggleCollapse="toggleCollapse"
            >
            <div class="select-items" slot="asideWrapSlot">
                <div
                  class="selset-item"
                  v-for="(item, index) in items"
                  :key="index"
                >
                  <input
                  type="checkbox"
                  :id="'checkbox-' + index"
                  v-model="selectedItems"
                  :value="item"
                  @click="selectCheckBox"
                  />
                  <label :for="'checkbox-' + index">{{ item.name }}</label>
                </div>
                <el-button style="margin: 20px 30px" size="small" type="primary"
                  >选择</el-button
                >
            </div>
            </celadon>
          </div>
          <!--data-->
          items: [
      { name: "1号设备", value: "12" },
      { name: "2号设备", value: "13" },
      { name: "3号设备", value: "4" },
      { name: "3号设备", value: "2" },
      { name: "3号设备", value: "3" },
      { name: "3号设备", value: "1" },
      { name: "3号设备", value: "11" },
      { name: "3号设备", value: "14" },
      { name: "3号设备", value: "15" },
      { name: "3号设备", value: "16" },
      { name: "3号设备", value: "17" },
      { name: "3号设备", value: "33" },
      { name: "3号设备", value: "22" },
      { name: "3号设备", value: "55" },
      { name: "3号设备", value: "66" },
      { name: "3号设备", value: "31" },
      { name: "3号设备", value: "56" },
      { name: "3号设备", value: "45" },
      ],
          <!--methods-->
    selectCheckBox(value){
      console.log(value)
    },
    toggleCollapse() {
      this.sidebarIsCollapse = !this.sidebarIsCollapse;
    },到此这篇关于vue elementui简易侧拉栏的使用的文章就介绍到这了,更多相关vue elementui侧拉栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:https://www.jb51.net/javascript/323377b4i.htm
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: vue elementui简易侧拉栏的使用小结