阅读吧
习题链接
阅读吧
任务
修改阅读的主题，根据主题颜色不一样，也要修改字体的颜色
要修改字体大小，并设置字体上下限
分类 ：Vue
关键点
- v-指令的使用
- @click点击事件，进行切换阅读主题，控制字体的大小
- v-bind绑定属性，修改class 用法 => :class="{'iconfont icon-selected': idx == 0 }"
- 使用v-if或v-show进行显示隐藏，这两则的区别是v-if渲染或不渲染节点，v-show是控制的display的值进行显示隐藏
- 设置ref
- 操作dom使用ref即可直接获取
- 给span标签设置ref，便于获取到数值大小18
- 使用该语句可直接获取到该标签this.$refs.readContent
代码实现 && 完整的代码
- data中的数据
data: { bgList: ["#f6edd4", "#ebf4ea", "#e9f2f5", "#F6E8E4", "#000000"], // 阅读主题色列表（与设置主题的圆形色块一一对应） isShow:true, idx:0 } - 完成主题切换
- html部分
<a @click="changeStyle(0)" :class="{'iconfont icon-selected': idx == 0 }" style="background-color: #f6edd4"></a> <a @click="changeStyle(1)" :class="{'iconfont icon-selected': idx == 1 }" style="background-color: #ebf4ea"></a> <a @click="changeStyle(2)" :class="{'iconfont icon-selected': idx == 2 }" style="background-color: #e9f2f5"></a> <a @click="changeStyle(3)" :class="{'iconfont icon-selected': idx == 3 }" style="background-color: #f6e8e4"></a> <a @click="changeStyle(4)" :class="{'iconfont icon-selected': idx == 4 }" style="background-color: #000000"></a>- js部分
changeStyle(index){ this.idx = index; with(this.$refs.readContent.style){ backgroundColor = this.bgList[index]; color = index == 4 ? "#ffffff" : "#333333"; } } - 完成字体大小变化
html部分
js部分<div class="bar"> <a @click="changeStyle(true)" :class="{'grid-icon':true, active:isActive}"></a> <a @click="changeStyle(false)" :class="{'list-icon':true, active:!isActive}"></a> </div>changeStyle(data){ this.isActive = data; } - 按钮点击显示切换主题的导航栏
<!-- 设置按钮图标 --> <a class="iconfont icon-setting" @click="isShow = true"></a>