更新记录

1.5(2022-06-19)

支持vue3

1.4(2022-06-19)

公用样式,函数抽离

1.3(2022-04-26)

增加ios时间支持

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

倒计时

用法示例

常规用法:

<template>
    <view class="block">
        <!--    默认用法-->
        <yl-count-down :end-time="endTime"/>
        <!--    自定义背景,文字,倒计时容器样式-->
        <yl-count-down :end-time="endTime" background="#000000" color="#ffffff" text-color="#000000" container-style="margin:20rpx;"/>
        <!--    接收时间字符串-->
        <yl-count-down :end-time="endTimeStr"/>
        <!--    接收时间类型数据-->
        <yl-count-down :end-time="endTimeDate"/>
        <!--    自定义样式,传递对象-->
        <yl-count-down :end-time="endTime"
                       background="transparent"
                       color="#f914f6"
                       text-color="#f914f6"
                       :text-style="{margin:'20rpx','font-size':'40rpx'}"
                       :time-style="{padding:'20rpx','font-size':'40rpx',border:'solid 1px #f914f6'}"
                       :container-style="{margin:'40rpx 20rpx'}"
        />
        <!--    自定义样式,传递字符串-->
        <yl-count-down :end-time="endTime"
                       background="green"
                       color="#ffffff"
                       text-color="#69b90b"
                       text-style="margin:10rpx;font-size:34rpx;"
                       time-style="padding:10rpx;font-size:34rpx;"
        />
    </view>

</template>

<script>
    export default {
        data(){
            return{
                endTime:'',
                endTimeStr:'',
                endTimeDate:null,//
            }
        },
        mounted(){
            this.endTime=new Date().getTime()+100000000
            this.endTimeStr=new Date(this.endTime).toLocaleDateString()
            this.endTimeDate=new Date(this.endTime)
        }
    }
</script> 
Props
参数 说明 类型 可选值 默认值
endTime 结束目标时间 [Date,Number,String] -- --
background 背景 String -- --
color 颜色 String -- --
textColor 文字颜色 String -- --
timeStyle 时间样式 Object / String -- --
textStyle 时分秒文字样式 Object / String -- --
containerStyle 容器样式 Object / String -- --

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问