zydx-plus 1.2.21 → 1.3.21
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/package.json
CHANGED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { createVNode, render } from 'vue'
|
|
2
|
+
import spinner from './src/spinner.vue'
|
|
3
|
+
|
|
4
|
+
// 准备div容器
|
|
5
|
+
const divNode = createVNode('div', { class: 'spinner-container' })
|
|
6
|
+
render(divNode, document.body)
|
|
7
|
+
// 获取 DOM 节点, 用于挂载组件或卸载组件
|
|
8
|
+
const container = divNode.el
|
|
9
|
+
let instance = null
|
|
10
|
+
|
|
11
|
+
const Modal = () => {
|
|
12
|
+
const destory = () => {
|
|
13
|
+
render(null, container)
|
|
14
|
+
}
|
|
15
|
+
let VNode
|
|
16
|
+
if (!instance) {
|
|
17
|
+
VNode = createVNode(spinner, {})
|
|
18
|
+
instance = VNode
|
|
19
|
+
}
|
|
20
|
+
return {
|
|
21
|
+
open: function () {
|
|
22
|
+
render(VNode, container)
|
|
23
|
+
},
|
|
24
|
+
close: () => destory()
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
export default Modal
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Teleport to="body">
|
|
3
|
+
<transition>
|
|
4
|
+
<div class="mask">
|
|
5
|
+
<div class="spinner_wrapper">
|
|
6
|
+
<div class="lds-roller">
|
|
7
|
+
<div></div>
|
|
8
|
+
<div></div>
|
|
9
|
+
<div></div>
|
|
10
|
+
<div></div>
|
|
11
|
+
<div></div>
|
|
12
|
+
<div></div>
|
|
13
|
+
<div></div>
|
|
14
|
+
<div></div>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</transition>
|
|
19
|
+
</Teleport>
|
|
20
|
+
</template>
|
|
21
|
+
|
|
22
|
+
<script>
|
|
23
|
+
import { defineComponent } from 'vue';
|
|
24
|
+
export default defineComponent({
|
|
25
|
+
name: 'zydx-spinner',
|
|
26
|
+
mounted() {
|
|
27
|
+
document.querySelector('body').style.overflow = 'hidden'
|
|
28
|
+
},
|
|
29
|
+
beforeUnmount() {
|
|
30
|
+
document.querySelector('body').style.overflow = 'auto'
|
|
31
|
+
},
|
|
32
|
+
})
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<style scoped>
|
|
36
|
+
.v-enter-active,
|
|
37
|
+
.v-leave-active {
|
|
38
|
+
transition: opacity 0.5s ease;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.v-enter-from,
|
|
42
|
+
.v-leave-to {
|
|
43
|
+
opacity: 0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.mask {
|
|
47
|
+
position: fixed;
|
|
48
|
+
top: 0;
|
|
49
|
+
bottom: 0;
|
|
50
|
+
right: 0;
|
|
51
|
+
left: 0;
|
|
52
|
+
width: 100vw;
|
|
53
|
+
height: 100vh;
|
|
54
|
+
background-color: transparent;
|
|
55
|
+
z-index: 1300;
|
|
56
|
+
border: none;
|
|
57
|
+
padding: 0;
|
|
58
|
+
margin: 0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.spinner_wrapper {
|
|
62
|
+
width: 100%;
|
|
63
|
+
height: 100%;
|
|
64
|
+
display: flex;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.lds-roller {
|
|
70
|
+
display: inline-block;
|
|
71
|
+
position: relative;
|
|
72
|
+
width: 80px;
|
|
73
|
+
height: 80px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.lds-roller div {
|
|
77
|
+
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
78
|
+
transform-origin: 40px 40px;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.lds-roller div:after {
|
|
82
|
+
content: " ";
|
|
83
|
+
display: block;
|
|
84
|
+
position: absolute;
|
|
85
|
+
width: 7px;
|
|
86
|
+
height: 7px;
|
|
87
|
+
border-radius: 50%;
|
|
88
|
+
background: #bdbdbd;
|
|
89
|
+
margin: -4px 0 0 -4px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.lds-roller div:nth-child(1) {
|
|
93
|
+
animation-delay: -0.036s;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.lds-roller div:nth-child(1):after {
|
|
97
|
+
top: 63px;
|
|
98
|
+
left: 63px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.lds-roller div:nth-child(2) {
|
|
102
|
+
animation-delay: -0.072s;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.lds-roller div:nth-child(2):after {
|
|
106
|
+
top: 68px;
|
|
107
|
+
left: 56px;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.lds-roller div:nth-child(3) {
|
|
111
|
+
animation-delay: -0.108s;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.lds-roller div:nth-child(3):after {
|
|
115
|
+
top: 71px;
|
|
116
|
+
left: 48px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.lds-roller div:nth-child(4) {
|
|
120
|
+
animation-delay: -0.144s;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.lds-roller div:nth-child(4):after {
|
|
124
|
+
top: 72px;
|
|
125
|
+
left: 40px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.lds-roller div:nth-child(5) {
|
|
129
|
+
animation-delay: -0.18s;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.lds-roller div:nth-child(5):after {
|
|
133
|
+
top: 71px;
|
|
134
|
+
left: 32px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.lds-roller div:nth-child(6) {
|
|
138
|
+
animation-delay: -0.216s;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.lds-roller div:nth-child(6):after {
|
|
142
|
+
top: 68px;
|
|
143
|
+
left: 24px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.lds-roller div:nth-child(7) {
|
|
147
|
+
animation-delay: -0.252s;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.lds-roller div:nth-child(7):after {
|
|
151
|
+
top: 63px;
|
|
152
|
+
left: 17px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.lds-roller div:nth-child(8) {
|
|
156
|
+
animation-delay: -0.288s;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.lds-roller div:nth-child(8):after {
|
|
160
|
+
top: 56px;
|
|
161
|
+
left: 12px;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
@keyframes lds-roller {
|
|
165
|
+
0% {
|
|
166
|
+
transform: rotate(0deg);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
100% {
|
|
170
|
+
transform: rotate(360deg);
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
</style>
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="year">
|
|
3
|
+
<div class="year-cont">
|
|
4
|
+
<div class='calendar-Time-header under_line'>
|
|
5
|
+
<span class='calendar-lastMonth' @click="last">{{ lastText }}</span>
|
|
6
|
+
<span class='calendar-TimeH'>{{ yearData }}</span>
|
|
7
|
+
<span class='calendar-nextMonth' @click="next">{{ nextText }}</span>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="year-list">
|
|
10
|
+
<div class="year-li" :class="{active: item === timeObj}" v-for="item in yearList" @click="yearTap(item)">
|
|
11
|
+
<span>{{ item }}</span>
|
|
12
|
+
</div>
|
|
13
|
+
<div class="year-li">
|
|
14
|
+
<span></span>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script>
|
|
22
|
+
export default {
|
|
23
|
+
name: "zydx-year",
|
|
24
|
+
props: {
|
|
25
|
+
lastText: {
|
|
26
|
+
type: String,
|
|
27
|
+
default: '《'
|
|
28
|
+
},
|
|
29
|
+
nextText: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: '》'
|
|
32
|
+
},
|
|
33
|
+
yearStart: { //最低年
|
|
34
|
+
type: String,
|
|
35
|
+
default: '1970'
|
|
36
|
+
},
|
|
37
|
+
yearEnd: { //最高年
|
|
38
|
+
type: String,
|
|
39
|
+
default: '2100'
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
data() {
|
|
43
|
+
return {
|
|
44
|
+
yearData: '',
|
|
45
|
+
yearList: [],
|
|
46
|
+
min: 0,
|
|
47
|
+
max: 0,
|
|
48
|
+
timeObj: 0
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
created() {
|
|
52
|
+
this.render();
|
|
53
|
+
},
|
|
54
|
+
methods: {
|
|
55
|
+
render() {
|
|
56
|
+
this.timeObj = new Date().getFullYear();
|
|
57
|
+
this.min = this.timeObj - 5
|
|
58
|
+
this.max = this.timeObj + 5
|
|
59
|
+
this.yearFun()
|
|
60
|
+
},
|
|
61
|
+
yearFun() {
|
|
62
|
+
this.yearList = []
|
|
63
|
+
if(this.min < Number(this.yearStart)) {
|
|
64
|
+
this.min = Number(this.yearStart)
|
|
65
|
+
this.max = Number(this.yearStart) + 10
|
|
66
|
+
}
|
|
67
|
+
if(this.max > Number(this.yearEnd)) {
|
|
68
|
+
this.min = Number(this.yearEnd) - 10
|
|
69
|
+
this.max = Number(this.yearEnd)
|
|
70
|
+
}
|
|
71
|
+
this.yearData = `${this.min}-${this.max}`
|
|
72
|
+
for(let i = this.min; i < this.max+1; i++) {
|
|
73
|
+
this.yearList.push(i)
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
last() {
|
|
77
|
+
this.min = this.min - 10
|
|
78
|
+
this.max = this.max - 10
|
|
79
|
+
this.yearFun()
|
|
80
|
+
},
|
|
81
|
+
next() {
|
|
82
|
+
this.min = this.min + 10
|
|
83
|
+
this.max = this.max + 10
|
|
84
|
+
this.yearFun()
|
|
85
|
+
},
|
|
86
|
+
yearTap(data) {
|
|
87
|
+
this.$emit('confirm',data)
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<style scoped>
|
|
94
|
+
.year{
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 22px;
|
|
97
|
+
right: 0;
|
|
98
|
+
width: 300px;
|
|
99
|
+
z-index: 100;
|
|
100
|
+
background-color: #fff;
|
|
101
|
+
box-shadow: 0 0 4px 1px #ccc;
|
|
102
|
+
border-radius: 5px;
|
|
103
|
+
padding: 0 10px;
|
|
104
|
+
display: grid;
|
|
105
|
+
user-select: none;
|
|
106
|
+
}
|
|
107
|
+
.calendar-Time-header{
|
|
108
|
+
text-align: center;
|
|
109
|
+
vertical-align: middle;
|
|
110
|
+
padding: 15px 0;
|
|
111
|
+
font-size: 14px;
|
|
112
|
+
}
|
|
113
|
+
.calendar-lastMonth{
|
|
114
|
+
width: 30px;
|
|
115
|
+
font-size: 12px;
|
|
116
|
+
margin-right: 70px;
|
|
117
|
+
padding: 0 5px;
|
|
118
|
+
text-align: center;
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
}
|
|
121
|
+
.calendar-nextMonth{
|
|
122
|
+
width: 30px;
|
|
123
|
+
text-align: center;
|
|
124
|
+
margin-left: 70px;
|
|
125
|
+
font-size: 12px;
|
|
126
|
+
padding: 0 5px;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
}
|
|
129
|
+
.year-list{
|
|
130
|
+
margin-bottom: 20px;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
border-left: 1px solid #ccc;
|
|
133
|
+
border-top: 1px solid #ccc;
|
|
134
|
+
}
|
|
135
|
+
.year-li{
|
|
136
|
+
width: 25%;
|
|
137
|
+
float: left;
|
|
138
|
+
text-align: center;
|
|
139
|
+
height: 70px;
|
|
140
|
+
line-height: 70px;
|
|
141
|
+
font-size: 14px;
|
|
142
|
+
border-right: 1px solid #ccc;
|
|
143
|
+
border-bottom: 1px solid #ccc;
|
|
144
|
+
cursor: pointer;
|
|
145
|
+
}
|
|
146
|
+
.year-li:hover{
|
|
147
|
+
color: #c64c10;
|
|
148
|
+
}
|
|
149
|
+
.active{
|
|
150
|
+
font-weight: 600;
|
|
151
|
+
color: #c64c10;
|
|
152
|
+
}
|
|
153
|
+
</style>
|
package/src/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import coloring from './components/coloring/index';
|
|
|
6
6
|
import tree from './components/tree/index';
|
|
7
7
|
import Pagination from './components/pagination/index';
|
|
8
8
|
import Select from './components/select/index';
|
|
9
|
+
import Year from './components/year/index';
|
|
9
10
|
|
|
10
11
|
const components = [
|
|
11
12
|
Calendar,
|
|
@@ -14,7 +15,8 @@ const components = [
|
|
|
14
15
|
coloring,
|
|
15
16
|
tree,
|
|
16
17
|
Pagination,
|
|
17
|
-
Select
|
|
18
|
+
Select,
|
|
19
|
+
Year
|
|
18
20
|
];
|
|
19
21
|
|
|
20
22
|
function install(app) {
|
|
@@ -25,7 +27,7 @@ function install(app) {
|
|
|
25
27
|
}
|
|
26
28
|
|
|
27
29
|
export default {
|
|
28
|
-
version: '1.
|
|
30
|
+
version: '1.3.21',
|
|
29
31
|
install,
|
|
30
32
|
Calendar,
|
|
31
33
|
Message,
|
|
@@ -34,6 +36,7 @@ export default {
|
|
|
34
36
|
coloring,
|
|
35
37
|
tree,
|
|
36
38
|
Pagination,
|
|
37
|
-
Select
|
|
39
|
+
Select,
|
|
40
|
+
Year
|
|
38
41
|
};
|
|
39
42
|
|