MenuRight.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <template>
  2. <div class="menu-box">
  3. <template v-for="(item, index) in list">
  4. <template v-if="!(item.type === 'list' && !$route.query.iss_id)">
  5. <div
  6. class="menu-item"
  7. :key="index"
  8. @click="handleChange($event, index, item)"
  9. :style="{
  10. background: activeIndex === index ? colorObj.menuBg : '',
  11. color:
  12. activeIndex === index
  13. ? colorObj.statisticValue
  14. : colorObj.glossaryTitle,
  15. }"
  16. v-if="index < 6 || foldFlag"
  17. >
  18. <svg-icon :icon-class="item.icon" v-if="item.icon"></svg-icon>
  19. <el-switch
  20. v-else
  21. v-model="item.flag"
  22. active-color="#175DFF"
  23. inactive-color="#D0D3D9"
  24. >
  25. </el-switch>
  26. <span>{{ item.name }}</span>
  27. </div>
  28. </template>
  29. <el-divider
  30. :key="index"
  31. v-if="index === 4 || index === 6 || index === 0"
  32. :style="{ backgroundColor: colorObj.glossaryBg }"
  33. ></el-divider>
  34. </template>
  35. <!-- <a class="flod-btn" @click="foldFlag=!foldFlag">{{foldFlag?'收起':'展开'}}<svg-icon :icon-class="foldFlag?'Up-line':'Down-line'"></svg-icon></a> -->
  36. </div>
  37. </template>
  38. <script>
  39. //这里可以导入其它文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  40. //例如:import 《组件名称》from ‘《组件路径》';
  41. export default {
  42. //import引入的组件需要注入到对象中才能使用
  43. components: {},
  44. props: ["colorObj"],
  45. data() {
  46. //这里存放数据
  47. return {
  48. list: [
  49. {
  50. icon: "list",
  51. name: "目录",
  52. type: "list",
  53. },
  54. {
  55. icon: "Book-open",
  56. name: "原文",
  57. type: "original",
  58. },
  59. {
  60. icon: "Doc-add",
  61. name: "生词及短语",
  62. type: "newWord",
  63. },
  64. {
  65. icon: "record",
  66. name: "朗读练习",
  67. type: "practice",
  68. },
  69. {
  70. icon: "search-text",
  71. name: "文内检索",
  72. type: "search",
  73. },
  74. {
  75. icon: "print",
  76. name: "打印/下载",
  77. type: "print",
  78. },
  79. {
  80. icon: "share",
  81. name: "分享",
  82. type: "share",
  83. },
  84. {
  85. icon: "cloud",
  86. name: "词云",
  87. type: "cloud",
  88. },
  89. {
  90. icon: "filtrate",
  91. name: "词汇类型",
  92. type: "filtrate",
  93. },
  94. {
  95. icon: "chart",
  96. name: "文章信息",
  97. type: "chart",
  98. },
  99. {
  100. icon: "Notebook-and-pen",
  101. name: "显示笔记",
  102. type: "notebook",
  103. },
  104. ],
  105. activeIndex: 1,
  106. foldFlag: true,
  107. };
  108. },
  109. //计算属性 类似于data概念
  110. computed: {},
  111. //监控data中数据变化
  112. watch: {},
  113. //方法集合
  114. methods: {
  115. handleChange(e, index, item) {
  116. this.activeIndex = index;
  117. this.$emit("changeArticleType", item.type, e);
  118. },
  119. handleChangeSwitch(value) {
  120. this.switchFlag = value;
  121. if (!this.switchFlag) this.activeIndex = null;
  122. },
  123. },
  124. //生命周期 - 创建完成(可以访问当前this实例)
  125. created() {},
  126. //生命周期 - 挂载完成(可以访问DOM元素)
  127. mounted() {},
  128. //生命周期-创建之前
  129. beforeCreated() {},
  130. //生命周期-挂载之前
  131. beforeMount() {},
  132. //生命周期-更新之前
  133. beforUpdate() {},
  134. //生命周期-更新之后
  135. updated() {},
  136. //生命周期-销毁之前
  137. beforeDestory() {},
  138. //生命周期-销毁完成
  139. destoryed() {},
  140. //如果页面有keep-alive缓存功能,这个函数会触发
  141. activated() {},
  142. };
  143. </script>
  144. <style lang="scss" scoped>
  145. /* @import url(); 引入css类 */
  146. .menu-box {
  147. .menu-item {
  148. margin: 1px 0;
  149. cursor: pointer;
  150. font-weight: 400;
  151. font-size: 14px;
  152. line-height: 22px;
  153. color: #2f3742;
  154. padding: 0 8px;
  155. border-radius: 6px;
  156. display: flex;
  157. align-items: center;
  158. height: 32px;
  159. .svg-icon {
  160. width: 32px;
  161. height: 32px;
  162. padding: 8px;
  163. }
  164. .el-switch {
  165. width: 28px;
  166. height: 16px;
  167. line-height: 16px;
  168. margin: 0 6px;
  169. }
  170. span {
  171. margin-left: 8px;
  172. }
  173. }
  174. .flod-btn {
  175. display: block;
  176. width: 168px;
  177. height: 28px;
  178. text-align: center;
  179. font-size: 12px;
  180. line-height: 28px;
  181. color: #99a29e;
  182. .svg-icon {
  183. margin-left: 4px;
  184. }
  185. }
  186. }
  187. </style>
  188. <style lang="scss">
  189. .menu-box {
  190. .el-switch__core {
  191. height: 16px;
  192. }
  193. .el-switch__core:after {
  194. width: 12px;
  195. height: 12px;
  196. }
  197. .el-switch.is-checked .el-switch__core::after {
  198. margin-left: -14px;
  199. }
  200. .el-divider {
  201. margin: 0 auto;
  202. width: 128px;
  203. }
  204. }
  205. </style>