first commit
This commit is contained in:
107
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.js
vendored
Normal file
107
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.js
vendored
Normal file
@@ -0,0 +1,107 @@
|
||||
"use strict";
|
||||
const uni_modules_tdesignUniapp_components_common_src_instantiationDecorator = require("../common/src/instantiationDecorator.js");
|
||||
const uni_modules_tdesignUniapp_components_common_config = require("../common/config.js");
|
||||
const uni_modules_tdesignUniapp_components_loading_props = require("./props.js");
|
||||
const uni_modules_tdesignUniapp_components_common_utils_wxs = require("../common/utils.wxs.js");
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
const name = `${uni_modules_tdesignUniapp_components_common_config.prefix}-loading`;
|
||||
const _sfc_main = uni_modules_tdesignUniapp_components_common_src_instantiationDecorator.uniComponent({
|
||||
name,
|
||||
options: {
|
||||
multipleSlots: true,
|
||||
styleIsolation: "shared"
|
||||
},
|
||||
externalClasses: [
|
||||
`${uni_modules_tdesignUniapp_components_common_config.prefix}-class`,
|
||||
`${uni_modules_tdesignUniapp_components_common_config.prefix}-class-text`,
|
||||
`${uni_modules_tdesignUniapp_components_common_config.prefix}-class-indicator`
|
||||
],
|
||||
props: {
|
||||
...uni_modules_tdesignUniapp_components_loading_props.props
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prefix: uni_modules_tdesignUniapp_components_common_config.prefix,
|
||||
classPrefix: name,
|
||||
show: true,
|
||||
tools: uni_modules_tdesignUniapp_components_common_utils_wxs.tools
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
loading: {
|
||||
handler(value) {
|
||||
const {
|
||||
delay
|
||||
} = this;
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
}
|
||||
if (value && delay) {
|
||||
this.timer = setTimeout(() => {
|
||||
this.show = value;
|
||||
this.timer = null;
|
||||
}, delay);
|
||||
} else {
|
||||
this.show = value;
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
beforeUnMount() {
|
||||
clearTimeout(this.timer);
|
||||
},
|
||||
methods: {
|
||||
refreshPage() {
|
||||
this.$emit("reload");
|
||||
}
|
||||
}
|
||||
});
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: _ctx.indicator
|
||||
}, _ctx.indicator ? common_vendor.e({
|
||||
b: _ctx.theme === "spinner"
|
||||
}, _ctx.theme === "spinner" ? {
|
||||
c: common_vendor.f(12, (item, index, i0) => {
|
||||
return {
|
||||
a: index,
|
||||
b: common_vendor.n(_ctx.classPrefix + "__dot " + _ctx.classPrefix + "__dot-" + index)
|
||||
};
|
||||
})
|
||||
} : {}, {
|
||||
d: _ctx.theme === "circular"
|
||||
}, _ctx.theme === "circular" ? {
|
||||
e: common_vendor.n(_ctx.classPrefix + "__circular")
|
||||
} : {}, {
|
||||
f: _ctx.theme === "dots"
|
||||
}, _ctx.theme === "dots" ? {
|
||||
g: common_vendor.n(_ctx.classPrefix + "__dot"),
|
||||
h: common_vendor.s((_ctx.duration ? "animation-duration: " + _ctx.duration / 1e3 + "s; animation-delay:0s;" : "") + " animation-play-state: " + (_ctx.pause ? "paused" : "running") + ";"),
|
||||
i: common_vendor.n(_ctx.classPrefix + "__dot"),
|
||||
j: common_vendor.s((_ctx.duration ? "animation-duration: " + _ctx.duration / 1e3 + "s; animation-delay:" + _ctx.duration * 1 / 3e3 + "s;" : "") + " animation-play-state: " + (_ctx.pause ? "paused" : "running") + ";"),
|
||||
k: common_vendor.n(_ctx.classPrefix + "__dot"),
|
||||
l: common_vendor.s((_ctx.duration ? "animation-duration: " + _ctx.duration / 1e3 + "s; animation-delay:" + _ctx.duration * 2 / 3e3 + "s;" : "") + " animation-play-state: " + (_ctx.pause ? "paused" : "running") + ";")
|
||||
} : {}, {
|
||||
m: common_vendor.n(_ctx.tClassIndicator),
|
||||
n: common_vendor.n(_ctx.classPrefix + "__spinner " + _ctx.classPrefix + "__spinner--" + _ctx.theme + " " + (_ctx.reverse ? "reverse" : "")),
|
||||
o: common_vendor.s("width: " + _ctx.tools.addUnit(_ctx.size) + "; height: " + _ctx.tools.addUnit(_ctx.size) + "; " + (_ctx.inheritColor ? "color: inherit;" : "") + " " + (_ctx.indicator ? "" : "display: none;") + " " + (_ctx.duration ? "animation-duration: " + _ctx.duration / 1e3 + "s;" : "") + " animation-play-state: " + (_ctx.pause ? "paused" : "running") + ";"),
|
||||
p: _ctx.ariaRole || "img",
|
||||
q: _ctx.ariaLabel || _ctx.text || "加载中"
|
||||
}) : {}, {
|
||||
r: _ctx.text
|
||||
}, _ctx.text ? {
|
||||
s: common_vendor.t(_ctx.text)
|
||||
} : {}, {
|
||||
t: common_vendor.n(_ctx.tools.cls(_ctx.classPrefix + "__text", [_ctx.layout])),
|
||||
v: common_vendor.n(_ctx.tClassText),
|
||||
w: _ctx.indicator,
|
||||
x: _ctx.ariaLabel || _ctx.text,
|
||||
y: common_vendor.s(_ctx.tools._style([_ctx.customStyle, _ctx.show ? "" : "display: none", _ctx.inheritColor ? "color: inherit" : ""])),
|
||||
z: common_vendor.n(_ctx.tClass),
|
||||
A: common_vendor.n(_ctx.classPrefix + " " + (_ctx.classPrefix + "--" + _ctx.layout) + " " + (_ctx.fullscreen ? _ctx.classPrefix + "--fullscreen" : ""))
|
||||
});
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-11314ba3"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.js.map
|
||||
4
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.json
vendored
Normal file
4
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.wxml
vendored
Normal file
1
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.wxml
vendored
Normal file
@@ -0,0 +1 @@
|
||||
<view style="{{y}}" class="{{['data-v-11314ba3', z, A]}}"><view wx:if="{{a}}" class="{{['data-v-11314ba3', m, n]}}" style="{{o}}" aria-role="{{p}}" aria-label="{{q}}"><block wx:if="{{b}}"><view wx:for="{{c}}" wx:for-item="item" wx:key="a" class="{{['data-v-11314ba3', item.b]}}"/></block><view wx:if="{{d}}" class="{{['data-v-11314ba3', e]}}"/><block wx:if="{{f}}"><view class="{{['data-v-11314ba3', g]}}" style="{{h}}"/><view class="{{['data-v-11314ba3', i]}}" style="{{j}}"/><view class="{{['data-v-11314ba3', k]}}" style="{{l}}"/></block><slot name="indicator"/></view><view class="{{['data-v-11314ba3', t, v]}}" aria-hidden="{{w}}" aria-label="{{x}}"><block wx:if="{{r}}">{{s}}</block><slot name="text"/><slot/></view></view>
|
||||
203
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.wxss
vendored
Normal file
203
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/loading.wxss
vendored
Normal file
@@ -0,0 +1,203 @@
|
||||
.t-loading.data-v-11314ba3 {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-loading--fullscreen.data-v-11314ba3 {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: var(--td-loading-z-index, 3500);
|
||||
background-color: var(--td-loading-full-bg-color, rgba(255, 255, 255, 0.6));
|
||||
}
|
||||
.t-loading__spinner.data-v-11314ba3 {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
animation: rotate-11314ba3 0.8s linear infinite;
|
||||
color: var(--td-loading-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
}
|
||||
.t-loading__spinner.reverse.data-v-11314ba3 {
|
||||
animation-name: rotateReverse-11314ba3;
|
||||
}
|
||||
.t-loading__spinner--spinner.data-v-11314ba3 {
|
||||
animation-timing-function: steps(12);
|
||||
color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
}
|
||||
.t-loading__spinner--spinner .t-loading__dot.data-v-11314ba3 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.t-loading__spinner--spinner .t-loading__dot.data-v-11314ba3::before {
|
||||
display: block;
|
||||
width: 5rpx;
|
||||
height: 25%;
|
||||
margin: 0 auto;
|
||||
background-color: var(--td-loading-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
border-radius: 40%;
|
||||
content: ' ';
|
||||
}
|
||||
.t-loading__spinner--circular .t-loading__circular.data-v-11314ba3 {
|
||||
border-radius: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 60deg, currentColor 330deg, rgba(255, 255, 255, 0) 360deg);
|
||||
mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
|
||||
/* stylelint-disable-next-line */
|
||||
-webkit-mask: radial-gradient(transparent calc(50% - 1rpx), #fff 50%);
|
||||
}
|
||||
.t-loading__spinner--dots.data-v-11314ba3 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
animation: none;
|
||||
}
|
||||
.t-loading__spinner--dots .t-loading__dot.data-v-11314ba3 {
|
||||
width: 20%;
|
||||
height: 20%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--td-loading-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
animation-duration: 1.8s;
|
||||
animation-name: dotting-11314ba3;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
.t-loading__text.data-v-11314ba3 {
|
||||
color: var(--td-loading-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
font: var(--td-loading-text-font, var(--td-font-body-small, 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
||||
}
|
||||
.t-loading__text--vertical.data-v-11314ba3:not(:first-child):not(:empty) {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.t-loading__text--horizontal.data-v-11314ba3:not(:first-child):not(:empty) {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
.t-loading--vertical.data-v-11314ba3 {
|
||||
flex-direction: column;
|
||||
}
|
||||
.t-loading--horizontal.data-v-11314ba3 {
|
||||
flex-direction: row;
|
||||
vertical-align: top;
|
||||
}
|
||||
@keyframes t-bar-11314ba3 {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
50% {
|
||||
width: 70%;
|
||||
}
|
||||
100% {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@keyframes t-bar-loaded-11314ba3 {
|
||||
0% {
|
||||
height: 6rpx;
|
||||
opacity: 1;
|
||||
width: 90%;
|
||||
}
|
||||
50% {
|
||||
height: 6rpx;
|
||||
opacity: 1;
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.t-loading__dot-1.data-v-11314ba3 {
|
||||
transform: rotate(30deg);
|
||||
opacity: 0;
|
||||
}
|
||||
.t-loading__dot-2.data-v-11314ba3 {
|
||||
transform: rotate(60deg);
|
||||
opacity: 0.08333333;
|
||||
}
|
||||
.t-loading__dot-3.data-v-11314ba3 {
|
||||
transform: rotate(90deg);
|
||||
opacity: 0.16666667;
|
||||
}
|
||||
.t-loading__dot-4.data-v-11314ba3 {
|
||||
transform: rotate(120deg);
|
||||
opacity: 0.25;
|
||||
}
|
||||
.t-loading__dot-5.data-v-11314ba3 {
|
||||
transform: rotate(150deg);
|
||||
opacity: 0.33333333;
|
||||
}
|
||||
.t-loading__dot-6.data-v-11314ba3 {
|
||||
transform: rotate(180deg);
|
||||
opacity: 0.41666667;
|
||||
}
|
||||
.t-loading__dot-7.data-v-11314ba3 {
|
||||
transform: rotate(210deg);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.t-loading__dot-8.data-v-11314ba3 {
|
||||
transform: rotate(240deg);
|
||||
opacity: 0.58333333;
|
||||
}
|
||||
.t-loading__dot-9.data-v-11314ba3 {
|
||||
transform: rotate(270deg);
|
||||
opacity: 0.66666667;
|
||||
}
|
||||
.t-loading__dot-10.data-v-11314ba3 {
|
||||
transform: rotate(300deg);
|
||||
opacity: 0.75;
|
||||
}
|
||||
.t-loading__dot-11.data-v-11314ba3 {
|
||||
transform: rotate(330deg);
|
||||
opacity: 0.83333333;
|
||||
}
|
||||
.t-loading__dot-12.data-v-11314ba3 {
|
||||
transform: rotate(360deg);
|
||||
opacity: 0.91666667;
|
||||
}
|
||||
@keyframes rotate-11314ba3 {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotateReverse-11314ba3 {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes dotting-11314ba3 {
|
||||
0% {
|
||||
opacity: 0.15;
|
||||
}
|
||||
1% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
33% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
34% {
|
||||
opacity: 0.15;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
66
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/props.js
vendored
Normal file
66
unpackage/dist/dev/mp-weixin/uni_modules/tdesign-uniapp/components/loading/props.js
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
"use strict";
|
||||
const props = {
|
||||
/** 延迟显示加载效果的时间,用于防止请求速度过快引起的加载闪烁,单位:毫秒 */
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/** 加载动画执行完成一次的时间,单位:毫秒 */
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 800
|
||||
},
|
||||
/** 是否显示为全屏加载 */
|
||||
fullscreen: Boolean,
|
||||
/** 加载指示符,值为 true 显示默认指示符,值为 false 则不显示,也可以自定义指示符 */
|
||||
indicator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 是否继承父元素颜色 */
|
||||
inheritColor: Boolean,
|
||||
/** 对齐方式 */
|
||||
layout: {
|
||||
type: String,
|
||||
default: "horizontal",
|
||||
validator(val) {
|
||||
if (!val)
|
||||
return true;
|
||||
return ["horizontal", "vertical"].includes(val);
|
||||
}
|
||||
},
|
||||
/** 是否处于加载状态 */
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/** 是否暂停动画 */
|
||||
pause: Boolean,
|
||||
/** 加载进度 */
|
||||
progress: {
|
||||
type: Number
|
||||
},
|
||||
/** 加载动画是否反向 */
|
||||
reverse: Boolean,
|
||||
/** 尺寸,示例:20px */
|
||||
size: {
|
||||
type: String,
|
||||
default: "20px"
|
||||
},
|
||||
/** 加载提示文案 */
|
||||
text: {
|
||||
type: String
|
||||
},
|
||||
/** 加载组件类型 */
|
||||
theme: {
|
||||
type: String,
|
||||
default: "circular",
|
||||
validator(val) {
|
||||
if (!val)
|
||||
return true;
|
||||
return ["circular", "spinner", "dots", "custom"].includes(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
exports.props = props;
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/uni_modules/tdesign-uniapp/components/loading/props.js.map
|
||||
Reference in New Issue
Block a user