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

我写了一堆垃圾

已于 2022-09-01 11:59:46 修改

阅读量1.1k

点赞数 2

分类专栏： vue 文章标签： ui css javascript

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

本文链接：https://blog.csdn.net/m0_52325708/article/details/126640317

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

侧边栏组件

效果

在这里插入图片描述

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;
}