Tab切换以及倒计时组件封装

  • Tab切换以及倒计时组件封装已关闭评论
  • 166 次浏览
  • A+
所属分类:Web前端
摘要

功能实现方式特点功能实现方式特点


1、Tab组件

Tab切换以及倒计时组件封装

功能

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

实现方式

  1. 用ul > li标签遍历传入的tabs数组参数渲染
    Tab切换以及倒计时组件封装
  2. 判断是否传入背景,未传则显示文字
    Tab切换以及倒计时组件封装
  3. 绑定点击事件

特点

  • 简单易用
  • 可适配性

2、倒计时组件

Tab切换以及倒计时组件封装

功能

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

实现方式

  1. 通过传入倒计时通过定时器每隔1秒计算剩余的时间,以数组形式返回
    Tab切换以及倒计时组件封装
  2. 将计算出来的时间数组countdown 通过times属性传递给子组件插槽内容
    Tab切换以及倒计时组件封装
    Tab切换以及倒计时组件封装
  3. 注意:倒计时结束或者页面卸载时,清除定时器
    Tab切换以及倒计时组件封装

特点

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