cc-element-components
Version:
该项目是基于`element-plus`二次封装组件，使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中，我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历
199 lines (198 loc) • 10.4 kB
JavaScript
import { defineComponent, getCurrentInstance, ref, onMounted, watch, resolveComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot, createBlock, withCtx, createVNode, unref } from "vue";
var __assign = globalThis && globalThis.__assign || function() {
return (__assign = Object.assign || function(t) {
for (var i, a = 1, s = arguments.length; a < s; a++)
for (var n in i = arguments[a])
Object.prototype.hasOwnProperty.call(i, n) && (t[n] = i[n]);
return t;
}).apply(this, arguments);
}, CountUp = function() {
function t(t2, i, a) {
var s = this;
this.target = t2, this.endVal = i, this.options = a, this.version = "2.0.8", this.defaults = { startVal: 0, decimalPlaces: 0, duration: 2, useEasing: true, useGrouping: true, smartEasingThreshold: 999, smartEasingAmount: 333, separator: ",", decimal: ".", prefix: "", suffix: "" }, this.finalEndVal = null, this.useEasing = true, this.countDown = false, this.error = "", this.startVal = 0, this.paused = true, this.count = function(t3) {
s.startTime || (s.startTime = t3);
var i2 = t3 - s.startTime;
s.remaining = s.duration - i2, s.useEasing ? s.countDown ? s.frameVal = s.startVal - s.easingFn(i2, 0, s.startVal - s.endVal, s.duration) : s.frameVal = s.easingFn(i2, s.startVal, s.endVal - s.startVal, s.duration) : s.countDown ? s.frameVal = s.startVal - (s.startVal - s.endVal) * (i2 / s.duration) : s.frameVal = s.startVal + (s.endVal - s.startVal) * (i2 / s.duration), s.countDown ? s.frameVal = s.frameVal < s.endVal ? s.endVal : s.frameVal : s.frameVal = s.frameVal > s.endVal ? s.endVal : s.frameVal, s.frameVal = Number(s.frameVal.toFixed(s.options.decimalPlaces)), s.printValue(s.frameVal), i2 < s.duration ? s.rAF = requestAnimationFrame(s.count) : s.finalEndVal !== null ? s.update(s.finalEndVal) : s.callback && s.callback();
}, this.formatNumber = function(t3) {
var i2, a2, n, e, r = t3 < 0 ? "-" : "";
i2 = Math.abs(t3).toFixed(s.options.decimalPlaces);
var o = (i2 += "").split(".");
if (a2 = o[0], n = o.length > 1 ? s.options.decimal + o[1] : "", s.options.useGrouping) {
e = "";
for (var l = 0, h = a2.length; l < h; ++l)
l !== 0 && l % 3 == 0 && (e = s.options.separator + e), e = a2[h - l - 1] + e;
a2 = e;
}
return s.options.numerals && s.options.numerals.length && (a2 = a2.replace(/[0-9]/g, function(t4) {
return s.options.numerals[+t4];
}), n = n.replace(/[0-9]/g, function(t4) {
return s.options.numerals[+t4];
})), r + s.options.prefix + a2 + n + s.options.suffix;
}, this.easeOutExpo = function(t3, i2, a2, s2) {
return a2 * (1 - Math.pow(2, -10 * t3 / s2)) * 1024 / 1023 + i2;
}, this.options = __assign(__assign({}, this.defaults), a), this.formattingFn = this.options.formattingFn ? this.options.formattingFn : this.formatNumber, this.easingFn = this.options.easingFn ? this.options.easingFn : this.easeOutExpo, this.startVal = this.validateValue(this.options.startVal), this.frameVal = this.startVal, this.endVal = this.validateValue(i), this.options.decimalPlaces = Math.max(this.options.decimalPlaces), this.resetDuration(), this.options.separator = String(this.options.separator), this.useEasing = this.options.useEasing, this.options.separator === "" && (this.options.useGrouping = false), this.el = typeof t2 == "string" ? document.getElementById(t2) : t2, this.el ? this.printValue(this.startVal) : this.error = "[CountUp] target is null or undefined";
}
return t.prototype.determineDirectionAndSmartEasing = function() {
var t2 = this.finalEndVal ? this.finalEndVal : this.endVal;
this.countDown = this.startVal > t2;
var i = t2 - this.startVal;
if (Math.abs(i) > this.options.smartEasingThreshold) {
this.finalEndVal = t2;
var a = this.countDown ? 1 : -1;
this.endVal = t2 + a * this.options.smartEasingAmount, this.duration = this.duration / 2;
} else
this.endVal = t2, this.finalEndVal = null;
this.finalEndVal ? this.useEasing = false : this.useEasing = this.options.useEasing;
}, t.prototype.start = function(t2) {
this.error || (this.callback = t2, this.duration > 0 ? (this.determineDirectionAndSmartEasing(), this.paused = false, this.rAF = requestAnimationFrame(this.count)) : this.printValue(this.endVal));
}, t.prototype.pauseResume = function() {
this.paused ? (this.startTime = null, this.duration = this.remaining, this.startVal = this.frameVal, this.determineDirectionAndSmartEasing(), this.rAF = requestAnimationFrame(this.count)) : cancelAnimationFrame(this.rAF), this.paused = !this.paused;
}, t.prototype.reset = function() {
cancelAnimationFrame(this.rAF), this.paused = true, this.resetDuration(), this.startVal = this.validateValue(this.options.startVal), this.frameVal = this.startVal, this.printValue(this.startVal);
}, t.prototype.update = function(t2) {
cancelAnimationFrame(this.rAF), this.startTime = null, this.endVal = this.validateValue(t2), this.endVal !== this.frameVal && (this.startVal = this.frameVal, this.finalEndVal || this.resetDuration(), this.finalEndVal = null, this.determineDirectionAndSmartEasing(), this.rAF = requestAnimationFrame(this.count));
}, t.prototype.printValue = function(t2) {
var i = this.formattingFn(t2);
this.el.tagName === "INPUT" ? this.el.value = i : this.el.tagName === "text" || this.el.tagName === "tspan" ? this.el.textContent = i : this.el.innerHTML = i;
}, t.prototype.ensureNumber = function(t2) {
return typeof t2 == "number" && !isNaN(t2);
}, t.prototype.validateValue = function(t2) {
var i = Number(t2);
return this.ensureNumber(i) ? i : (this.error = "[CountUp] invalid start or end value: " + t2, null);
}, t.prototype.resetDuration = function() {
this.startTime = null, this.duration = 1e3 * Number(this.options.duration), this.remaining = this.duration;
}, t;
}();
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-statistic" };
const _hoisted_2 = { class: "cc-statistic-title" };
const _hoisted_3 = { key: 0 };
const _hoisted_4 = ["id"];
const _hoisted_5 = { class: "cc-statistic-title" };
const _hoisted_6 = { key: 0 };
const _sfc_main = /* @__PURE__ */ defineComponent({
props: {
title: { default: "" },
value: null,
extra: { default: "" },
precision: { default: 0 },
separator: { default: "," },
showGroupSeparator: { type: Boolean, default: false },
start: { type: Boolean, default: true },
loading: { type: Boolean, default: false },
animation: { type: Boolean, default: false },
animationDuration: { default: 2e3 }
},
setup(__props) {
const props = __props;
const uid = getCurrentInstance().uid;
const num = ref("");
const countup = ref(null);
const splitArr = (data, n) => {
let result = [];
for (let i = 0; i < data.length; i += n) {
result.push(data.slice(i, i + n));
}
return result;
};
const renderNum = () => {
num.value = "";
let arr = splitArr(String(props.value).split(""), 3);
let strArr = arr.map((item) => {
return item.join("");
});
strArr.map((item) => {
num.value += `${item}${props.separator}`;
});
num.value = num.value.slice(0, num.value.length - 1);
if (props.precision > 0) {
num.value += ".";
for (let i = 0; i < props.precision; i++) {
num.value += "0";
}
}
};
onMounted(() => {
if (props.animation) {
let options = {
startVal: 0,
duration: props.animationDuration / 1e3,
separator: props.separator,
decimalPlaces: props.precision
};
countup.value = new CountUp(`cc-statistic-${uid}`, props.value, options);
if (props.start)
countup.value.start();
} else {
renderNum();
}
});
watch(() => props.value, () => {
if (props.animation) {
countup.value.start();
} else {
renderNum();
}
});
watch(() => props.start, (val) => {
if (val)
countup.value.start();
});
return (_ctx, _cache) => {
const _component_el_skeleton_item = resolveComponent("el-skeleton-item");
const _component_el_skeleton = resolveComponent("el-skeleton");
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
__props.title ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("v-if", true),
createElementVNode("span", null, [
renderSlot(_ctx.$slots, "title", {}, void 0, true)
])
]),
createElementVNode("div", null, [
createElementVNode("span", null, [
renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
]),
__props.loading ? (openBlock(), createBlock(_component_el_skeleton, {
key: 0,
rows: 1,
animated: ""
}, {
template: withCtx(() => [
createVNode(_component_el_skeleton_item, {
variant: "p",
style: { "width": "15%" }
})
]),
_: 1
})) : (openBlock(), createElementBlock("span", {
key: 1,
class: "cc-statistic-value",
id: `cc-statistic-${unref(uid)}`
}, toDisplayString(num.value), 9, _hoisted_4)),
createElementVNode("span", null, [
renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
])
]),
createElementVNode("div", _hoisted_5, [
__props.extra ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.extra), 1)) : createCommentVNode("v-if", true),
createElementVNode("span", null, [
renderSlot(_ctx.$slots, "extra", {}, void 0, true)
])
])
]);
};
}
});
var statistic = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bbf9d746"]]);
var index = {
install(app) {
app.component("cc-statistic", statistic);
}
};
export { index as default };