zydx-plus 1.1.17 → 1.2.18
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
|
@@ -2,19 +2,59 @@
|
|
|
2
2
|
<useOffsetPagination :pageCount="pageCount"
|
|
3
3
|
:total="total"
|
|
4
4
|
:page="page"
|
|
5
|
+
:isFinished="isFinished"
|
|
5
6
|
@page:change="pageChange"
|
|
6
7
|
v-slot="{
|
|
7
8
|
next,
|
|
8
9
|
prev,
|
|
9
10
|
isFirstPage,
|
|
10
|
-
isLastPage
|
|
11
|
+
isLastPage,
|
|
12
|
+
isLoading,
|
|
13
|
+
isPrevClicked,
|
|
14
|
+
isNextClicked
|
|
11
15
|
}">
|
|
12
16
|
|
|
13
17
|
<div class="paginator">
|
|
14
|
-
<button :disabled="isFirstPage"
|
|
18
|
+
<button :disabled="isFirstPage || isLoading"
|
|
15
19
|
class="defaultButton"
|
|
16
20
|
@click="prev">
|
|
17
|
-
|
|
21
|
+
<template v-if="isPrevClicked">
|
|
22
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
23
|
+
width="16"
|
|
24
|
+
height="16"
|
|
25
|
+
viewBox="0 0 24 24">
|
|
26
|
+
<g fill="none"
|
|
27
|
+
stroke="black"
|
|
28
|
+
stroke-linecap="round"
|
|
29
|
+
stroke-width="2">
|
|
30
|
+
<path stroke-dasharray="60"
|
|
31
|
+
stroke-dashoffset="60"
|
|
32
|
+
stroke-opacity=".3"
|
|
33
|
+
d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z">
|
|
34
|
+
<animate fill="freeze"
|
|
35
|
+
attributeName="stroke-dashoffset"
|
|
36
|
+
dur="1.3s"
|
|
37
|
+
values="60;0" />
|
|
38
|
+
</path>
|
|
39
|
+
<path stroke-dasharray="15"
|
|
40
|
+
stroke-dashoffset="15"
|
|
41
|
+
d="M12 3C16.9706 3 21 7.02944 21 12">
|
|
42
|
+
<animate fill="freeze"
|
|
43
|
+
attributeName="stroke-dashoffset"
|
|
44
|
+
dur="0.3s"
|
|
45
|
+
values="15;0" />
|
|
46
|
+
<animateTransform attributeName="transform"
|
|
47
|
+
dur="1.5s"
|
|
48
|
+
repeatCount="indefinite"
|
|
49
|
+
type="rotate"
|
|
50
|
+
values="0 12 12;360 12 12" />
|
|
51
|
+
</path>
|
|
52
|
+
</g>
|
|
53
|
+
</svg>
|
|
54
|
+
</template>
|
|
55
|
+
<template v-else>
|
|
56
|
+
上一页
|
|
57
|
+
</template>
|
|
18
58
|
</button>
|
|
19
59
|
<div class="paginator_info">
|
|
20
60
|
<input type="input"
|
|
@@ -23,11 +63,48 @@
|
|
|
23
63
|
<span>/</span>
|
|
24
64
|
<span>{{ pages }}</span>
|
|
25
65
|
</div>
|
|
26
|
-
<button :disabled="isLastPage"
|
|
66
|
+
<button :disabled="isLastPage || isLoading"
|
|
27
67
|
class="defaultButton"
|
|
28
68
|
@click="next">
|
|
29
|
-
|
|
69
|
+
<template v-if="isNextClicked">
|
|
70
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
71
|
+
width="16"
|
|
72
|
+
height="16"
|
|
73
|
+
viewBox="0 0 24 24">
|
|
74
|
+
<g fill="none"
|
|
75
|
+
stroke="black"
|
|
76
|
+
stroke-linecap="round"
|
|
77
|
+
stroke-width="2">
|
|
78
|
+
<path stroke-dasharray="60"
|
|
79
|
+
stroke-dashoffset="60"
|
|
80
|
+
stroke-opacity=".3"
|
|
81
|
+
d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3Z">
|
|
82
|
+
<animate fill="freeze"
|
|
83
|
+
attributeName="stroke-dashoffset"
|
|
84
|
+
dur="1.3s"
|
|
85
|
+
values="60;0" />
|
|
86
|
+
</path>
|
|
87
|
+
<path stroke-dasharray="15"
|
|
88
|
+
stroke-dashoffset="15"
|
|
89
|
+
d="M12 3C16.9706 3 21 7.02944 21 12">
|
|
90
|
+
<animate fill="freeze"
|
|
91
|
+
attributeName="stroke-dashoffset"
|
|
92
|
+
dur="0.3s"
|
|
93
|
+
values="15;0" />
|
|
94
|
+
<animateTransform attributeName="transform"
|
|
95
|
+
dur="1.5s"
|
|
96
|
+
repeatCount="indefinite"
|
|
97
|
+
type="rotate"
|
|
98
|
+
values="0 12 12;360 12 12" />
|
|
99
|
+
</path>
|
|
100
|
+
</g>
|
|
101
|
+
</svg>
|
|
102
|
+
</template>
|
|
103
|
+
<template v-else>
|
|
104
|
+
下一页
|
|
105
|
+
</template>
|
|
30
106
|
</button>
|
|
107
|
+
|
|
31
108
|
</div>
|
|
32
109
|
</useOffsetPagination>
|
|
33
110
|
</template>
|
|
@@ -44,15 +121,19 @@ export default defineComponent({
|
|
|
44
121
|
props: {
|
|
45
122
|
total: {
|
|
46
123
|
type: Number,
|
|
47
|
-
default:
|
|
124
|
+
default: 1
|
|
48
125
|
},
|
|
49
126
|
pageCount: {
|
|
50
127
|
type: Number,
|
|
51
|
-
default:
|
|
128
|
+
default: 1
|
|
52
129
|
},
|
|
53
130
|
currentPage: {
|
|
54
131
|
type: Number,
|
|
55
132
|
default: 1
|
|
133
|
+
},
|
|
134
|
+
isFinished: {
|
|
135
|
+
type: Boolean,
|
|
136
|
+
default: false
|
|
56
137
|
}
|
|
57
138
|
},
|
|
58
139
|
data() {
|
|
@@ -1,17 +1,5 @@
|
|
|
1
1
|
|
|
2
2
|
<script>
|
|
3
|
-
export const debounceTimer = 500
|
|
4
|
-
export function debounce(fn, delay = debounceTimer) {
|
|
5
|
-
var timeoutID = null
|
|
6
|
-
return function () {
|
|
7
|
-
clearTimeout(timeoutID)
|
|
8
|
-
var args = arguments
|
|
9
|
-
var that = this
|
|
10
|
-
timeoutID = setTimeout(function () {
|
|
11
|
-
fn.apply(that, args)
|
|
12
|
-
}, delay)
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
3
|
import { defineComponent } from 'vue';
|
|
16
4
|
export default defineComponent({
|
|
17
5
|
props: {
|
|
@@ -26,21 +14,34 @@ export default defineComponent({
|
|
|
26
14
|
pageCount: {
|
|
27
15
|
type: Number,
|
|
28
16
|
default: 10
|
|
29
|
-
}
|
|
17
|
+
},
|
|
18
|
+
isFinished: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
default: false
|
|
21
|
+
},
|
|
30
22
|
},
|
|
31
23
|
inheritAttrs: false,
|
|
32
24
|
data() {
|
|
33
25
|
return {
|
|
34
|
-
currentPage: 1
|
|
26
|
+
currentPage: 1,
|
|
27
|
+
isNextClicked: false,
|
|
28
|
+
isPrevClicked: false,
|
|
29
|
+
isLoading: false,
|
|
35
30
|
}
|
|
36
31
|
},
|
|
37
32
|
methods: {
|
|
38
33
|
clamp: (num, min, max) => Math.min(Math.max(num, min), max),
|
|
39
34
|
prev: function () {
|
|
35
|
+
this.isLoading = true
|
|
36
|
+
this.isPrevClicked = true
|
|
40
37
|
this.currentPage = this.clamp(this.currentPage - 1, 1, this.pages)
|
|
38
|
+
this.$emit('page:change', this.currentPage)
|
|
41
39
|
},
|
|
42
40
|
next: function () {
|
|
41
|
+
this.isLoading = true
|
|
42
|
+
this.isNextClicked = true
|
|
43
43
|
this.currentPage = this.clamp(this.currentPage + 1, 1, this.pages)
|
|
44
|
+
this.$emit('page:change', this.currentPage)
|
|
44
45
|
},
|
|
45
46
|
},
|
|
46
47
|
computed: {
|
|
@@ -61,13 +62,14 @@ export default defineComponent({
|
|
|
61
62
|
},
|
|
62
63
|
immediate: true
|
|
63
64
|
},
|
|
64
|
-
|
|
65
|
-
handler:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
this.
|
|
65
|
+
isFinished: {
|
|
66
|
+
handler: function (v) {
|
|
67
|
+
if (v) {
|
|
68
|
+
this.isLoading = false
|
|
69
|
+
this.isNextClicked = false
|
|
70
|
+
this.isPrevClicked = false
|
|
69
71
|
}
|
|
70
|
-
}
|
|
72
|
+
},
|
|
71
73
|
immediate: true
|
|
72
74
|
}
|
|
73
75
|
},
|
|
@@ -77,7 +79,10 @@ export default defineComponent({
|
|
|
77
79
|
next: this.next,
|
|
78
80
|
prev: this.prev,
|
|
79
81
|
isFirstPage: this.isFirstPage,
|
|
80
|
-
isLastPage: this.isLastPage
|
|
82
|
+
isLastPage: this.isLastPage,
|
|
83
|
+
isLoading: this.isLoading,
|
|
84
|
+
isPrevClicked: this.isPrevClicked,
|
|
85
|
+
isNextClicked: this.isNextClicked,
|
|
81
86
|
})
|
|
82
87
|
}
|
|
83
88
|
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="wrapper">
|
|
3
|
+
<!-- <div id='custom-select-status'
|
|
4
|
+
class='hidden-visually'
|
|
5
|
+
aria-live="polite"></div> -->
|
|
6
|
+
<div class="custom-select">
|
|
7
|
+
<input stype="text"
|
|
8
|
+
:value="selected"
|
|
9
|
+
:readonly="true"
|
|
10
|
+
@click="toggleDropDown"
|
|
11
|
+
class="select-css" />
|
|
12
|
+
<span class="custom-select-icons"
|
|
13
|
+
@click="toggleDropDown">
|
|
14
|
+
<svg xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
width="16"
|
|
16
|
+
height="16"
|
|
17
|
+
viewBox="0 0 24 24">
|
|
18
|
+
<g :transform="transform"
|
|
19
|
+
:style="style">
|
|
20
|
+
<path fill="#c0c4cc"
|
|
21
|
+
d="M15.125 21.1L6.7 12.7q-.15-.15-.213-.325T6.425 12q0-.2.062-.375T6.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L9.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z" />
|
|
22
|
+
</g>
|
|
23
|
+
</svg>
|
|
24
|
+
</span>
|
|
25
|
+
<transition>
|
|
26
|
+
<ul v-if="isOpen"
|
|
27
|
+
class="custom-select-options">
|
|
28
|
+
<li v-for="(option, idx) in options"
|
|
29
|
+
:key="idx"
|
|
30
|
+
@click="handleClick(option)">{{ option.label }}</li>
|
|
31
|
+
|
|
32
|
+
</ul>
|
|
33
|
+
</transition>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</template>
|
|
37
|
+
|
|
38
|
+
<script>
|
|
39
|
+
import { defineComponent } from 'vue'
|
|
40
|
+
export default defineComponent({
|
|
41
|
+
name: 'zydx-select',
|
|
42
|
+
props: {
|
|
43
|
+
options: {
|
|
44
|
+
type: Array,
|
|
45
|
+
default: () => []
|
|
46
|
+
},
|
|
47
|
+
value: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: ''
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
data() {
|
|
53
|
+
return {
|
|
54
|
+
isOpen: false,
|
|
55
|
+
selected: null
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
methods: {
|
|
59
|
+
toggleDropDown: function () {
|
|
60
|
+
this.isOpen = !this.isOpen
|
|
61
|
+
},
|
|
62
|
+
handleClick: function (option) {
|
|
63
|
+
this.$emit('update:value', option.value)
|
|
64
|
+
this.selected = option.label
|
|
65
|
+
this.isOpen = false
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
computed: {
|
|
69
|
+
transform: function () {
|
|
70
|
+
return this.isOpen
|
|
71
|
+
? 'rotate(90 12 12)'
|
|
72
|
+
: 'rotate(-90 12 12)'
|
|
73
|
+
},
|
|
74
|
+
style: function () {
|
|
75
|
+
return 'transition: all 0.2s ease;'
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
watch: {
|
|
79
|
+
value: {
|
|
80
|
+
handler: function (v) {
|
|
81
|
+
const { label } = this.options.find(option => option.value === v)
|
|
82
|
+
this.selected = label
|
|
83
|
+
},
|
|
84
|
+
immediate: true
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
})
|
|
88
|
+
|
|
89
|
+
</script>
|
|
90
|
+
<style scoped>
|
|
91
|
+
.v-enter-active,
|
|
92
|
+
.v-leave-active {
|
|
93
|
+
transition: opacity 0.5s ease;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.v-enter-from,
|
|
97
|
+
.v-leave-to {
|
|
98
|
+
opacity: 0;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.wrapper {
|
|
102
|
+
text-align: left;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.sample {
|
|
106
|
+
border: 1px solid #eeeeee;
|
|
107
|
+
background: #ffffff;
|
|
108
|
+
max-width: 30em;
|
|
109
|
+
padding: 1em;
|
|
110
|
+
margin-bottom: 1em;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.custom-select {
|
|
114
|
+
position: relative;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.select-css {
|
|
118
|
+
display: block;
|
|
119
|
+
font-size: 14px;
|
|
120
|
+
font-family: inherit;
|
|
121
|
+
font-weight: 400;
|
|
122
|
+
color: #606266;
|
|
123
|
+
line-height: 30px;
|
|
124
|
+
padding: 0 30px 0 20px;
|
|
125
|
+
width: 100%;
|
|
126
|
+
max-width: 100%;
|
|
127
|
+
box-sizing: border-box;
|
|
128
|
+
margin: 0;
|
|
129
|
+
border: 1px solid #aaa;
|
|
130
|
+
box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
|
|
131
|
+
border-radius: 3px;
|
|
132
|
+
-moz-appearance: none;
|
|
133
|
+
-webkit-appearance: none;
|
|
134
|
+
appearance: none;
|
|
135
|
+
background-color: #fff;
|
|
136
|
+
position: relative;
|
|
137
|
+
z-index: 10;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.select-css::-ms-expand {
|
|
141
|
+
display: none;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.select-css:hover {
|
|
145
|
+
border-color: #888;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.select-css:focus {
|
|
149
|
+
border-color: #C64C10;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
.custom-select-icons {
|
|
154
|
+
position: absolute;
|
|
155
|
+
top: 0.5em;
|
|
156
|
+
right: 0.5em;
|
|
157
|
+
z-index: 20;
|
|
158
|
+
border: 1px solid white;
|
|
159
|
+
background: transparent;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.custom-select-options {
|
|
163
|
+
border: 1px solid #aaa;
|
|
164
|
+
border-radius: 0 0 0.25em 0.25em;
|
|
165
|
+
line-height: 1.5;
|
|
166
|
+
margin: 0;
|
|
167
|
+
margin-top: 0.5em;
|
|
168
|
+
padding: 0;
|
|
169
|
+
list-style-type: none;
|
|
170
|
+
font-weight: normal;
|
|
171
|
+
cursor: pointer;
|
|
172
|
+
z-index: 2;
|
|
173
|
+
position: absolute;
|
|
174
|
+
width: calc(100% - 1px);
|
|
175
|
+
background-color: #ffffff;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.custom-select-options li {
|
|
179
|
+
padding: 0 20px;
|
|
180
|
+
font-size: 14px;
|
|
181
|
+
line-height: 30px;
|
|
182
|
+
letter-spacing: 0px;
|
|
183
|
+
text-align: left;
|
|
184
|
+
color: #606266;
|
|
185
|
+
text-overflow: ellipsis;
|
|
186
|
+
white-space: nowrap;
|
|
187
|
+
overflow: hidden;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.custom-select-options li:hover {
|
|
191
|
+
color: #C64C10;
|
|
192
|
+
border-width: 0 0 0 1px;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.custom-select-options li:focus {
|
|
196
|
+
color: #C64C10;
|
|
197
|
+
}
|
|
198
|
+
</style>
|
package/src/index.js
CHANGED
|
@@ -5,6 +5,7 @@ import menuTree from './components/menuTree/index';
|
|
|
5
5
|
import coloring from './components/coloring/index';
|
|
6
6
|
import tree from './components/tree/index';
|
|
7
7
|
import Pagination from './components/pagination/index';
|
|
8
|
+
import Select from './components/select/index';
|
|
8
9
|
|
|
9
10
|
const components = [
|
|
10
11
|
Calendar,
|
|
@@ -12,7 +13,8 @@ const components = [
|
|
|
12
13
|
menuTree,
|
|
13
14
|
coloring,
|
|
14
15
|
tree,
|
|
15
|
-
Pagination
|
|
16
|
+
Pagination,
|
|
17
|
+
Select
|
|
16
18
|
];
|
|
17
19
|
|
|
18
20
|
function install(app) {
|
|
@@ -23,7 +25,7 @@ function install(app) {
|
|
|
23
25
|
}
|
|
24
26
|
|
|
25
27
|
export default {
|
|
26
|
-
version: '1.
|
|
28
|
+
version: '1.2.18',
|
|
27
29
|
install,
|
|
28
30
|
Calendar,
|
|
29
31
|
Message,
|
|
@@ -31,6 +33,7 @@ export default {
|
|
|
31
33
|
menuTree,
|
|
32
34
|
coloring,
|
|
33
35
|
tree,
|
|
34
|
-
Pagination
|
|
36
|
+
Pagination,
|
|
37
|
+
Select
|
|
35
38
|
};
|
|
36
39
|
|