cc-element-components/countdown/index.umd.js

该项目是基于`element-plus`二次封装组件，使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中，我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历

(function(e,s){typeof exports=="object"&&typeof module!="undefined"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(e=typeof globalThis!="undefined"?globalThis:e||self,e.index=s(e.Vue))})(this,function(e){"use strict";var s="",p=(t,d)=>{for(const[l,f]of d)t[l]=f;return t};const w={class:"cc-count-down"},x={key:0},D={key:2},C={key:4},V={key:6};var z=p(e.defineComponent({props:{time:{default:0},separator:{default:"colon"},separatorSize:{default:16},separatorColor:{default:"#000"},gutter:{default:0},showDays:{type:Boolean,default:!1},showHours:{type:Boolean,default:!0},showMinutes:{type:Boolean,default:!0},showSeconds:{type:Boolean,default:!0},start:{type:Boolean,default:!0}},emits:["end","change"],setup(t,{emit:d}){const l=t;let f=e.useSlots(),i=e.ref(0),u=e.ref(0),o=e.ref(0),a=e.ref(0),c=e.ref(),S=e.ref(0),r=e.ref({}),B=e.ref(),m=n=>n<10?"0"+n:""+n,g=()=>{clearInterval(c.value),c.value=setInterval(()=>{u.value===0?o.value!==0&&a.value===0?(a.value=59,o.value-=1):o.value===0&&a.value===0?(clearInterval(c.value),c.value=null):a.value-=1:o.value!==0&&a.value===0?(a.value=59,o.value-=1):o.value===0&&a.value===0?(u.value-=1,o.value=59,a.value=59):a.value-=1,S.value=u.value*1e3*3600+o.value*1e3*60+a.value*1e3},1e3)},y=e.computed(()=>m(i.value)),h=e.computed(()=>m(u.value)),k=e.computed(()=>m(o.value)),v=e.computed(()=>m(a.value));return e.onMounted(()=>{f.default&&(B.value=f.default),l.time>0&&l.time<1e3*60*60*24?(i.value=0,u.value=Math.floor(l.time/3600/1e3%24),o.value=Math.floor(l.time/60/1e3%60),a.value=Math.floor(l.time/1e3%60)):l.time%(1e3*60*60*24)==0?(i.value=l.time/(1e3*60*60*24),u.value=24*i.value,o.value=0,a.value=0):(i.value=Math.floor(l.time/(1e3*60*60*24)),u.value=i.value*24+Math.floor(l.time/3600/1e3%24),o.value=Math.floor(l.time/60/1e3%60),a.value=Math.floor(l.time/1e3%60)),r.value.days=y.value,r.value.hours=h.value,r.value.minutes=k.value,r.value.seconds=v.value,l.start&&g()}),e.onUnmounted(()=>{clearInterval(c.value),c.value=null}),e.watch(()=>S.value,n=>{r.value.days=y.value,r.value.hours=h.value,r.value.minutes=k.value,r.value.seconds=v.value,d("change",n),n===0&&d("end")},{deep:!0}),e.watch(()=>l.start,n=>{n&&g()}),(n,N)=>(e.openBlock(),e.createElementBlock("div",w,[e.unref(B)?e.renderSlot(n.$slots,"default",{key:0,timeData:e.unref(r)},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.showDays&&e.unref(i)>0?(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(e.unref(y)),1)):e.createCommentVNode("v-if",!0),t.showDays&&e.unref(i)>0?(e.openBlock(),e.createElementBlock("div",{key:1,style:e.normalizeStyle({fontSize:t.separatorSize+"px",color:t.separatorColor,margin:`0 ${t.gutter}rpx`})},e.toDisplayString(t.separator==="colon"?":":"\u5929"),5)):e.createCommentVNode("v-if",!0),t.showHours?(e.openBlock(),e.createElementBlock("div",D,e.toDisplayString(e.unref(h)),1)):e.createCommentVNode("v-if",!0),t.showHours?(e.openBlock(),e.createElementBlock("div",{key:3,style:e.normalizeStyle({fontSize:t.separatorSize+"px",color:t.separatorColor,margin:`0 ${t.gutter}rpx`})},e.toDisplayString(t.separator==="colon"?":":"\u65F6"),5)):e.createCommentVNode("v-if",!0),t.showMinutes?(e.openBlock(),e.createElementBlock("div",C,e.toDisplayString(e.unref(k)),1)):e.createCommentVNode("v-if",!0),t.showMinutes?(e.openBlock(),e.createElementBlock("div",{key:5,style:e.normalizeStyle({fontSize:t.separatorSize+"px",color:t.separatorColor,margin:`0 ${t.gutter}rpx`})},e.toDisplayString(t.separator==="colon"?":":"\u5206"),5)):e.createCommentVNode("v-if",!0),t.showSeconds?(e.openBlock(),e.createElementBlock("div",V,e.toDisplayString(e.unref(v)),1)):e.createCommentVNode("v-if",!0),t.showSeconds?(e.openBlock(),e.createElementBlock("div",{key:7,style:e.normalizeStyle({fontSize:t.separatorSize+"px",color:t.separatorColor,margin:`0 ${t.gutter}rpx`})},e.toDisplayString(t.separator==="colon"?"":"\u79D2"),5)):e.createCommentVNode("v-if",!0)],64))]))}}),[["__scopeId","data-v-547db2b9"]]),M={install(t){t.component("cc-countdown",z)}};return M});