阅读吧

合集 - 蓝桥杯(21)

1.逃离二向箔2023-06-022.偷梁换柱2023-06-023.课程列表2023-06-024.粒粒皆辛苦2023-06-025.成语学习2023-06-026.消失的 Token2023-06-027.芝麻开门2023-06-028.资讯接口2023-06-029.防抖函数2023-06-0310.element-ui 组件二次封装2023-06-0411.心愿便利贴2023-06-0412.购物车2023-06-0413.绝美宋词2023-06-0414.布局切换2023-06-0515.和手机相处的时光2023-06-0516.天气趋势2023-06-05

17.阅读吧2023-06-05

18.宝贵的一票2023-06-0819.大电影2023-06-0820.封装 Promisefy 函数2023-06-0821.权限管理2023-06-08

收起

习题链接

阅读吧

任务

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

分类 ：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> 
   

   2. 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>
   

__EOF__

本文作者：GTK
本文链接：https://www.cnblogs.com/DnmyCourage/p/17457974.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！