@nutui/nutui 3.1.6 → 3.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -0
- package/dist/nutui.d.ts +7 -1
- package/dist/nutui.es.js +1097 -517
- package/dist/nutui.umd.js +1158 -571
- package/dist/packages/_es/ActionSheet.js +158 -0
- package/dist/packages/_es/Address.js +525 -0
- package/dist/packages/_es/Avatar.js +87 -0
- package/dist/packages/_es/BackTop.js +159 -0
- package/dist/packages/_es/Badge.js +90 -0
- package/dist/packages/_es/Barrage.js +118 -0
- package/dist/packages/_es/Button.js +124 -0
- package/dist/packages/_es/Calendar.js +700 -0
- package/dist/packages/_es/Cell.js +95 -0
- package/dist/packages/_es/CellGroup.js +42 -0
- package/dist/packages/_es/Checkbox.js +109 -0
- package/dist/packages/_es/CheckboxGroup.js +62 -0
- package/dist/packages/_es/CircleProgress.js +109 -0
- package/dist/packages/_es/Col.js +53 -0
- package/dist/packages/_es/Collapse.js +89 -0
- package/dist/packages/_es/CollapseItem.js +257 -0
- package/dist/packages/_es/CountDown.js +224 -0
- package/dist/packages/_es/CountUp.js +547 -0
- package/dist/packages/_es/DatePicker.js +282 -0
- package/dist/packages/_es/Dialog.js +313 -0
- package/dist/packages/_es/Divider.js +49 -0
- package/dist/packages/_es/Drag.js +198 -0
- package/dist/packages/_es/Elevator.js +207 -0
- package/dist/packages/_es/FixedNav.js +127 -0
- package/dist/packages/_es/Icon.js +44 -0
- package/dist/packages/_es/ImagePreview.js +109 -0
- package/dist/packages/_es/InfiniteLoading.js +265 -0
- package/dist/packages/_es/Input.js +183 -0
- package/dist/packages/_es/InputNumber.js +172 -0
- package/dist/packages/_es/Layout.js +10 -0
- package/dist/packages/_es/MenuItem.js +180 -0
- package/dist/packages/_es/Navbar.js +160 -0
- package/dist/packages/_es/NoticeBar.js +389 -0
- package/dist/packages/_es/Notify.js +233 -0
- package/dist/packages/_es/NumberKeyboard.js +248 -0
- package/dist/packages/_es/OverLay.js +118 -0
- package/dist/packages/_es/Pagination.js +163 -0
- package/dist/packages/_es/Picker.js +485 -0
- package/dist/packages/_es/Popover.js +157 -0
- package/dist/packages/_es/Popup.js +268 -0
- package/dist/packages/_es/Price.js +104 -0
- package/dist/packages/_es/Progress.js +131 -0
- package/dist/packages/_es/Radio.js +72 -0
- package/dist/packages/_es/RadioGroup.js +37 -0
- package/dist/packages/_es/Range.js +350 -0
- package/dist/packages/_es/Rate.js +129 -0
- package/dist/packages/_es/Row.js +61 -0
- package/dist/packages/_es/ShortPassword.js +221 -0
- package/dist/packages/_es/Signature.js +167 -0
- package/dist/packages/_es/Step.js +116 -0
- package/dist/packages/_es/Steps.js +52 -0
- package/dist/packages/_es/Swipe.js +193 -0
- package/dist/packages/_es/Swiper.js +429 -0
- package/dist/packages/_es/SwiperItem.js +60 -0
- package/dist/packages/_es/Switch.js +90 -0
- package/dist/packages/_es/Tab.js +179 -0
- package/dist/packages/_es/TabPane.js +42 -0
- package/dist/packages/_es/TabPanel.js +30 -0
- package/dist/packages/_es/Tabbar.js +73 -0
- package/dist/packages/_es/TabbarItem.js +142 -0
- package/dist/packages/_es/Tag.js +98 -0
- package/dist/packages/_es/TextArea.js +127 -0
- package/dist/packages/_es/Toast.js +317 -0
- package/dist/packages/_es/Uploader.js +400 -0
- package/dist/packages/_es/Video.js +405 -0
- package/dist/packages/_es/component.js +26 -0
- package/dist/packages/_es/index.js +64 -0
- package/dist/packages/_es/index2.js +13 -0
- package/dist/packages/_es/plugin-vue_export-helper.js +12 -0
- package/dist/packages/_es/pxCheck.js +9 -0
- package/dist/packages/_es/raf.js +19 -0
- package/dist/packages/avatar/index.scss +0 -1
- package/dist/packages/badge/index.scss +35 -0
- package/dist/packages/calendar/index.scss +13 -0
- package/dist/packages/imagepreview/index.scss +48 -0
- package/dist/packages/input/index.scss +14 -7
- package/dist/packages/pagination/index.scss +51 -0
- package/dist/packages/popover/index.scss +159 -0
- package/dist/packages/shortpassword/index.scss +19 -7
- package/dist/packages/tabpane/index.scss +1 -0
- package/dist/packages/tabs/index.scss +1 -0
- package/dist/packages/tag/index.scss +47 -0
- package/dist/packages/uploader/index.scss +0 -1
- package/dist/style.css +1 -1
- package/dist/style.es.js +2 -1
- package/dist/styles/themes/default.scss +35 -28
- package/dist/styles/variables.scss +55 -32
- package/package.json +7 -7
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
|
|
3
|
+
* (c) 2021 @jdf2e.
|
|
4
|
+
* Released under the MIT License.
|
|
5
|
+
*/
|
|
6
|
+
import { toRefs, computed, resolveComponent, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, renderSlot, createCommentVNode } from "vue";
|
|
7
|
+
import { c as createComponent } from "./component.js";
|
|
8
|
+
import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
|
|
9
|
+
const { componentName, create } = createComponent("avatar");
|
|
10
|
+
const _sfc_main = create({
|
|
11
|
+
props: {
|
|
12
|
+
size: {
|
|
13
|
+
type: String,
|
|
14
|
+
default: "normal"
|
|
15
|
+
},
|
|
16
|
+
shape: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: "round"
|
|
19
|
+
},
|
|
20
|
+
bgColor: {
|
|
21
|
+
type: String,
|
|
22
|
+
default: "#eee"
|
|
23
|
+
},
|
|
24
|
+
icon: {
|
|
25
|
+
type: String,
|
|
26
|
+
default: ""
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
emits: ["active-avatar"],
|
|
30
|
+
setup(props, { emit, slots }) {
|
|
31
|
+
const { size, shape, bgColor, icon } = toRefs(props);
|
|
32
|
+
const sizeValue = ["large", "normal", "small"];
|
|
33
|
+
const classes = computed(() => {
|
|
34
|
+
const prefixCls = componentName;
|
|
35
|
+
return {
|
|
36
|
+
[prefixCls]: true,
|
|
37
|
+
["avatar-" + size.value]: true,
|
|
38
|
+
["avatar-" + shape.value]: true
|
|
39
|
+
};
|
|
40
|
+
});
|
|
41
|
+
const styles = computed(() => {
|
|
42
|
+
return {
|
|
43
|
+
width: sizeValue.indexOf(size.value) > -1 ? "" : `${size.value}px`,
|
|
44
|
+
height: sizeValue.indexOf(size.value) > -1 ? "" : `${size.value}px`,
|
|
45
|
+
backgroundColor: `${bgColor.value}`
|
|
46
|
+
};
|
|
47
|
+
});
|
|
48
|
+
const iconStyles = computed(() => {
|
|
49
|
+
return !!icon.value ? icon.value : "";
|
|
50
|
+
});
|
|
51
|
+
const isShowText = computed(() => {
|
|
52
|
+
return slots.default;
|
|
53
|
+
});
|
|
54
|
+
const activeAvatar = (event) => {
|
|
55
|
+
emit("active-avatar", event);
|
|
56
|
+
};
|
|
57
|
+
return {
|
|
58
|
+
classes,
|
|
59
|
+
styles,
|
|
60
|
+
iconStyles,
|
|
61
|
+
isShowText,
|
|
62
|
+
activeAvatar
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
const _hoisted_1 = {
|
|
67
|
+
key: 0,
|
|
68
|
+
class: "text"
|
|
69
|
+
};
|
|
70
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
71
|
+
const _component_nut_icon = resolveComponent("nut-icon");
|
|
72
|
+
return openBlock(), createElementBlock("view", {
|
|
73
|
+
style: normalizeStyle(_ctx.styles),
|
|
74
|
+
class: normalizeClass(_ctx.classes),
|
|
75
|
+
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.activeAvatar(_ctx.e))
|
|
76
|
+
}, [
|
|
77
|
+
createVNode(_component_nut_icon, {
|
|
78
|
+
class: "icon",
|
|
79
|
+
name: _ctx.iconStyles
|
|
80
|
+
}, null, 8, ["name"]),
|
|
81
|
+
_ctx.isShowText ? (openBlock(), createElementBlock("view", _hoisted_1, [
|
|
82
|
+
renderSlot(_ctx.$slots, "default")
|
|
83
|
+
])) : createCommentVNode("", true)
|
|
84
|
+
], 6);
|
|
85
|
+
}
|
|
86
|
+
var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
87
|
+
export { index as default };
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
|
|
3
|
+
* (c) 2021 @jdf2e.
|
|
4
|
+
* Released under the MIT License.
|
|
5
|
+
*/
|
|
6
|
+
import { reactive, computed, onMounted, onUnmounted, onActivated, onDeactivated, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, withModifiers, renderSlot, createVNode } from "vue";
|
|
7
|
+
import { c as createComponent } from "./component.js";
|
|
8
|
+
import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
|
|
9
|
+
const { componentName, create } = createComponent("backtop");
|
|
10
|
+
const _sfc_main = create({
|
|
11
|
+
props: {
|
|
12
|
+
bottom: {
|
|
13
|
+
type: Number,
|
|
14
|
+
default: 20
|
|
15
|
+
},
|
|
16
|
+
right: {
|
|
17
|
+
type: Number,
|
|
18
|
+
default: 10
|
|
19
|
+
},
|
|
20
|
+
elId: {
|
|
21
|
+
type: String,
|
|
22
|
+
default: ""
|
|
23
|
+
},
|
|
24
|
+
distance: {
|
|
25
|
+
type: Number,
|
|
26
|
+
default: 200
|
|
27
|
+
},
|
|
28
|
+
zIndex: {
|
|
29
|
+
type: Number,
|
|
30
|
+
default: 10
|
|
31
|
+
},
|
|
32
|
+
isAnimation: {
|
|
33
|
+
type: Boolean,
|
|
34
|
+
default: true
|
|
35
|
+
},
|
|
36
|
+
duration: {
|
|
37
|
+
type: Number,
|
|
38
|
+
default: 1e3
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
emits: ["click"],
|
|
42
|
+
setup(props, { emit }) {
|
|
43
|
+
const state = reactive({
|
|
44
|
+
backTop: false,
|
|
45
|
+
scrollTop: 0,
|
|
46
|
+
scrollEl: window,
|
|
47
|
+
startTime: 0,
|
|
48
|
+
keepAlive: false
|
|
49
|
+
});
|
|
50
|
+
const classes = computed(() => {
|
|
51
|
+
const prefixCls = componentName;
|
|
52
|
+
return {
|
|
53
|
+
[prefixCls]: true,
|
|
54
|
+
show: state.backTop
|
|
55
|
+
};
|
|
56
|
+
});
|
|
57
|
+
const style = computed(() => {
|
|
58
|
+
return {
|
|
59
|
+
right: `${props.right}px`,
|
|
60
|
+
bottom: `${props.bottom}px`,
|
|
61
|
+
zIndex: props.zIndex
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
function scrollListener() {
|
|
65
|
+
if (state.scrollEl instanceof Window) {
|
|
66
|
+
state.scrollTop = state.scrollEl.pageYOffset;
|
|
67
|
+
} else {
|
|
68
|
+
state.scrollTop = state.scrollEl.scrollTop;
|
|
69
|
+
}
|
|
70
|
+
state.backTop = state.scrollTop >= props.distance;
|
|
71
|
+
}
|
|
72
|
+
function scroll(y = 0) {
|
|
73
|
+
if (state.scrollEl instanceof Window) {
|
|
74
|
+
window.scrollTo(0, y);
|
|
75
|
+
} else {
|
|
76
|
+
state.scrollEl.scrollTop = y;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
function scrollAnimation() {
|
|
80
|
+
let cid = requestAniFrame()(function fn() {
|
|
81
|
+
var t = props.duration - Math.max(0, state.startTime - +new Date() + props.duration);
|
|
82
|
+
var y = t * -state.scrollTop / props.duration + state.scrollTop;
|
|
83
|
+
scroll(y);
|
|
84
|
+
cid = requestAniFrame()(fn);
|
|
85
|
+
if (t == props.duration || y == 0) {
|
|
86
|
+
window.cancelAnimationFrame(cid);
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
function addEventListener() {
|
|
91
|
+
state.scrollEl.addEventListener("scroll", scrollListener, false);
|
|
92
|
+
state.scrollEl.addEventListener("resize", scrollListener, false);
|
|
93
|
+
}
|
|
94
|
+
function removeEventListener() {
|
|
95
|
+
state.scrollEl.removeEventListener("scroll", scrollListener, false);
|
|
96
|
+
state.scrollEl.removeEventListener("resize", scrollListener, false);
|
|
97
|
+
}
|
|
98
|
+
function initCancelAniFrame() {
|
|
99
|
+
window.cancelAnimationFrame = window.webkitCancelAnimationFrame;
|
|
100
|
+
}
|
|
101
|
+
function requestAniFrame() {
|
|
102
|
+
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
|
|
103
|
+
window.setTimeout(callback, 1e3 / 60);
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
function click(e) {
|
|
107
|
+
state.startTime = +new Date();
|
|
108
|
+
props.isAnimation && props.duration > 0 ? scrollAnimation() : scroll();
|
|
109
|
+
emit("click", e);
|
|
110
|
+
}
|
|
111
|
+
function init() {
|
|
112
|
+
if (props.elId && document.getElementById(props.elId)) {
|
|
113
|
+
state.scrollEl = document.getElementById(props.elId);
|
|
114
|
+
}
|
|
115
|
+
addEventListener();
|
|
116
|
+
initCancelAniFrame();
|
|
117
|
+
}
|
|
118
|
+
onMounted(() => {
|
|
119
|
+
init();
|
|
120
|
+
});
|
|
121
|
+
onUnmounted(() => {
|
|
122
|
+
removeEventListener();
|
|
123
|
+
});
|
|
124
|
+
onActivated(() => {
|
|
125
|
+
if (state.keepAlive) {
|
|
126
|
+
state.keepAlive = false;
|
|
127
|
+
init();
|
|
128
|
+
}
|
|
129
|
+
});
|
|
130
|
+
onDeactivated(() => {
|
|
131
|
+
state.keepAlive = true;
|
|
132
|
+
removeEventListener();
|
|
133
|
+
});
|
|
134
|
+
return {
|
|
135
|
+
state,
|
|
136
|
+
classes,
|
|
137
|
+
style,
|
|
138
|
+
click
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
143
|
+
const _component_nut_icon = resolveComponent("nut-icon");
|
|
144
|
+
return openBlock(), createElementBlock("div", {
|
|
145
|
+
class: normalizeClass(_ctx.classes),
|
|
146
|
+
style: normalizeStyle(_ctx.style),
|
|
147
|
+
onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.click && _ctx.click(...args), ["stop"]))
|
|
148
|
+
}, [
|
|
149
|
+
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
150
|
+
createVNode(_component_nut_icon, {
|
|
151
|
+
size: "19px",
|
|
152
|
+
class: "nut-backtop-main",
|
|
153
|
+
name: "top"
|
|
154
|
+
})
|
|
155
|
+
])
|
|
156
|
+
], 6);
|
|
157
|
+
}
|
|
158
|
+
var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
159
|
+
export { index as default };
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
|
|
3
|
+
* (c) 2021 @jdf2e.
|
|
4
|
+
* Released under the MIT License.
|
|
5
|
+
*/
|
|
6
|
+
import { reactive, computed, openBlock, createElementBlock, createElementVNode, renderSlot, withDirectives, toDisplayString, normalizeClass, normalizeStyle, vShow } from "vue";
|
|
7
|
+
import { c as createComponent } from "./component.js";
|
|
8
|
+
import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
|
|
9
|
+
const { create } = createComponent("badge");
|
|
10
|
+
const _sfc_main = create({
|
|
11
|
+
props: {
|
|
12
|
+
value: {
|
|
13
|
+
type: [String, Number]
|
|
14
|
+
},
|
|
15
|
+
max: {
|
|
16
|
+
type: Number,
|
|
17
|
+
default: 1e4
|
|
18
|
+
},
|
|
19
|
+
dot: {
|
|
20
|
+
type: Boolean,
|
|
21
|
+
default: false
|
|
22
|
+
},
|
|
23
|
+
hidden: {
|
|
24
|
+
type: Boolean,
|
|
25
|
+
default: false
|
|
26
|
+
},
|
|
27
|
+
top: {
|
|
28
|
+
type: String,
|
|
29
|
+
default: "0"
|
|
30
|
+
},
|
|
31
|
+
right: {
|
|
32
|
+
type: String,
|
|
33
|
+
default: "0"
|
|
34
|
+
},
|
|
35
|
+
zIndex: {
|
|
36
|
+
type: Number,
|
|
37
|
+
default: 9
|
|
38
|
+
},
|
|
39
|
+
color: {
|
|
40
|
+
type: String,
|
|
41
|
+
default: ""
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
setup(props) {
|
|
45
|
+
const state = reactive({});
|
|
46
|
+
const stl = computed(() => {
|
|
47
|
+
return {
|
|
48
|
+
top: `${props.top}px`,
|
|
49
|
+
right: `${props.right}px`,
|
|
50
|
+
zIndex: props.zIndex,
|
|
51
|
+
background: props.color
|
|
52
|
+
};
|
|
53
|
+
});
|
|
54
|
+
const content = computed(() => {
|
|
55
|
+
if (props.dot)
|
|
56
|
+
return;
|
|
57
|
+
const value = props.value;
|
|
58
|
+
const max = props.max;
|
|
59
|
+
if (typeof value === "number" && typeof max === "number") {
|
|
60
|
+
return max < value ? `${max}+` : value;
|
|
61
|
+
}
|
|
62
|
+
return value;
|
|
63
|
+
});
|
|
64
|
+
return {
|
|
65
|
+
state,
|
|
66
|
+
stl,
|
|
67
|
+
content
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
const _hoisted_1 = { class: "nut-badge" };
|
|
72
|
+
const _hoisted_2 = { class: "slot-icons" };
|
|
73
|
+
const _hoisted_3 = ["textContent"];
|
|
74
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
75
|
+
return openBlock(), createElementBlock("view", _hoisted_1, [
|
|
76
|
+
createElementVNode("view", _hoisted_2, [
|
|
77
|
+
renderSlot(_ctx.$slots, "icons")
|
|
78
|
+
]),
|
|
79
|
+
renderSlot(_ctx.$slots, "default"),
|
|
80
|
+
withDirectives(createElementVNode("view", {
|
|
81
|
+
textContent: toDisplayString(_ctx.content),
|
|
82
|
+
class: normalizeClass(["nut-badge__content sup", { "is-dot": _ctx.dot }]),
|
|
83
|
+
style: normalizeStyle(_ctx.stl)
|
|
84
|
+
}, null, 14, _hoisted_3), [
|
|
85
|
+
[vShow, !_ctx.hidden && (_ctx.content || _ctx.dot)]
|
|
86
|
+
])
|
|
87
|
+
]);
|
|
88
|
+
}
|
|
89
|
+
var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
90
|
+
export { index as default };
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
|
|
3
|
+
* (c) 2021 @jdf2e.
|
|
4
|
+
* Released under the MIT License.
|
|
5
|
+
*/
|
|
6
|
+
import { computed, ref, onMounted, onUnmounted, onDeactivated, watch, nextTick, openBlock, createElementBlock, normalizeClass, createElementVNode } from "vue";
|
|
7
|
+
import { c as createComponent } from "./component.js";
|
|
8
|
+
import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
|
|
9
|
+
const { componentName, create } = createComponent("barrage");
|
|
10
|
+
const _sfc_main = create({
|
|
11
|
+
props: {
|
|
12
|
+
danmu: {
|
|
13
|
+
type: Array,
|
|
14
|
+
default: () => []
|
|
15
|
+
},
|
|
16
|
+
frequency: {
|
|
17
|
+
type: Number,
|
|
18
|
+
default: 500
|
|
19
|
+
},
|
|
20
|
+
speeds: {
|
|
21
|
+
type: Number,
|
|
22
|
+
default: 2e3
|
|
23
|
+
},
|
|
24
|
+
rows: {
|
|
25
|
+
type: Number,
|
|
26
|
+
default: 3
|
|
27
|
+
},
|
|
28
|
+
top: {
|
|
29
|
+
type: Number,
|
|
30
|
+
default: 10
|
|
31
|
+
},
|
|
32
|
+
loop: {
|
|
33
|
+
type: Boolean,
|
|
34
|
+
default: true
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
emits: ["click"],
|
|
38
|
+
setup(props, { emit }) {
|
|
39
|
+
const classes = computed(() => {
|
|
40
|
+
const prefixCls = componentName;
|
|
41
|
+
return {
|
|
42
|
+
[prefixCls]: true
|
|
43
|
+
};
|
|
44
|
+
});
|
|
45
|
+
let dmBody = ref(document.createElement("div"));
|
|
46
|
+
let dmContainer = ref(document.createElement("div"));
|
|
47
|
+
let timer = 0;
|
|
48
|
+
const danmuList = ref(props.danmu);
|
|
49
|
+
const rows = ref(props.rows);
|
|
50
|
+
const top = ref(props.top);
|
|
51
|
+
const index2 = ref(0);
|
|
52
|
+
const speeds = props.speeds;
|
|
53
|
+
const danmuCWidth = ref(0);
|
|
54
|
+
onMounted(() => {
|
|
55
|
+
danmuCWidth.value = dmBody.value.offsetWidth;
|
|
56
|
+
run();
|
|
57
|
+
});
|
|
58
|
+
onUnmounted(() => {
|
|
59
|
+
clearInterval(timer);
|
|
60
|
+
timer = 0;
|
|
61
|
+
});
|
|
62
|
+
onDeactivated(() => {
|
|
63
|
+
clearInterval(timer);
|
|
64
|
+
timer = 0;
|
|
65
|
+
});
|
|
66
|
+
watch(() => props.danmu, (newValue, oldVlaue) => {
|
|
67
|
+
danmuList.value = [...newValue];
|
|
68
|
+
});
|
|
69
|
+
const add = (word) => {
|
|
70
|
+
const _index = index2.value % danmuList.value.length;
|
|
71
|
+
danmuList.value.splice(_index, 0, word);
|
|
72
|
+
};
|
|
73
|
+
const run = () => {
|
|
74
|
+
clearInterval(timer);
|
|
75
|
+
timer = 0;
|
|
76
|
+
timer = setInterval(() => {
|
|
77
|
+
play();
|
|
78
|
+
run();
|
|
79
|
+
}, props.frequency);
|
|
80
|
+
};
|
|
81
|
+
const play = () => {
|
|
82
|
+
const _index = props.loop ? index2.value % danmuList.value.length : index2.value;
|
|
83
|
+
let el = document.createElement(`view`);
|
|
84
|
+
el.innerHTML = danmuList.value[_index];
|
|
85
|
+
el.classList.add("dmitem");
|
|
86
|
+
dmContainer.value.appendChild(el);
|
|
87
|
+
nextTick(() => {
|
|
88
|
+
const width = el.offsetWidth;
|
|
89
|
+
const height = el.offsetHeight;
|
|
90
|
+
el.classList.add("move");
|
|
91
|
+
el.style.animationDuration = `${speeds}ms`;
|
|
92
|
+
el.style.top = _index % rows.value * (height + top.value) + 20 + "px";
|
|
93
|
+
el.style.width = width + 20 + "px";
|
|
94
|
+
el.style.setProperty("--move-distance", `-${danmuCWidth.value}px`);
|
|
95
|
+
el.dataset.index = `${_index}`;
|
|
96
|
+
el.addEventListener("animationend", () => {
|
|
97
|
+
dmContainer.value.removeChild(el);
|
|
98
|
+
});
|
|
99
|
+
index2.value++;
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
return { classes, danmuList, dmBody, dmContainer, add };
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
const _hoisted_1 = {
|
|
106
|
+
ref: "dmContainer",
|
|
107
|
+
class: "dmContainer"
|
|
108
|
+
};
|
|
109
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
110
|
+
return openBlock(), createElementBlock("view", {
|
|
111
|
+
ref: "dmBody",
|
|
112
|
+
class: normalizeClass(_ctx.classes)
|
|
113
|
+
}, [
|
|
114
|
+
createElementVNode("view", _hoisted_1, null, 512)
|
|
115
|
+
], 2);
|
|
116
|
+
}
|
|
117
|
+
var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
118
|
+
export { index as default };
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* @nutui/nutui v3.1.7 Thu Sep 30 2021 20:17:02 GMT+0800 (中国标准时间)
|
|
3
|
+
* (c) 2021 @jdf2e.
|
|
4
|
+
* Released under the MIT License.
|
|
5
|
+
*/
|
|
6
|
+
import { toRefs, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
|
|
7
|
+
import { c as createComponent } from "./component.js";
|
|
8
|
+
import _sfc_main$1 from "./Icon.js";
|
|
9
|
+
import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
|
|
10
|
+
import "./pxCheck.js";
|
|
11
|
+
const { componentName, create } = createComponent("button");
|
|
12
|
+
const _sfc_main = create({
|
|
13
|
+
components: {
|
|
14
|
+
[_sfc_main$1.name]: _sfc_main$1
|
|
15
|
+
},
|
|
16
|
+
props: {
|
|
17
|
+
color: String,
|
|
18
|
+
shape: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: "round"
|
|
21
|
+
},
|
|
22
|
+
plain: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: false
|
|
25
|
+
},
|
|
26
|
+
loading: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: false
|
|
29
|
+
},
|
|
30
|
+
disabled: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: false
|
|
33
|
+
},
|
|
34
|
+
type: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: "default"
|
|
37
|
+
},
|
|
38
|
+
size: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: "normal"
|
|
41
|
+
},
|
|
42
|
+
block: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: false
|
|
45
|
+
},
|
|
46
|
+
icon: {
|
|
47
|
+
type: String,
|
|
48
|
+
default: ""
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
emits: ["click"],
|
|
52
|
+
setup(props, { emit, slots }) {
|
|
53
|
+
const { type, size, shape, disabled, loading, color, plain, block } = toRefs(props);
|
|
54
|
+
const handleClick = (event) => {
|
|
55
|
+
if (!loading.value && !disabled.value) {
|
|
56
|
+
emit("click", event);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
const classes = computed(() => {
|
|
60
|
+
const prefixCls = componentName;
|
|
61
|
+
return {
|
|
62
|
+
[prefixCls]: true,
|
|
63
|
+
[`${prefixCls}--${type.value}`]: type.value,
|
|
64
|
+
[`${prefixCls}--${size.value}`]: size.value,
|
|
65
|
+
[`${prefixCls}--${shape.value}`]: shape.value,
|
|
66
|
+
[`${prefixCls}--plain`]: plain.value,
|
|
67
|
+
[`${prefixCls}--block`]: block.value,
|
|
68
|
+
[`${prefixCls}--disabled`]: disabled.value,
|
|
69
|
+
[`${prefixCls}--loading`]: loading.value
|
|
70
|
+
};
|
|
71
|
+
});
|
|
72
|
+
const getStyle = computed(() => {
|
|
73
|
+
var _a;
|
|
74
|
+
const style = {};
|
|
75
|
+
if (color == null ? void 0 : color.value) {
|
|
76
|
+
if (plain.value) {
|
|
77
|
+
style.color = color.value;
|
|
78
|
+
style.background = "#fff";
|
|
79
|
+
if (!((_a = color.value) == null ? void 0 : _a.includes("gradient"))) {
|
|
80
|
+
style.borderColor = color.value;
|
|
81
|
+
}
|
|
82
|
+
} else {
|
|
83
|
+
style.color = "#fff";
|
|
84
|
+
style.background = color.value;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
return style;
|
|
88
|
+
});
|
|
89
|
+
return {
|
|
90
|
+
handleClick,
|
|
91
|
+
classes,
|
|
92
|
+
getStyle
|
|
93
|
+
};
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
const _hoisted_1 = { class: "nut-button__warp" };
|
|
97
|
+
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
98
|
+
const _component_nut_icon = resolveComponent("nut-icon");
|
|
99
|
+
return openBlock(), createElementBlock("view", {
|
|
100
|
+
class: normalizeClass(_ctx.classes),
|
|
101
|
+
style: normalizeStyle(_ctx.getStyle),
|
|
102
|
+
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
|
|
103
|
+
}, [
|
|
104
|
+
createElementVNode("view", _hoisted_1, [
|
|
105
|
+
_ctx.loading ? (openBlock(), createBlock(_component_nut_icon, {
|
|
106
|
+
key: 0,
|
|
107
|
+
class: "nut-icon-loading"
|
|
108
|
+
})) : createCommentVNode("", true),
|
|
109
|
+
_ctx.icon && !_ctx.loading ? (openBlock(), createBlock(_component_nut_icon, {
|
|
110
|
+
key: 1,
|
|
111
|
+
class: normalizeClass(_ctx.icon),
|
|
112
|
+
name: _ctx.icon
|
|
113
|
+
}, null, 8, ["class", "name"])) : createCommentVNode("", true),
|
|
114
|
+
_ctx.$slots.default ? (openBlock(), createElementBlock("view", {
|
|
115
|
+
key: 2,
|
|
116
|
+
class: normalizeClass({ text: _ctx.icon || _ctx.loading })
|
|
117
|
+
}, [
|
|
118
|
+
renderSlot(_ctx.$slots, "default")
|
|
119
|
+
], 2)) : createCommentVNode("", true)
|
|
120
|
+
])
|
|
121
|
+
], 6);
|
|
122
|
+
}
|
|
123
|
+
var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
124
|
+
export { Button as default };
|