工具栏 小组件

115 阅读1分钟
  1. 选中后的阴影待调整
  2. 字体待调整

image.png

<template>
  <div class="card" :style=" show ? 'width:240px' : ' width:140px'">
    <div class="toolbar" @click="showToolBar">
      <div :class="['icon', show ?  ' el-icon-d-arrow-right' :'el-icon-d-arrow-left']"></div>
      <div class="toolbar-name">调查分析工具栏</div>
    </div>
    <div class="toolbar-items" v-show="show">
      <el-scrollbar>
        <el-button plain size="mini" v-for="(i,index) in count" :key="index">{{ i.label }}</el-button>
      </el-scrollbar>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      show: false,
      count: [
        { label: "账户统计视图" },
        { label: "zhang" },
        { label: "zhang" },
        { label: "zhang" },
        { label: "zhang" },
        { label: "客户集团账户 / 服务 / 合同信息" },
        { label: "zhang" },
        { label: "zhang" },
        { label: "zhang" },
        { label: "zhang" },
        { label: "zhang" },
        { label: "zhang" },
        { label: "zhang" }
      ]
    };
  },
  methods: {
    showToolBar() {
      this.show = !this.show;
    }
  }
};
</script>


<style lang='less' scoped >
.card {
  box-shadow: 0px 0.1px 3px 0.1px #999;
  width: 140px;
  // transition: width 0.4s;
  border-radius: 4px;
  .toolbar {
    display: flex;
    font-size: 14px;
    line-height: 25px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    .icon {
      color: #fff;
      background-color: rgb(64, 80, 92);
      line-height: 25px;
      border-radius: 4px 0 0 4px;
    }
    .toolbar-name {
      margin-left: 10px;
    }
    :hover {
      cursor: pointer;
    }
  }
  .toolbar-items {
    height: 180px;
    padding: 10px 0 10px 24px;
    font-size: 12px;
    /deep/ .el-scrollbar {
      height: 100%;
      .el-scrollbar__wrap {
        // box-sizing: border-box;
        overflow-x: hidden;
      }

      .el-button {
        font-size: 12px;
        display: flex;
        justify-content: flex-start;
        border-radius: 14px;
        padding: 4px;
        margin: 0;
        margin-bottom: 4px;
      }
      .el-button:hover {
        color: #f16a00;
        border-color: rgba(241, 106, 0, 0.1);
        background-color: rgba(241, 106, 0, 0.1);
      }
      .el-button:focus {
        background: linear-gradient(to right, #ff882b, #f16a00);
        color: #fff;
        font-size: 12px;
        border-color: rgba(241, 106, 0, 0.1);
        box-shadow: 0 2px 4px #f27300;
      }
      .el-scrollbar__thumb {
        background: #888;
      }
      .el-scrollbar__bar.is-vertical {
        width: 3px;
        top: 2px;
      }
    }
  }
}
</style>