123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- <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>
|