element-ui的侧边栏的右侧添加一个展开关闭按钮

原创已于 2022-09-01 11:59:46 修改 · 2.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#ui #css #javascript

于 2022-09-01 11:59:25 首次发布

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在官方文档未提供的基础上，创建一个带有折叠功能的侧边栏组件。通过HTML、CSS和JavaScript，实现菜单的展开与关闭，以及控制按钮的样式变化。

在官方文档中没有找到这个按钮，所以自己搞一个

侧边栏组件

效果

在这里插入图片描述

html

<template>
  <div class=" aside">
    <el-menu :default-openeds="['1']"
             class="el-menu-vertical-demo"
             :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-message"></i>
          <span slot="title">导航一</span>
        </template>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </template>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">导航三</span>
        </template>
      </el-submenu>
    </el-menu>
    <div  class="aside-control-button" @click.once="asideControlToClose">
      <i class="el-icon-caret-left" ></i>
    </div>
  </div>
</template>

<script >
import Pubsub from 'pubsub-js'
import $ from 'jquery'
export default {
  name: 'aside',
  data() {
    return {
      isCollapse: false
    };
  },
  methods:{
    getTable(){
      //key - value
      Pubsub.publishSync("mainName",'Table');
    },
    getTestTable(){
      Pubsub.publish("TestTable",'TestTable')
    },
    asideControlToClose(){
        //设置isCollapse
        console.log('close')

        //图标换个方向
      $('.aside-control-button .el-icon-caret-left').
      removeClass('el-icon-caret-left').
      addClass('el-icon-caret-right')
        //清除asideControlToClose换 asideControlToOpen
        $('.aside-control-button').one("click",(this.asideControlToOpen))
      this.isCollapse=true
    },
    asideControlToOpen(){
      //和他兄弟反着来
      this.isCollapse=false

      let temp= $('.aside-control-button .el-icon-caret-right');
      temp.removeClass('el-icon-caret-right')
      temp.addClass('el-icon-caret-left')

      $('.aside-control-button').one("click",(this.asideControlToClose))
    }
  },
  mounted() {

  }

}

</script>

<style scoped>
@import 'publicAside.css';

</style>

css

.aside-control-button{
  position: absolute;
  width: 25px;
  height: 80px;
  background-color: rgba(232, 232, 232, 0.53);
  right: -25px;
  top:45%;
  /*perspective：对元素进行透视操作*/
  /*rotateX：以y轴（横轴）进行旋转（前后仰俯）
  画个梯形出来*/
  transform:perspective(2em) rotateY(20deg);
  text-align: center;
  line-height: 80px;
  color: #909399;
  z-index: 1145;
}
.aside-control-button:hover{
  background-color: #ecf5ff;
}
.aside{
  position: relative;
}8
.el-menu-vertical-demo{
  min-height: calc(88.3vh);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}