diff --git a/main.js b/main.js
index c85248d..285931f 100644
--- a/main.js
+++ b/main.js
@@ -4,6 +4,7 @@ import uvUI from '@climblee/uv-ui'
import Vue from 'vue'
import './uni.promisify.adaptor'
+
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
@@ -18,6 +19,24 @@ import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uvUI);
+
+ // 调用setConfig方法,方法内部会进行对象属性深度合并,可以放心嵌套配置
+// 需要在Vue.use(uvUI)之后执行
+ uni.$uv.setConfig({
+ // 修改$uv.config对象的属性
+
+ // 修改$uv.props对象的属性
+ props: {
+ // 修改uv-text组件的size参数的默认值,注意:默认值都要用default声明
+ text: {
+ color: {
+ default: 'red'
+ }
+ }
+ // 其他组件属性配置,具体的参数名称可以去每个组件的props.js中进行查看
+ // ......
+ }
+ })
return {
app
}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index c5f5d8b..e743be1 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,26 +1,72 @@
+
-
+
+
{{title}}
+
+
+
+
+
+
+
+ value = index">
+
+
+
+
+
-
@@ -51,4 +97,8 @@
font-size: 36rpx;
color: $uni-color-primary;
}
+ .icon {
+ width: 36rpx;
+ height: 36rpx;
+ }
diff --git a/unpackage/dist/dev/app-plus/app-service.js b/unpackage/dist/dev/app-plus/app-service.js
index 1fcfc39..1033f95 100644
--- a/unpackage/dist/dev/app-plus/app-service.js
+++ b/unpackage/dist/dev/app-plus/app-service.js
@@ -31,7 +31,7 @@ if (uni.restoreGlobal) {
}
(function(vue) {
"use strict";
- var _e, _f;
+ var _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
function formatAppLog(type, filename, ...args) {
if (uni.__log__) {
uni.__log__(type, filename, ...args);
@@ -1050,6 +1050,473 @@ if (uni.restoreGlobal) {
}
}
};
+ const uvBadgeProps = {
+ props: {
+ // 是否显示圆点
+ isDot: {
+ type: Boolean,
+ default: false
+ },
+ // 显示的内容
+ value: {
+ type: [Number, String],
+ default: ""
+ },
+ // 是否显示
+ show: {
+ type: Boolean,
+ default: true
+ },
+ // 最大值,超过最大值会显示 '{max}+'
+ max: {
+ type: [Number, String],
+ default: 999
+ },
+ // 主题类型,error|warning|success|primary
+ type: {
+ type: [String, void 0, null],
+ default: "error"
+ },
+ // 当数值为 0 时,是否展示 Badge
+ showZero: {
+ type: Boolean,
+ default: false
+ },
+ // 背景颜色,优先级比type高,如设置,type参数会失效
+ bgColor: {
+ type: [String, null],
+ default: null
+ },
+ // 字体颜色
+ color: {
+ type: [String, null],
+ default: null
+ },
+ // 徽标形状,circle-四角均为圆角,horn-左下角为直角
+ shape: {
+ type: [String, void 0, null],
+ default: "circle"
+ },
+ // 设置数字的显示方式,overflow|ellipsis|limit
+ // overflow会根据max字段判断,超出显示`${max}+`
+ // ellipsis会根据max判断,超出显示`${max}...`
+ // limit会依据1000作为判断条件,超出1000,显示`${value/1000}K`,比如2.2k、3.34w,最多保留2位小数
+ numberType: {
+ type: [String, void 0, null],
+ default: "overflow"
+ },
+ // 设置badge的位置偏移,格式为 [x, y],也即设置的为top和right的值,absolute为true时有效
+ offset: {
+ type: Array,
+ default: () => []
+ },
+ // 是否反转背景和字体颜色
+ inverted: {
+ type: Boolean,
+ default: false
+ },
+ // 是否绝对定位
+ absolute: {
+ type: Boolean,
+ default: false
+ },
+ ...(_f = (_e = uni.$uv) == null ? void 0 : _e.props) == null ? void 0 : _f.badge
+ }
+ };
+ const _export_sfc = (sfc, props2) => {
+ const target = sfc.__vccOpts || sfc;
+ for (const [key, val] of props2) {
+ target[key] = val;
+ }
+ return target;
+ };
+ const _sfc_main$g = {
+ name: "uv-badge",
+ mixins: [mpMixin, mixin, uvBadgeProps],
+ computed: {
+ // 是否将badge中心与父组件右上角重合
+ boxStyle() {
+ let style = {};
+ return style;
+ },
+ // 整个组件的样式
+ badgeStyle() {
+ const style = {};
+ if (this.color) {
+ style.color = this.color;
+ }
+ if (this.bgColor && !this.inverted) {
+ style.backgroundColor = this.bgColor;
+ }
+ if (this.absolute) {
+ style.position = "absolute";
+ if (this.offset.length) {
+ const top = this.offset[0];
+ const right = this.offset[1] || top;
+ style.top = this.$uv.addUnit(top);
+ style.right = this.$uv.addUnit(right);
+ }
+ }
+ return style;
+ },
+ showValue() {
+ switch (this.numberType) {
+ case "overflow":
+ return Number(this.value) > Number(this.max) ? this.max + "+" : this.value;
+ case "ellipsis":
+ return Number(this.value) > Number(this.max) ? "..." : this.value;
+ case "limit":
+ return Number(this.value) > 999 ? Number(this.value) >= 9999 ? Math.floor(this.value / 1e4 * 100) / 100 + "w" : Math.floor(this.value / 1e3 * 100) / 100 + "k" : this.value;
+ default:
+ return Number(this.value);
+ }
+ },
+ propsType() {
+ return this.type || "error";
+ }
+ }
+ };
+ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
+ return _ctx.show && ((Number(_ctx.value) === 0 ? _ctx.showZero : true) || _ctx.isDot) ? (vue.openBlock(), vue.createElementBlock(
+ "text",
+ {
+ key: 0,
+ class: vue.normalizeClass([[_ctx.isDot ? "uv-badge--dot" : "uv-badge--not-dot", _ctx.inverted && "uv-badge--inverted", _ctx.shape === "horn" && "uv-badge--horn", `uv-badge--${$options.propsType}${_ctx.inverted ? "--inverted" : ""}`], "uv-badge"]),
+ style: vue.normalizeStyle([_ctx.$uv.addStyle(_ctx.customStyle), $options.badgeStyle])
+ },
+ vue.toDisplayString(_ctx.isDot ? "" : $options.showValue),
+ 7
+ /* TEXT, CLASS, STYLE */
+ )) : vue.createCommentVNode("v-if", true);
+ }
+ const __easycom_1$3 = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$f], ["__scopeId", "data-v-747d4365"], ["__file", "D:/frontDev/project/OfficeSystem/node_modules/@climblee/uv-ui/components/uv-badge/uv-badge.vue"]]);
+ const props$8 = {
+ props: {
+ // 滑块的移动过渡时间,单位ms
+ duration: {
+ type: Number,
+ default: 300
+ },
+ // tabs标签数组
+ list: {
+ type: Array,
+ default: () => []
+ },
+ // 滑块颜色
+ lineColor: {
+ type: String,
+ default: "#3c9cff"
+ },
+ // 菜单选择中时的样式
+ activeStyle: {
+ type: [String, Object],
+ default: () => ({
+ color: "#303133"
+ })
+ },
+ // 菜单非选中时的样式
+ inactiveStyle: {
+ type: [String, Object],
+ default: () => ({
+ color: "#606266"
+ })
+ },
+ // 滑块长度
+ lineWidth: {
+ type: [String, Number],
+ default: 20
+ },
+ // 滑块高度
+ lineHeight: {
+ type: [String, Number],
+ default: 3
+ },
+ // 滑块背景显示大小,当滑块背景设置为图片时使用
+ lineBgSize: {
+ type: String,
+ default: "cover"
+ },
+ // 菜单item的样式
+ itemStyle: {
+ type: [String, Object],
+ default: () => ({
+ height: "44px"
+ })
+ },
+ // 菜单是否可滚动
+ scrollable: {
+ type: Boolean,
+ default: true
+ },
+ // 当前选中标签的索引
+ current: {
+ type: [Number, String],
+ default: 0
+ },
+ // 默认读取的键名
+ keyName: {
+ type: String,
+ default: "name"
+ },
+ ...(_h = (_g = uni.$uv) == null ? void 0 : _g.props) == null ? void 0 : _h.tabs
+ }
+ };
+ const _sfc_main$f = {
+ name: "uv-tabs",
+ emits: ["click", "change"],
+ mixins: [mpMixin, mixin, props$8],
+ data() {
+ return {
+ firstTime: true,
+ scrollLeft: 0,
+ scrollViewWidth: 0,
+ lineOffsetLeft: 0,
+ tabsRect: {
+ left: 0
+ },
+ innerCurrent: 0,
+ moving: false
+ };
+ },
+ watch: {
+ current: {
+ immediate: true,
+ handler(newValue, oldValue) {
+ if (newValue !== this.innerCurrent) {
+ this.innerCurrent = newValue;
+ this.$nextTick(() => {
+ this.resize();
+ });
+ }
+ }
+ },
+ // list变化时,重新渲染list各项信息
+ list() {
+ this.$nextTick(() => {
+ this.resize();
+ });
+ }
+ },
+ computed: {
+ textStyle() {
+ return (index2) => {
+ const style = {};
+ const customeStyle = index2 == this.innerCurrent ? this.$uv.addStyle(this.activeStyle) : this.$uv.addStyle(
+ this.inactiveStyle
+ );
+ if (this.list[index2].disabled) {
+ style.color = "#c8c9cc";
+ }
+ return this.$uv.deepMerge(customeStyle, style);
+ };
+ },
+ propsBadge() {
+ return uvBadgeProps;
+ }
+ },
+ async mounted() {
+ this.init();
+ },
+ methods: {
+ setLineLeft() {
+ const tabItem = this.list[this.innerCurrent];
+ if (!tabItem) {
+ return;
+ }
+ let lineOffsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => total + curr.rect.width, 0);
+ let lineWidth = this.$uv.getPx(this.lineWidth);
+ if (this.$uv.test.number(this.lineWidth) && this.$uv.unit) {
+ lineWidth = this.$uv.getPx(`${this.lineWidth}${this.$uv.unit}`);
+ }
+ this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2;
+ if (this.firstTime) {
+ setTimeout(() => {
+ this.firstTime = false;
+ }, 20);
+ }
+ },
+ // nvue下设置滑块的位置
+ animation(x, duration = 0) {
+ },
+ // 点击某一个标签
+ clickHandler(item, index2) {
+ this.$emit("click", {
+ ...item,
+ index: index2
+ });
+ if (item.disabled)
+ return;
+ if (this.innerCurrent != index2) {
+ this.$emit("change", {
+ ...item,
+ index: index2
+ });
+ }
+ this.innerCurrent = index2;
+ this.$nextTick(() => {
+ this.resize();
+ });
+ },
+ init() {
+ this.$uv.sleep().then(() => {
+ this.resize();
+ });
+ },
+ setScrollLeft() {
+ const tabRect = this.list[this.innerCurrent];
+ const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
+ return total + curr.rect.width;
+ }, 0);
+ const windowWidth = this.$uv.sys().windowWidth;
+ let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect.right) / 2 + this.tabsRect.left / 2;
+ scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width);
+ this.scrollLeft = Math.max(0, scrollLeft);
+ },
+ // 获取所有标签的尺寸
+ resize() {
+ if (this.list.length === 0) {
+ return;
+ }
+ Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+ this.tabsRect = tabsRect;
+ this.scrollViewWidth = 0;
+ itemRect.map((item, index2) => {
+ this.scrollViewWidth += item.width;
+ this.list[index2].rect = item;
+ });
+ this.setLineLeft();
+ this.setScrollLeft();
+ });
+ },
+ // 获取导航菜单的尺寸
+ getTabsRect() {
+ return new Promise((resolve) => {
+ this.queryRect("uv-tabs__wrapper__scroll-view").then((size) => resolve(size));
+ });
+ },
+ // 获取所有标签的尺寸
+ getAllItemRect() {
+ return new Promise((resolve) => {
+ const promiseAllArr = this.list.map((item, index2) => this.queryRect(
+ `uv-tabs__wrapper__nav__item-${index2}`,
+ true
+ ));
+ Promise.all(promiseAllArr).then((sizes) => resolve(sizes));
+ });
+ },
+ // 获取各个标签的尺寸
+ queryRect(el, item) {
+ return new Promise((resolve) => {
+ this.$uvGetRect(`.${el}`).then((size) => {
+ resolve(size);
+ });
+ });
+ }
+ }
+ };
+ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
+ const _component_uv_badge = resolveEasycom(vue.resolveDynamicComponent("uv-badge"), __easycom_1$3);
+ return vue.openBlock(), vue.createElementBlock(
+ "view",
+ {
+ class: "uv-tabs",
+ style: vue.normalizeStyle([_ctx.$uv.addStyle(_ctx.customStyle)])
+ },
+ [
+ vue.createElementVNode("view", { class: "uv-tabs__wrapper" }, [
+ vue.renderSlot(_ctx.$slots, "left", {}, void 0, true),
+ vue.createElementVNode("view", { class: "uv-tabs__wrapper__scroll-view-wrapper" }, [
+ vue.createElementVNode("scroll-view", {
+ "scroll-x": _ctx.scrollable,
+ "scroll-left": $data.scrollLeft,
+ "scroll-with-animation": "",
+ class: "uv-tabs__wrapper__scroll-view",
+ "show-scrollbar": false,
+ ref: "uv-tabs__wrapper__scroll-view"
+ }, [
+ vue.createElementVNode(
+ "view",
+ {
+ class: "uv-tabs__wrapper__nav",
+ ref: "uv-tabs__wrapper__nav",
+ style: vue.normalizeStyle({
+ flex: _ctx.scrollable ? "" : 1
+ })
+ },
+ [
+ (vue.openBlock(true), vue.createElementBlock(
+ vue.Fragment,
+ null,
+ vue.renderList(_ctx.list, (item, index2) => {
+ return vue.openBlock(), vue.createElementBlock("view", {
+ class: vue.normalizeClass(["uv-tabs__wrapper__nav__item", [`uv-tabs__wrapper__nav__item-${index2}`, item.disabled && "uv-tabs__wrapper__nav__item--disabled"]]),
+ key: index2,
+ onClick: ($event) => $options.clickHandler(item, index2),
+ ref_for: true,
+ ref: `uv-tabs__wrapper__nav__item-${index2}`,
+ style: vue.normalizeStyle([{ flex: _ctx.scrollable ? "" : 1 }, _ctx.$uv.addStyle(_ctx.itemStyle)])
+ }, [
+ vue.createElementVNode(
+ "text",
+ {
+ class: vue.normalizeClass([[item.disabled && "uv-tabs__wrapper__nav__item__text--disabled"], "uv-tabs__wrapper__nav__item__text"]),
+ style: vue.normalizeStyle([$options.textStyle(index2)])
+ },
+ vue.toDisplayString(item[_ctx.keyName]),
+ 7
+ /* TEXT, CLASS, STYLE */
+ ),
+ vue.createVNode(_component_uv_badge, {
+ show: !!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value)),
+ isDot: item.badge && item.badge.isDot || $options.propsBadge.isDot,
+ value: item.badge && item.badge.value || $options.propsBadge.value,
+ max: item.badge && item.badge.max || $options.propsBadge.max,
+ type: item.badge && item.badge.type || $options.propsBadge.type,
+ showZero: item.badge && item.badge.showZero || $options.propsBadge.showZero,
+ bgColor: item.badge && item.badge.bgColor || $options.propsBadge.bgColor,
+ color: item.badge && item.badge.color || $options.propsBadge.color,
+ shape: item.badge && item.badge.shape || $options.propsBadge.shape,
+ numberType: item.badge && item.badge.numberType || $options.propsBadge.numberType,
+ inverted: item.badge && item.badge.inverted || $options.propsBadge.inverted,
+ customStyle: "margin-left: 4px;"
+ }, null, 8, ["show", "isDot", "value", "max", "type", "showZero", "bgColor", "color", "shape", "numberType", "inverted"])
+ ], 14, ["onClick"]);
+ }),
+ 128
+ /* KEYED_FRAGMENT */
+ )),
+ vue.createElementVNode(
+ "view",
+ {
+ class: "uv-tabs__wrapper__nav__line",
+ ref: "uv-tabs__wrapper__nav__line",
+ style: vue.normalizeStyle([{
+ width: _ctx.$uv.addUnit(_ctx.lineWidth),
+ transform: `translate(${$data.lineOffsetLeft}px)`,
+ transitionDuration: `${$data.firstTime ? 0 : _ctx.duration}ms`,
+ height: $data.firstTime ? 0 : _ctx.$uv.addUnit(_ctx.lineHeight),
+ background: _ctx.lineColor,
+ backgroundSize: _ctx.lineBgSize
+ }])
+ },
+ null,
+ 4
+ /* STYLE */
+ )
+ ],
+ 4
+ /* STYLE */
+ )
+ ], 8, ["scroll-x", "scroll-left"])
+ ]),
+ vue.renderSlot(_ctx.$slots, "right", {}, void 0, true)
+ ])
+ ],
+ 4
+ /* STYLE */
+ );
+ }
+ const __easycom_0$4 = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$e], ["__scopeId", "data-v-0f3b9fa1"], ["__file", "D:/frontDev/project/OfficeSystem/node_modules/@climblee/uv-ui/components/uv-tabs/uv-tabs.vue"]]);
const icons = {
"uvicon-level": "e68f",
"uvicon-checkbox-mark": "e659",
@@ -1210,7 +1677,7 @@ if (uni.restoreGlobal) {
"uvicon-twitte": "e607",
"uvicon-twitter-circle-fill": "e6cf"
};
- const props = {
+ const props$7 = {
props: {
// 图标类名
name: {
@@ -1297,20 +1764,13 @@ if (uni.restoreGlobal) {
type: Boolean,
default: false
},
- ...(_f = (_e = uni.$uv) == null ? void 0 : _e.props) == null ? void 0 : _f.icon
+ ...(_j = (_i = uni.$uv) == null ? void 0 : _i.props) == null ? void 0 : _j.icon
}
};
- const _export_sfc = (sfc, props2) => {
- const target = sfc.__vccOpts || sfc;
- for (const [key, val] of props2) {
- target[key] = val;
- }
- return target;
- };
- const _sfc_main$2 = {
+ const _sfc_main$e = {
name: "uv-icon",
emits: ["click"],
- mixins: [mpMixin, mixin, props],
+ mixins: [mpMixin, mixin, props$7],
data() {
return {
colorType: [
@@ -1368,7 +1828,7 @@ if (uni.restoreGlobal) {
}
}
};
- function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock(
"view",
{
@@ -1412,41 +1872,4043 @@ if (uni.restoreGlobal) {
/* CLASS */
);
}
- const __easycom_0 = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1], ["__scopeId", "data-v-7cc7ad3f"], ["__file", "D:/frontDev/project/OfficeSystem/node_modules/@climblee/uv-ui/components/uv-icon/uv-icon.vue"]]);
- const _imports_0 = "/static/logo.png";
+ const __easycom_1$2 = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$d], ["__scopeId", "data-v-7cc7ad3f"], ["__file", "D:/frontDev/project/OfficeSystem/node_modules/@climblee/uv-ui/components/uv-icon/uv-icon.vue"]]);
+ function colorGradient(startColor = "rgb(0, 0, 0)", endColor = "rgb(255, 255, 255)", step = 10) {
+ const startRGB = hexToRgb(startColor, false);
+ const startR = startRGB[0];
+ const startG = startRGB[1];
+ const startB = startRGB[2];
+ const endRGB = hexToRgb(endColor, false);
+ const endR = endRGB[0];
+ const endG = endRGB[1];
+ const endB = endRGB[2];
+ const sR = (endR - startR) / step;
+ const sG = (endG - startG) / step;
+ const sB = (endB - startB) / step;
+ const colorArr = [];
+ for (let i = 0; i < step; i++) {
+ let hex = rgbToHex(`rgb(${Math.round(sR * i + startR)},${Math.round(sG * i + startG)},${Math.round(sB * i + startB)})`);
+ if (i === 0)
+ hex = rgbToHex(startColor);
+ if (i === step - 1)
+ hex = rgbToHex(endColor);
+ colorArr.push(hex);
+ }
+ return colorArr;
+ }
+ function hexToRgb(sColor, str = true) {
+ const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+ sColor = String(sColor).toLowerCase();
+ if (sColor && reg.test(sColor)) {
+ if (sColor.length === 4) {
+ let sColorNew = "#";
+ for (let i = 1; i < 4; i += 1) {
+ sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+ }
+ sColor = sColorNew;
+ }
+ const sColorChange = [];
+ for (let i = 1; i < 7; i += 2) {
+ sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`));
+ }
+ if (!str) {
+ return sColorChange;
+ }
+ return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`;
+ }
+ if (/^(rgb|RGB)/.test(sColor)) {
+ const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
+ return arr.map((val) => Number(val));
+ }
+ return sColor;
+ }
+ function rgbToHex(rgb) {
+ const _this = rgb;
+ const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+ if (/^(rgb|RGB)/.test(_this)) {
+ const aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
+ let strHex = "#";
+ for (let i = 0; i < aColor.length; i++) {
+ let hex = Number(aColor[i]).toString(16);
+ hex = String(hex).length == 1 ? `${0}${hex}` : hex;
+ if (hex === "0") {
+ hex += hex;
+ }
+ strHex += hex;
+ }
+ if (strHex.length !== 7) {
+ strHex = _this;
+ }
+ return strHex;
+ }
+ if (reg.test(_this)) {
+ const aNum = _this.replace(/#/, "").split("");
+ if (aNum.length === 6) {
+ return _this;
+ }
+ if (aNum.length === 3) {
+ let numHex = "#";
+ for (let i = 0; i < aNum.length; i += 1) {
+ numHex += aNum[i] + aNum[i];
+ }
+ return numHex;
+ }
+ } else {
+ return _this;
+ }
+ }
+ function colorToRgba(color, alpha) {
+ color = rgbToHex(color);
+ const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
+ let sColor = String(color).toLowerCase();
+ if (sColor && reg.test(sColor)) {
+ if (sColor.length === 4) {
+ let sColorNew = "#";
+ for (let i = 1; i < 4; i += 1) {
+ sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
+ }
+ sColor = sColorNew;
+ }
+ const sColorChange = [];
+ for (let i = 1; i < 7; i += 2) {
+ sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`));
+ }
+ return `rgba(${sColorChange.join(",")},${alpha})`;
+ }
+ return sColor;
+ }
+ const props$6 = {
+ props: {
+ // 是否显示组件
+ show: {
+ type: Boolean,
+ default: true
+ },
+ // 颜色
+ color: {
+ type: String,
+ default: "#909193"
+ },
+ // 提示文字颜色
+ textColor: {
+ type: String,
+ default: "#909193"
+ },
+ // 文字和图标是否垂直排列
+ vertical: {
+ type: Boolean,
+ default: false
+ },
+ // 模式选择,circle-圆形,spinner-花朵形,semicircle-半圆形
+ mode: {
+ type: String,
+ default: "spinner"
+ },
+ // 图标大小,单位默认px
+ size: {
+ type: [String, Number],
+ default: 24
+ },
+ // 文字大小
+ textSize: {
+ type: [String, Number],
+ default: 15
+ },
+ // 文字样式
+ textStyle: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 文字内容
+ text: {
+ type: [String, Number],
+ default: ""
+ },
+ // 动画模式 https://www.runoob.com/cssref/css3-pr-animation-timing-function.html
+ timingFunction: {
+ type: String,
+ default: "linear"
+ },
+ // 动画执行周期时间
+ duration: {
+ type: [String, Number],
+ default: 1200
+ },
+ // mode=circle时的暗边颜色
+ inactiveColor: {
+ type: String,
+ default: ""
+ },
+ ...(_l = (_k = uni.$uv) == null ? void 0 : _k.props) == null ? void 0 : _l.loadingIcon
+ }
+ };
+ const _sfc_main$d = {
+ name: "uv-loading-icon",
+ mixins: [mpMixin, mixin, props$6],
+ data() {
+ return {
+ // Array.form可以通过一个伪数组对象创建指定长度的数组
+ // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
+ array12: Array.from({
+ length: 12
+ }),
+ // 这里需要设置默认值为360,否则在安卓nvue上,会延迟一个duration周期后才执行
+ // 在iOS nvue上,则会一开始默认执行两个周期的动画
+ aniAngel: 360,
+ // 动画旋转角度
+ webviewHide: false,
+ // 监听webview的状态,如果隐藏了页面,则停止动画,以免性能消耗
+ loading: false
+ // 是否运行中,针对nvue使用
+ };
+ },
+ computed: {
+ // 当为circle类型时,给其另外三边设置一个更轻一些的颜色
+ // 之所以需要这么做的原因是,比如父组件传了color为红色,那么需要另外的三个边为浅红色
+ // 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝,导致效果没有那么细腻良好)
+ otherBorderColor() {
+ const lightColor = colorGradient(this.color, "#ffffff", 100)[80];
+ if (this.mode === "circle") {
+ return this.inactiveColor ? this.inactiveColor : lightColor;
+ } else {
+ return "transparent";
+ }
+ }
+ },
+ watch: {
+ show(n) {
+ }
+ },
+ mounted() {
+ this.init();
+ },
+ methods: {
+ init() {
+ setTimeout(() => {
+ this.show && this.addEventListenerToWebview();
+ }, 20);
+ },
+ // 监听webview的显示与隐藏
+ addEventListenerToWebview() {
+ const pages2 = getCurrentPages();
+ const page2 = pages2[pages2.length - 1];
+ const currentWebview = page2.$getAppWebview();
+ currentWebview.addEventListener("hide", () => {
+ this.webviewHide = true;
+ });
+ currentWebview.addEventListener("show", () => {
+ this.webviewHide = false;
+ });
+ }
+ }
+ };
+ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
+ return _ctx.show ? (vue.openBlock(), vue.createElementBlock(
+ "view",
+ {
+ key: 0,
+ class: vue.normalizeClass(["uv-loading-icon", [_ctx.vertical && "uv-loading-icon--vertical"]]),
+ style: vue.normalizeStyle([_ctx.$uv.addStyle(_ctx.customStyle)])
+ },
+ [
+ !$data.webviewHide ? (vue.openBlock(), vue.createElementBlock(
+ "view",
+ {
+ key: 0,
+ class: vue.normalizeClass(["uv-loading-icon__spinner", [`uv-loading-icon__spinner--${_ctx.mode}`]]),
+ ref: "ani",
+ style: vue.normalizeStyle({
+ color: _ctx.color,
+ width: _ctx.$uv.addUnit(_ctx.size),
+ height: _ctx.$uv.addUnit(_ctx.size),
+ borderTopColor: _ctx.color,
+ borderBottomColor: $options.otherBorderColor,
+ borderLeftColor: $options.otherBorderColor,
+ borderRightColor: $options.otherBorderColor,
+ "animation-duration": `${_ctx.duration}ms`,
+ "animation-timing-function": _ctx.mode === "semicircle" || _ctx.mode === "circle" ? _ctx.timingFunction : ""
+ })
+ },
+ [
+ _ctx.mode === "spinner" ? (vue.openBlock(true), vue.createElementBlock(
+ vue.Fragment,
+ { key: 0 },
+ vue.renderList($data.array12, (item, index2) => {
+ return vue.openBlock(), vue.createElementBlock("view", {
+ key: index2,
+ class: "uv-loading-icon__dot"
+ });
+ }),
+ 128
+ /* KEYED_FRAGMENT */
+ )) : vue.createCommentVNode("v-if", true)
+ ],
+ 6
+ /* CLASS, STYLE */
+ )) : vue.createCommentVNode("v-if", true),
+ _ctx.text ? (vue.openBlock(), vue.createElementBlock(
+ "text",
+ {
+ key: 1,
+ class: "uv-loading-icon__text",
+ style: vue.normalizeStyle([{
+ fontSize: _ctx.$uv.addUnit(_ctx.textSize),
+ color: _ctx.textColor
+ }, _ctx.$uv.addStyle(_ctx.textStyle)])
+ },
+ vue.toDisplayString(_ctx.text),
+ 5
+ /* TEXT, STYLE */
+ )) : vue.createCommentVNode("v-if", true)
+ ],
+ 6
+ /* CLASS, STYLE */
+ )) : vue.createCommentVNode("v-if", true);
+ }
+ const __easycom_0$3 = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$c], ["__scopeId", "data-v-daf2e960"], ["__file", "D:/frontDev/project/OfficeSystem/node_modules/@climblee/uv-ui/components/uv-loading-icon/uv-loading-icon.vue"]]);
+ const props$5 = {
+ props: {
+ // 是否细边框
+ hairline: {
+ type: Boolean,
+ default: true
+ },
+ // 按钮的预置样式,info,primary,error,warning,success
+ type: {
+ type: String,
+ default: "info"
+ },
+ // 按钮尺寸,large,normal,small,mini
+ size: {
+ type: String,
+ default: "normal"
+ },
+ // 按钮形状,circle(两边为半圆),square(带圆角)
+ shape: {
+ type: String,
+ default: "square"
+ },
+ // 按钮是否镂空
+ plain: {
+ type: Boolean,
+ default: false
+ },
+ // 是否禁止状态
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ // 是否加载中
+ loading: {
+ type: Boolean,
+ default: false
+ },
+ // 加载中提示文字
+ loadingText: {
+ type: [String, Number],
+ default: ""
+ },
+ // 加载状态图标类型
+ loadingMode: {
+ type: String,
+ default: "spinner"
+ },
+ // 加载图标大小
+ loadingSize: {
+ type: [String, Number],
+ default: 14
+ },
+ // 开放能力,具体请看uniapp稳定关于button组件部分说明
+ // https://uniapp.dcloud.io/component/button
+ openType: {
+ type: String,
+ default: ""
+ },
+ // 用于