1、Tab组件

功能

  • 支持默认选中tab
  • 子元素可以是文本或者图片
  • 自定义tab的数量，并自适应展示

实现方式

  1. 用ul > li标签遍历传入的tabs数组参数渲染

  2. 判断是否传入背景，未传则显示文字

  3. 绑定点击事件

特点

  • 简单易用
  • 可适配性

2、倒计时组件

功能

  • 常用于榜单或者活动结束倒计时、或者开始倒计时、从而提高用户的参与度与期待感
  • 距离倒计时预设时间可触发事件

实现方式

  1. 通过传入倒计时通过定时器每隔1秒计算剩余的时间，以数组形式返回

  2. 将计算出来的时间数组countdown 通过times属性传递给子组件插槽内容



  3. 注意：倒计时结束或者页面卸载时，清除定时器

特点

  • 只需要传递时间间隔，与业务组件解耦
  • 返回一个 [天，时，分，秒] 数组，灵活性高

Tab切换以及倒计时组件封装的更多相关文章

  1. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  2. Vue 倒计时组件封装

    项目中需要用到倒计时的功能,封装了一个组件. 代码解读: 1:created周期中获取传入参数时间的剩余秒数: this.initSecondsLeft() 并绑定间隔事件 intervalEvent ...

  3. vue + element-ui 制作tab切换（切换vue组件，踩坑总结）

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  4. vue封装tab切换

    vue封装tab切换 预览: 第一种 通过父传子标题,子传父事件 子组件 <template> <div class='app'> <div class="ta ...

  5. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

  6. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  7. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  8. vue2.0使用动态组件实现tab切换效果（vue-cli）

    <template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> &l ...

  9. Flutter——TabBar组件（顶部Tab切换组件）

    TabBar组件的常用属性: 属性 描述 tabs 显示的标签内容,一般使用 Tab 对象,也可以是其他的Widget  controller TabController 对象 isScrollabl ...

  10. 封装tab切换事件

    HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. scp上传文件No such file or directory 问题

        问题描述 window使用scp复制文件到linux时报 No such file or directory 错误 解决办法 本地复制到Linux,win环境必须用绝对路径 上传成功

  2. THM-被动侦察和主动侦查

    被动与主动侦察 在计算机系统和网络出现之前,孙子兵法在孙子兵法中教导说:"知己知彼,必胜不疑." 如果您扮演攻击者的角色,则需要收集有关目标系统的信息.如果你扮演防御者的角色,你需 ...

  3. 垃圾回收之G1收集过程

    G1 中提供了 Young GC.Mixed GC 两种垃圾回收模式,这两种垃圾回收模式,都是 Stop The World(STW) 的. G1 没有 fullGC 概念,需要 fullGC 时,调 ...

  4. 一文彻底搞懂Raft算法，看这篇就够了！！！

    最近需要设计一个分布式系统,需要一个中间件来存储共享的信息,来保证多个系统之间的数据一致性,调研了两个主流框架Zookeeper和ETCD,发现都能满足我们的系统需求.其中ETCD是K8s中采用的分布 ...

  5. dfs实现

    1.思路:从图中的未访问的一个顶点开始,沿着一条路一直走到底,然后这条路尽头的节点,在从另外一条路走到底,不断递归此过程,直到所有遍历完成特点:不撞南墙不回头2.具体实现:当从一个未知的顶点出发,将这 ...

  6. ES_ChatGPT问答

    Q1:springboot项目,如何使用elasticsearch的api增删改查?查询中有哪些方式,如果模糊查询.排序查询.分页查询?分别阐述下这些查询方式的用法?最后举一个完整的例子 答: 在Sp ...

  7. day47:Bootstrap

    什么是Bootstrap? Bootstrap是一个开源框架,是对html\css\js\jquery等的封装,用法,复制黏贴一把梭. 关于Bootstrap的一些常用网址 网址: https://w ...

  8. .NET无侵入自动化探针原理和主流实现

    前言 最近,我在微信公众号和博客园分享了一篇关于.NET微服务系统迁移至.NET 6.0的故事的文章,引起了许多读者的关注.其中,许多人对基于 OpenTelemetry .NET 的观测指标和无侵入 ...

  9. C51笔记-郭天祥-第二章 从点灯大师开始

    第2章  Keil软件的使用及流水灯设计 Keil的用法:用Keil建立工程: 工程配置: C51单片机程序软件仿真.单步.全速.断点设置和变量查看等: 用一个完整的C51程序操控LED亮灭: 调用库 ...

  10. STL大全

    排序最速传说--sort 我们都学过一些排序的写法,比如冒泡排序,快速排序之类的东西,举个例子来说吧,这是快速排序的代码: #include<iostream> using namespa ...