JZTXT

阅读吧

发布时间 2023-06-05 15:57:33作者: GTK

习题链接

阅读吧

任务

修改阅读的主题，根据主题颜色不一样，也要修改字体的颜色
要修改字体大小，并设置字体上下限

分类 ：Vue

关键点

  1. v-指令的使用
    1. @click点击事件，进行切换阅读主题，控制字体的大小
    2. v-bind绑定属性，修改class 用法 => :class="{'iconfont icon-selected': idx == 0 }"
    3. 使用v-if或v-show进行显示隐藏，这两则的区别是v-if渲染或不渲染节点，v-show是控制的display的值进行显示隐藏
  2. 设置ref
    1. 操作dom使用ref即可直接获取
    2. 给span标签设置ref，便于获取到数值大小18
    3. 使用该语句可直接获取到该标签this.$refs.readContent

代码实现 && 完整的代码

  1. data中的数据
    data: {
  bgList: ["#f6edd4", "#ebf4ea", "#e9f2f5", "#F6E8E4", "#000000"], // 阅读主题色列表（与设置主题的圆形色块一一对应）
  isShow:true,
  idx:0
}
  2. 完成主题切换
    1. 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>
    1. js部分
     changeStyle(index){
   this.idx = index; 
   with(this.$refs.readContent.style){
     backgroundColor = this.bgList[index];
     color = index == 4 ?  "#ffffff" : "#333333";
   }  
 }
  3. 完成字体大小变化
    html部分
    <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>
    js部分
    changeStyle(data){ 
    this.isActive = data;
}
  4. 按钮点击显示切换主题的导航栏
    <!-- 设置按钮图标 -->
<a class="iconfont icon-setting" @click="isShow = true"></a>