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. vue中优雅的使用定时器

    1.常见方法.在data中声明一个变量,定时器绑定到变量中,然后在beforeDestory中销毁这个定时器 举个例子 首先我在data函数里面进行定义定时器名称 data() { return { ...

  2. 集合-TreeMap源码分析

    一.简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现.TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey.get ...

  3. Python集合常用操作

    一.集合的介绍   1.定义:集合是无序的,集合中的元素是唯一的,集合一般用于元组或者列表中的元素去重.   2.特性:集合的目的是将不同的值存放在一起,不同的集合间用来做关系运算,无须纠结于集合中的 ...

  4. 用Abp实现找回密码和密码强制过期策略

    @ 目录 重置密码 找回密码 发送验证码 校验验证码 发送重置密码链接 创建接口 密码强制过期策略 改写接口 Vue网页端开发 重置密码页面 忘记密码控件 密码过期提示 项目地址 用户找回密码,确切地 ...

  5. c/c++快乐算法第二天

    c/c++感受算法乐趣(2) 开始时间2023-04-15 22:26:49 结束时间2023-04-16 00:18:16 前言:首先我们来回忆一下昨天接触了些什么算法题,1.1百钱百鸡问题,1.2 ...

  6. Spring配置数据库连接

    <beans xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="ht ...

  7. Python 列表的修改、添加和删除元素

    列表修改.添加和删除元素 大多数创建的列表都是动态的,随程序的运行增删元素 修改列表元素 指定列表名和要修改的元素的索引,再指定要修改元素的新值 # 修改列表元素案例 motorcycles = [' ...

  8. 机器学习02-(损失函数loss、梯度下降、线性回归、评估训练、模型加载、岭回归、多项式回归)

    机器学习-02 回归模型 线性回归 评估训练结果误差(metrics) 模型的保存和加载 岭回归 多项式回归 代码总结 线性回归 绘制图像,观察w0.w1.loss的变化过程 以等高线的方式绘制梯度下 ...

  9. 【Xpath】 xpath语法总结

    节点选取 表达式 描述 用法 说明 nodename 选取此节点的所有子节点 div 选取div下的所有标签 // 从全局节点中选择节点,任意位置均可 //div 选取整个HTML页面的所有div标签 ...

  10. 分布式搜索引擎Elasticsearch基础入门学习

    一.Elasticsearch介绍 Elasticsearch介绍 Elasticsearh 是 elastic.co 公司开发的分布式搜索引擎. Elasticsearch(简称ES)是一个开源的分 ...