zydx-plus 1.1.12 → 1.1.15
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 +1 -1
- package/src/components/coloring/src/coloring.vue +44 -4
- package/src/components/pagination/index.js +6 -0
- package/src/components/pagination/src/pagination.vue +146 -0
- package/src/components/pagination/src/useOffsetPagination.vue +82 -0
- package/src/index.js +1 -1
- package/src/components/pagination/index.vue +0 -102
package/package.json
CHANGED
|
@@ -30,6 +30,10 @@
|
|
|
30
30
|
</div>
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
|
+
<div class="color-but">
|
|
34
|
+
<button @click="empty">清空</button>
|
|
35
|
+
<button @click="submit">确认</button>
|
|
36
|
+
</div>
|
|
33
37
|
</div>
|
|
34
38
|
</template>
|
|
35
39
|
|
|
@@ -39,7 +43,7 @@ export default {
|
|
|
39
43
|
name: 'zydx-coloring',
|
|
40
44
|
data() {
|
|
41
45
|
return {
|
|
42
|
-
backColor: 'rgb(103, 194, 58)',
|
|
46
|
+
backColor: 'rgb(103, 194, 58,1)',
|
|
43
47
|
isCDown: false,
|
|
44
48
|
circleCDown: false,
|
|
45
49
|
colorX: 0,
|
|
@@ -55,16 +59,35 @@ export default {
|
|
|
55
59
|
}
|
|
56
60
|
},
|
|
57
61
|
props: {
|
|
58
|
-
color:
|
|
62
|
+
color: String,
|
|
63
|
+
type: String
|
|
59
64
|
},
|
|
60
65
|
created() {
|
|
61
66
|
this.$nextTick(() => {
|
|
67
|
+
console.log(this.color)
|
|
62
68
|
if(this.color === undefined) return
|
|
63
69
|
this.alternativeColor(this.color)
|
|
64
70
|
})
|
|
65
71
|
},
|
|
66
72
|
methods: {
|
|
67
|
-
|
|
73
|
+
submit() {
|
|
74
|
+
this.$emit('submit', {
|
|
75
|
+
type: (this.type === undefined)? '': this.type,
|
|
76
|
+
rgba: `rgba(${this.maskRgb.r},${this.maskRgb.g},${this.maskRgb.b},${this.maskRgb.a})`
|
|
77
|
+
})
|
|
78
|
+
},
|
|
79
|
+
empty() {
|
|
80
|
+
this.$emit('empty', {
|
|
81
|
+
type: (this.type === undefined)? '': this.type,
|
|
82
|
+
rgba: `rgba(255,255,255,1)`
|
|
83
|
+
})
|
|
84
|
+
},
|
|
85
|
+
rgbaNum(rgba) {
|
|
86
|
+
let val = rgba.match(/(\d(\.\d+)?)+/g);
|
|
87
|
+
return {r: val[0],g: val[1],b: val[2],a: val[3]};
|
|
88
|
+
},
|
|
89
|
+
alternativeColor(rgba) {
|
|
90
|
+
let data = this.rgbaNum(rgba)
|
|
68
91
|
let a = this.$refs.color.getBoundingClientRect().width
|
|
69
92
|
let b = this.$refs.color.getBoundingClientRect().height
|
|
70
93
|
let c = this.$refs.circle.getBoundingClientRect().width
|
|
@@ -111,7 +134,10 @@ export default {
|
|
|
111
134
|
let hsv = rgb2hsv(this.Rgb.r,this.Rgb.g,this.Rgb.b)
|
|
112
135
|
let hsvRgb = hsv2rgb(hsv.h,this.s,this.l)
|
|
113
136
|
this.maskRgb = {r: hsvRgb.r,g: hsvRgb.g,b: hsvRgb.b,a: this.opacity}
|
|
114
|
-
this.$emit('rgba',
|
|
137
|
+
this.$emit('rgba', {
|
|
138
|
+
type: (this.type === undefined)? '': this.type,
|
|
139
|
+
rgba: `rgba(${this.maskRgb.r},${this.maskRgb.g},${this.maskRgb.b},${this.maskRgb.a})`
|
|
140
|
+
})
|
|
115
141
|
},
|
|
116
142
|
circleBegin(event) {
|
|
117
143
|
this.circleCDown = true
|
|
@@ -143,6 +169,20 @@ export default {
|
|
|
143
169
|
</script>
|
|
144
170
|
|
|
145
171
|
<style>
|
|
172
|
+
.color-but{
|
|
173
|
+
text-align: right;
|
|
174
|
+
padding-top: 10px;
|
|
175
|
+
}
|
|
176
|
+
.color-but button{
|
|
177
|
+
margin-left: 5px;
|
|
178
|
+
font-size: 12px;
|
|
179
|
+
background-color: transparent;
|
|
180
|
+
border: 1px solid #000;
|
|
181
|
+
border-radius: 3px;
|
|
182
|
+
padding: 2px 5px;
|
|
183
|
+
cursor: pointer;
|
|
184
|
+
min-width: 60px;
|
|
185
|
+
}
|
|
146
186
|
.color-pop{
|
|
147
187
|
position: absolute;
|
|
148
188
|
top: 0;
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<useOffsetPagination :pageCount="pageCount"
|
|
3
|
+
:total="total"
|
|
4
|
+
:page="page"
|
|
5
|
+
@page:change="pageChange"
|
|
6
|
+
v-slot="{
|
|
7
|
+
next,
|
|
8
|
+
prev,
|
|
9
|
+
isFirstPage,
|
|
10
|
+
isLastPage
|
|
11
|
+
}">
|
|
12
|
+
|
|
13
|
+
<div class="paginator">
|
|
14
|
+
<button :disabled="isFirstPage"
|
|
15
|
+
class="defaultButton"
|
|
16
|
+
@click="prev">
|
|
17
|
+
上一页
|
|
18
|
+
</button>
|
|
19
|
+
<div class="paginator_info">
|
|
20
|
+
<input type="input"
|
|
21
|
+
class="paginator_input"
|
|
22
|
+
v-model.number="page" />
|
|
23
|
+
<span>/</span>
|
|
24
|
+
<span>{{ pages }}</span>
|
|
25
|
+
</div>
|
|
26
|
+
<button :disabled="isLastPage"
|
|
27
|
+
class="defaultButton"
|
|
28
|
+
@click="next">
|
|
29
|
+
下一页
|
|
30
|
+
</button>
|
|
31
|
+
</div>
|
|
32
|
+
</useOffsetPagination>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<script>
|
|
36
|
+
import { defineComponent } from 'vue'
|
|
37
|
+
import useOffsetPagination from './useOffsetPagination.vue';
|
|
38
|
+
export default defineComponent({
|
|
39
|
+
name: 'zydx-pagination',
|
|
40
|
+
components: {
|
|
41
|
+
useOffsetPagination
|
|
42
|
+
},
|
|
43
|
+
inheritAttrs: false,
|
|
44
|
+
props: {
|
|
45
|
+
total: {
|
|
46
|
+
type: Number,
|
|
47
|
+
default: 0
|
|
48
|
+
},
|
|
49
|
+
pageCount: {
|
|
50
|
+
type: Number,
|
|
51
|
+
default: 10
|
|
52
|
+
},
|
|
53
|
+
currentPage: {
|
|
54
|
+
type: Number,
|
|
55
|
+
default: 1
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
data() {
|
|
59
|
+
return {
|
|
60
|
+
page: 1,
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
methods: {
|
|
64
|
+
pageChange: function (v) {
|
|
65
|
+
this.$emit('page:change', v)
|
|
66
|
+
this.page = v
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
computed: {
|
|
70
|
+
pages: function () {
|
|
71
|
+
return Math.ceil(this.total / this.pageCount)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
},
|
|
75
|
+
watch: {
|
|
76
|
+
page: {
|
|
77
|
+
handler: function (v) {
|
|
78
|
+
if (v >= this.pages) {
|
|
79
|
+
this.page = Number(String(this.page).slice(2))
|
|
80
|
+
}
|
|
81
|
+
if (v <= 1) {
|
|
82
|
+
this.page = 1
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
currentPage: {
|
|
87
|
+
handler: function (v) {
|
|
88
|
+
if (v >= this.pages) {
|
|
89
|
+
this.page = this.pages
|
|
90
|
+
} else {
|
|
91
|
+
|
|
92
|
+
this.page = v
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
immediate: true
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
})
|
|
99
|
+
</script>
|
|
100
|
+
|
|
101
|
+
<style scoped>
|
|
102
|
+
.paginator_info {
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: center;
|
|
105
|
+
gap: 5px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.paginator_input {
|
|
109
|
+
width: 40px;
|
|
110
|
+
height: 20px;
|
|
111
|
+
line-height: 18px;
|
|
112
|
+
border: 1px solid #ccc;
|
|
113
|
+
text-align: center;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.defaultButton {
|
|
117
|
+
margin: 1px;
|
|
118
|
+
width: auto;
|
|
119
|
+
min-width: 60px;
|
|
120
|
+
height: 20px;
|
|
121
|
+
background-color: #ffffff;
|
|
122
|
+
color: #000000;
|
|
123
|
+
border: #000000 1px solid;
|
|
124
|
+
line-height: 18px;
|
|
125
|
+
border-radius: 3px;
|
|
126
|
+
font-size: 12px !important;
|
|
127
|
+
text-align: center;
|
|
128
|
+
cursor: pointer;
|
|
129
|
+
padding: 0 5px;
|
|
130
|
+
font-weight: normal;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.defaultButton:disabled {
|
|
134
|
+
background-color: #ffffff;
|
|
135
|
+
color: #717171;
|
|
136
|
+
border: #717171 1px solid;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.paginator {
|
|
140
|
+
width: 100%;
|
|
141
|
+
display: flex;
|
|
142
|
+
align-items: center;
|
|
143
|
+
justify-content: center;
|
|
144
|
+
gap: 15px
|
|
145
|
+
}
|
|
146
|
+
</style>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
|
|
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
|
+
import { defineComponent } from 'vue';
|
|
16
|
+
export default defineComponent({
|
|
17
|
+
props: {
|
|
18
|
+
page: {
|
|
19
|
+
type: Number,
|
|
20
|
+
default: 1
|
|
21
|
+
},
|
|
22
|
+
total: {
|
|
23
|
+
type: Number,
|
|
24
|
+
default: 0
|
|
25
|
+
},
|
|
26
|
+
pageCount: {
|
|
27
|
+
type: Number,
|
|
28
|
+
default: 10
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
inheritAttrs: false,
|
|
32
|
+
data() {
|
|
33
|
+
return {
|
|
34
|
+
currentPage: 1
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
methods: {
|
|
38
|
+
clamp: (num, min, max) => Math.min(Math.max(num, min), max),
|
|
39
|
+
prev: function () {
|
|
40
|
+
this.currentPage = this.clamp(this.currentPage - 1, 1, this.pages)
|
|
41
|
+
},
|
|
42
|
+
next: function () {
|
|
43
|
+
this.currentPage = this.clamp(this.currentPage + 1, 1, this.pages)
|
|
44
|
+
},
|
|
45
|
+
},
|
|
46
|
+
computed: {
|
|
47
|
+
isFirstPage: function () {
|
|
48
|
+
return this.currentPage === 1
|
|
49
|
+
},
|
|
50
|
+
isLastPage: function () {
|
|
51
|
+
return this.currentPage === this.pages
|
|
52
|
+
},
|
|
53
|
+
pages: function () {
|
|
54
|
+
return Math.ceil(this.total / this.pageCount)
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
watch: {
|
|
58
|
+
page: {
|
|
59
|
+
handler: function (v) {
|
|
60
|
+
this.currentPage = this.clamp(v, 1, this.pages)
|
|
61
|
+
},
|
|
62
|
+
immediate: true
|
|
63
|
+
},
|
|
64
|
+
currentPage: {
|
|
65
|
+
handler: debounce(function (v) {
|
|
66
|
+
this.$emit('page:change', v)
|
|
67
|
+
}),
|
|
68
|
+
immediate: true
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
render() {
|
|
72
|
+
return this.$slots.default({
|
|
73
|
+
currentPage: this.currentPage,
|
|
74
|
+
next: this.next,
|
|
75
|
+
prev: this.prev,
|
|
76
|
+
isFirstPage: this.isFirstPage,
|
|
77
|
+
isLastPage: this.isLastPage
|
|
78
|
+
})
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
})
|
|
82
|
+
</script>
|
package/src/index.js
CHANGED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<template>
|
|
3
|
-
<div class="padding20">
|
|
4
|
-
<div>
|
|
5
|
-
<div>
|
|
6
|
-
<div class="fontSize20 height30 lineHeight30">代码示例：</div>
|
|
7
|
-
<div style="border: 1px solid #cccccc">
|
|
8
|
-
<div class="menu-layout-container">
|
|
9
|
-
<paginaton :pageCount="15"
|
|
10
|
-
:total="2000"
|
|
11
|
-
@page:change="handleUpdatePage"></paginaton>
|
|
12
|
-
</div>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
<el-divider content-position="right">zydx-ui</el-divider>
|
|
17
|
-
<div>
|
|
18
|
-
<div class="fontSize20 height30 lineHeight30">树形数据类型：</div>
|
|
19
|
-
<pre class="language-xml"
|
|
20
|
-
v-html="content"></pre>
|
|
21
|
-
</div>
|
|
22
|
-
<div class="margin30_0">
|
|
23
|
-
<div>
|
|
24
|
-
<div class="fontSize20 height30 lineHeight30">参数说明:</div>
|
|
25
|
-
<div>
|
|
26
|
-
<el-table :data="paramTableData"
|
|
27
|
-
style="width: 100%">
|
|
28
|
-
<el-table-column prop="field_key"
|
|
29
|
-
label="参数字段"
|
|
30
|
-
width="180">
|
|
31
|
-
</el-table-column>
|
|
32
|
-
<el-table-column prop="field_title"
|
|
33
|
-
label="参数名称"
|
|
34
|
-
width="180">
|
|
35
|
-
</el-table-column>
|
|
36
|
-
<el-table-column prop="field_value"
|
|
37
|
-
label="示例值">
|
|
38
|
-
</el-table-column>
|
|
39
|
-
<el-table-column prop="field_default"
|
|
40
|
-
label="默认值"
|
|
41
|
-
width="180">
|
|
42
|
-
</el-table-column>
|
|
43
|
-
<el-table-column prop="field_remarks"
|
|
44
|
-
label="备注">
|
|
45
|
-
</el-table-column>
|
|
46
|
-
</el-table>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</template>
|
|
52
|
-
|
|
53
|
-
<script>
|
|
54
|
-
import paginaton from '@/components/pagination/src/pagination.vue'
|
|
55
|
-
export default {
|
|
56
|
-
name: "TreeDemo",
|
|
57
|
-
components: { paginaton },
|
|
58
|
-
data() {
|
|
59
|
-
return {
|
|
60
|
-
|
|
61
|
-
content: ``,
|
|
62
|
-
// 参数说明
|
|
63
|
-
paramTableData: [
|
|
64
|
-
{
|
|
65
|
-
field_key: "pageCount",
|
|
66
|
-
field_title: "一页有多少条数据",
|
|
67
|
-
field_value: "Number",
|
|
68
|
-
field_default: "1",
|
|
69
|
-
field_remarks: ``,
|
|
70
|
-
},
|
|
71
|
-
{
|
|
72
|
-
field_key: "total",
|
|
73
|
-
field_title: "一共有多少页",
|
|
74
|
-
field_value: "Number",
|
|
75
|
-
field_default: "",
|
|
76
|
-
field_remarks: ``,
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
field_key: "page:change",
|
|
80
|
-
field_title: "回调：页码改变时触发",
|
|
81
|
-
field_value: "Function",
|
|
82
|
-
field_default: "''",
|
|
83
|
-
field_remarks: ``,
|
|
84
|
-
},
|
|
85
|
-
],
|
|
86
|
-
};
|
|
87
|
-
},
|
|
88
|
-
methods: {
|
|
89
|
-
handleUpdatePage: function (v) {
|
|
90
|
-
console.log("回调函数", v);
|
|
91
|
-
},
|
|
92
|
-
},
|
|
93
|
-
};
|
|
94
|
-
</script>
|
|
95
|
-
|
|
96
|
-
<style scoped>
|
|
97
|
-
.menu-layout-container {
|
|
98
|
-
width: 320px;
|
|
99
|
-
height: 600px;
|
|
100
|
-
margin: 0 auto;
|
|
101
|
-
}
|
|
102
|
-
</style>
|