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>