首页 > 其他分享 >Tab切换以及倒计时组件封装

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

时间:2023-06-19 11:11:52浏览次数:59  
标签:定时器 封装 数组 倒计时 tab 组件 Tab

1、Tab组件

功能

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

实现方式

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

特点

  • 简单易用
  • 可适配性

2、倒计时组件

功能

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

实现方式

  1. 通过传入倒计时通过定时器每隔1秒计算剩余的时间,以数组形式返回
  2. 将计算出来的时间数组countdown 通过times属性传递给子组件插槽内容

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

特点

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

标签:定时器,封装,数组,倒计时,tab,组件,Tab
From: https://www.cnblogs.com/peerless1029/p/17467623.html

相关文章

  • Databend 开源周报 第 97 期
    Databend是一款现代云数仓。专为弹性和高效设计,为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务:https://app.databend.cn。What'sOnInDatabend探索Databend本周新进展,遇到更贴近你心意的Databend。列位置Databend现在支持$N这一语法,用来表示列位置,例......
  • linux 定时任务 crontab更改当前用户
    1、参考CentOS7定时任务crontab入门Centos利用crontab定时执行任务及配置方法2、crontab-lcrontab-e#prodbackupdatabase#02***cd/data/xxxxx&&/usr/bin/shyy_backup.sh#prodautoupdatemanagecode#*****cd/data/xxxxx/&&sour......
  • Linux安装StableDiffusion
    安装conda:https://www.xtuos.com/5532.htmlhttps://cloud.tencent.com/developer/article/2063049配置conda切换国内镜像源:https://blog.51cto.com/u_15073468/5528338condaconfig--addchannelshttp://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/condaconfig--add......
  • Java面向对象编程的三大特性:封装、继承、多态。
    一、封装封装的核心在于私有化(private),大部分情况下,来封装对象的属性,很少有封装方法的。通过将对象的属性封装,提供对外的公共方法来访问属性是最常见的方式。publicstaticclassFengZhuang{//通过封装,设置私有属性privateStringname;privat......
  • Stable Diffusion的发展历史
    StableDiffusion是一个基于深度学习的文本到图像模型,于2022年发布。它主要用于根据文本描述生成详细的图像,尽管它也可以应用于其他任务,如修复、绘制和生成由文本提示引导的图像到图像的翻译。它是由StabilityAI创业公司与许多学术研究人员和非营利组织合作开发的。早期发展S......
  • 使用Thumbnails进行图片压缩,报“No suitable ImageReader found for source data”异
    先转一次byte数组再处理byte[]bigContent=file.getBytes();Thumbnails.of(newByteArrayInputStream(bigContent)).scale(1f).outputQuality(0.3f).toFile(fileThu);这里fileThu直接使用文件路径比较好......
  • 【React工作记录一百一十三】ant design table项目中遇到的数据处理实例
    前言大家好我是歌谣今天需要进行一个数据处理的问题原始数据到目标数据的处理过程数据处理的过程就是逻辑推理的过程类似一道数学题的解法原始数据格式(本次以两组数据格式为例Rawdata)[{"id":1047,"name":"README.md","manufacture_id":1......
  • 记录--封装一个通过js调用的全局vue组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在使用vue项目编写的时候,不可避免的会碰到需要时jsapi来调用组件进行显示的情况例如饿了么elementui的Notification通知、Message消息提示等组件虽然已经提供了,但是由于api的限制,我们只能通过特定的参......
  • PySide6(Qt for Python) QTableWidget表头边框线问题
    这个问题是在Windows10平台下特有问题。网络上有很多QtC++的解决方案。但是没有特定的PySide6的解决方案(以下是参考的QtC++的解决方案)。链接:https://blog.csdn.net/qq_22642239/article/details/122863344问题描述C++的解决方案是设置纵横表头的样式表:horizontalHeader,v......
  • vue封装axios的方式(一)
    vue封装axios的方式(一)直接将下面代码复制在request.js中,封装了get,post请求,需要自己配置的是:自己的请求地址,tokenKey是否为token,改为自己存入本地的token名,/**axios封装*请求拦截、相应拦截、错误统一处理*/importaxiosfrom'axios';importQSfrom'qs';importrout......