cc-element-components
Version:
该项目是基于`element-plus`二次封装组件，使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中，我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历
157 lines (156 loc) • 6.89 kB
JavaScript
import { defineComponent, useSlots, ref, computed, onMounted, onUnmounted, watch, openBlock, createElementBlock, unref, renderSlot, Fragment, toDisplayString, createCommentVNode, normalizeStyle } from "vue";
var index_vue_vue_type_style_index_0_scoped_true_lang = "";
var _export_sfc = (sfc, props) => {
for (const [key, val] of props) {
sfc[key] = val;
}
return sfc;
};
const _hoisted_1 = { class: "cc-count-down" };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { key: 2 };
const _hoisted_4 = { key: 4 };
const _hoisted_5 = { key: 6 };
const _sfc_main = /* @__PURE__ */ defineComponent({
props: {
time: { default: 0 },
separator: { default: "colon" },
separatorSize: { default: 16 },
separatorColor: { default: "#000" },
gutter: { default: 0 },
showDays: { type: Boolean, default: false },
showHours: { type: Boolean, default: true },
showMinutes: { type: Boolean, default: true },
showSeconds: { type: Boolean, default: true },
start: { type: Boolean, default: true }
},
emits: ["end", "change"],
setup(__props, { emit: emits }) {
const props = __props;
let slots = useSlots();
let day = ref(0);
let hour = ref(0);
let minute = ref(0);
let second = ref(0);
let timer = ref();
let timeValue = ref(0);
let timeData = ref({});
let defaultSlots = ref();
let formatNum = (num) => {
return num < 10 ? "0" + num : "" + num;
};
let countDown = () => {
clearInterval(timer.value);
timer.value = setInterval(() => {
if (hour.value === 0) {
if (minute.value !== 0 && second.value === 0) {
second.value = 59;
minute.value -= 1;
} else if (minute.value === 0 && second.value === 0) {
clearInterval(timer.value);
timer.value = null;
} else {
second.value -= 1;
}
} else {
if (minute.value !== 0 && second.value === 0) {
second.value = 59;
minute.value -= 1;
} else if (minute.value === 0 && second.value === 0) {
hour.value -= 1;
minute.value = 59;
second.value = 59;
} else {
second.value -= 1;
}
}
timeValue.value = hour.value * 1e3 * 3600 + minute.value * 1e3 * 60 + second.value * 1e3;
}, 1e3);
};
let dayValue = computed(() => formatNum(day.value));
let hourValue = computed(() => formatNum(hour.value));
let minuteValue = computed(() => formatNum(minute.value));
let secondValue = computed(() => formatNum(second.value));
onMounted(() => {
if (slots.default)
defaultSlots.value = slots.default;
if (props.time > 0 && props.time < 1e3 * 60 * 60 * 24) {
day.value = 0;
hour.value = Math.floor(props.time / 3600 / 1e3 % 24);
minute.value = Math.floor(props.time / 60 / 1e3 % 60);
second.value = Math.floor(props.time / 1e3 % 60);
} else {
if (props.time % (1e3 * 60 * 60 * 24) === 0) {
day.value = props.time / (1e3 * 60 * 60 * 24);
hour.value = 24 * day.value;
minute.value = 0;
second.value = 0;
} else {
day.value = Math.floor(props.time / (1e3 * 60 * 60 * 24));
hour.value = day.value * 24 + Math.floor(props.time / 3600 / 1e3 % 24);
minute.value = Math.floor(props.time / 60 / 1e3 % 60);
second.value = Math.floor(props.time / 1e3 % 60);
}
}
timeData.value.days = dayValue.value;
timeData.value.hours = hourValue.value;
timeData.value.minutes = minuteValue.value;
timeData.value.seconds = secondValue.value;
if (props.start)
countDown();
});
onUnmounted(() => {
clearInterval(timer.value);
timer.value = null;
});
watch(() => timeValue.value, (val) => {
timeData.value.days = dayValue.value;
timeData.value.hours = hourValue.value;
timeData.value.minutes = minuteValue.value;
timeData.value.seconds = secondValue.value;
emits("change", val);
if (val === 0)
emits("end");
}, { deep: true });
watch(() => props.start, (val) => {
if (val)
countDown();
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", _hoisted_1, [
unref(defaultSlots) ? renderSlot(_ctx.$slots, "default", {
key: 0,
timeData: unref(timeData)
}, void 0, true) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
__props.showDays && unref(day) > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(dayValue)), 1)) : createCommentVNode("v-if", true),
__props.showDays && unref(day) > 0 ? (openBlock(), createElementBlock("div", {
key: 1,
style: normalizeStyle({ fontSize: __props.separatorSize + "px", color: __props.separatorColor, margin: `0 ${__props.gutter}rpx` })
}, toDisplayString(__props.separator === "colon" ? ":" : "\u5929"), 5)) : createCommentVNode("v-if", true),
__props.showHours ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(hourValue)), 1)) : createCommentVNode("v-if", true),
__props.showHours ? (openBlock(), createElementBlock("div", {
key: 3,
style: normalizeStyle({ fontSize: __props.separatorSize + "px", color: __props.separatorColor, margin: `0 ${__props.gutter}rpx` })
}, toDisplayString(__props.separator === "colon" ? ":" : "\u65F6"), 5)) : createCommentVNode("v-if", true),
__props.showMinutes ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(minuteValue)), 1)) : createCommentVNode("v-if", true),
__props.showMinutes ? (openBlock(), createElementBlock("div", {
key: 5,
style: normalizeStyle({ fontSize: __props.separatorSize + "px", color: __props.separatorColor, margin: `0 ${__props.gutter}rpx` })
}, toDisplayString(__props.separator === "colon" ? ":" : "\u5206"), 5)) : createCommentVNode("v-if", true),
__props.showSeconds ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(unref(secondValue)), 1)) : createCommentVNode("v-if", true),
__props.showSeconds ? (openBlock(), createElementBlock("div", {
key: 7,
style: normalizeStyle({ fontSize: __props.separatorSize + "px", color: __props.separatorColor, margin: `0 ${__props.gutter}rpx` })
}, toDisplayString(__props.separator === "colon" ? "" : "\u79D2"), 5)) : createCommentVNode("v-if", true)
], 64))
]);
};
}
});
var countdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-547db2b9"]]);
var index = {
install(app) {
app.component("cc-countdown", countdown);
}
};
export { index as default };