HM21St_Page_User/src/views/bookShelf/components/MenuRight.vue

<template>
  <div class="menu-box">
    <template v-for="(item, index) in list">
      <template v-if="!(item.type === 'list' && !$route.query.iss_id)">
        <div
          class="menu-item"
          :key="index"
          @click="handleChange($event, index, item)"
          :style="{
            background: activeIndex === index ? colorObj.menuBg : '',
            color:
              activeIndex === index
                ? colorObj.statisticValue
                : colorObj.glossaryTitle,
          }"
          v-if="index < 6 || foldFlag"
        >
          <svg-icon :icon-class="item.icon" v-if="item.icon"></svg-icon>
          <el-switch
            v-else
            v-model="item.flag"
            active-color="#175DFF"
            inactive-color="#D0D3D9"
          >
          </el-switch>
          <span>{{ item.name }}</span>
        </div>
      </template>
      <el-divider
        :key="index"
        v-if="index === 4 || index === 6 || index === 0"
        :style="{ backgroundColor: colorObj.glossaryBg }"
      ></el-divider>
    </template>
    <!-- <a class="flod-btn" @click="foldFlag=!foldFlag">{{foldFlag?'收起':'展开'}}<svg-icon :icon-class="foldFlag?'Up-line':'Down-line'"></svg-icon></a> -->
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: ["colorObj"],
  data() {
    //这里存放数据
    return {
      list: [
        {
          icon: "list",
          name: "目录",
          type: "list",
        },
        {
          icon: "Book-open",
          name: "原文",
          type: "original",
        },
        {
          icon: "Doc-add",
          name: "生词及短语",
          type: "newWord",
        },
        {
          icon: "record",
          name: "朗读练习",
          type: "practice",
        },
        {
          icon: "search-text",
          name: "文内检索",
          type: "search",
        },
        {
          icon: "print",
          name: "打印/下载",
          type: "print",
        },
        {
          icon: "share",
          name: "分享",
          type: "share",
        },
        {
          icon: "cloud",
          name: "词云",
          type: "cloud",
        },
        {
          icon: "filtrate",
          name: "词汇类型",
          type: "filtrate",
        },
        {
          icon: "chart",
          name: "文章信息",
          type: "chart",
        },
        {
          icon: "Notebook-and-pen",
          name: "显示笔记",
          type: "notebook",
        },
      ],
      activeIndex: 1,
      foldFlag: true,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange(e, index, item) {
      this.activeIndex = index;
      this.$emit("changeArticleType", item.type, e);
    },
    handleChangeSwitch(value) {
      this.switchFlag = value;
      if (!this.switchFlag) this.activeIndex = null;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.menu-box {
  .menu-item {
    margin: 1px 0;
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #2f3742;
    padding: 0 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    height: 32px;
    .svg-icon {
      width: 32px;
      height: 32px;
      padding: 8px;
    }
    .el-switch {
      width: 28px;
      height: 16px;
      line-height: 16px;
      margin: 0 6px;
    }
    span {
      margin-left: 8px;
    }
  }
  .flod-btn {
    display: block;
    width: 168px;
    height: 28px;
    text-align: center;
    font-size: 12px;
    line-height: 28px;
    color: #99a29e;
    .svg-icon {
      margin-left: 4px;
    }
  }
}
</style>
<style lang="scss">
.menu-box {
  .el-switch__core {
    height: 16px;
  }
  .el-switch__core:after {
    width: 12px;
    height: 12px;
  }
  .el-switch.is-checked .el-switch__core::after {
    margin-left: -14px;
  }
  .el-divider {
    margin: 0 auto;
    width: 128px;
  }
}
</style>