zydx-plus 1.30.147 → 1.30.149

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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "zydx-plus",
3
- "version": "1.30.147",
3
+ "version": "1.30.149",
4
4
  "description": "Vue.js",
5
5
  "main": "src/index.js",
6
6
  "files": [
@@ -80,6 +80,10 @@ export default {
80
80
  }
81
81
  },
82
82
  props: {
83
+ data: {
84
+ type: Object,
85
+ default: () => {}
86
+ },
83
87
  width: {
84
88
  type: Number,
85
89
  default: 800
@@ -90,6 +94,14 @@ export default {
90
94
  }
91
95
  },
92
96
  emits: ['save'],
97
+ watch: {
98
+ data: {
99
+ handler(val) {
100
+ this.canvas.loadFromJSON(val)
101
+ },
102
+ deep: true
103
+ }
104
+ },
93
105
  mounted() {
94
106
  this.init()
95
107
  window.addEventListener('keydown', this.handleKeyEvent)
@@ -123,7 +135,7 @@ export default {
123
135
  height: this.height,
124
136
  });
125
137
  this.canvas.selectionColor = "rgba(255,255,255,0)";
126
- // this.canvas.loadFromJSON(v)
138
+ this.canvas.loadFromJSON(this.data)
127
139
  },
128
140
  // 画笔
129
141
  brush() {
@@ -319,6 +331,7 @@ export default {
319
331
  this.canvas.add(this.textbox)
320
332
  },
321
333
  save() {
334
+ console.log(this.canvas.toJSON())
322
335
  this.$emit('save', this.canvas.toJSON())
323
336
  },
324
337
  clear() {
@@ -8,7 +8,7 @@ render(divNode, document.body)
8
8
  const container = divNode.el
9
9
 
10
10
  // 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
11
- const Confirm = ({ type, url ,title,radioArr,submitText, promptContent, middle, cancelShow, inputArr }) => {
11
+ const Confirm = ({ type, url ,title,radioArr,checkboxArr,submitText, promptContent, middle, cancelShow, inputArr }) => {
12
12
  // 返回 Promise 对象
13
13
  return new Promise((resolve, reject) => {
14
14
  // 2. 点击确认按钮,触发resolve同时销毁组件
@@ -30,6 +30,13 @@ const Confirm = ({ type, url ,title,radioArr,submitText, promptContent, middle,
30
30
  }
31
31
  }
32
32
  }
33
+ if(type === 'checkbox') {
34
+ for(let i=0; i< checkboxArr.length; i++) {
35
+ if(checkboxArr[i].checked) {
36
+ val.push(checkboxArr[i].value)
37
+ }
38
+ }
39
+ }
33
40
  render(null, container)
34
41
  resolve(val)
35
42
  }
@@ -39,7 +46,7 @@ const Confirm = ({ type, url ,title,radioArr,submitText, promptContent, middle,
39
46
  reject('点击取消')
40
47
  }
41
48
  // 1. 创建 XtxConfirm 组件
42
- const VNode = createVNode(XtxConfirm, { type, url ,title, submitText, promptContent,radioArr, middle, cancelShow, inputArr, submit, cancel })
49
+ const VNode = createVNode(XtxConfirm, { type, url ,title, submitText, promptContent,radioArr,checkboxArr, middle, cancelShow, inputArr, submit, cancel })
43
50
  render(VNode, container)
44
51
  })
45
52
  }
@@ -21,6 +21,17 @@
21
21
  </label>
22
22
  </div>
23
23
  </div>
24
+ <div class="check" v-if="type === 'checkbox'">
25
+ <div class="check-cont">
26
+ <div class="check-li" v-for="(item,index) in checkboxArr" :key="index">
27
+ <label>
28
+ <input type="checkbox" :value="item.value" :checked="item.checked"
29
+ @change="checkboxTao(index)"/>
30
+ <span>{{ item.label }}</span>
31
+ </label>
32
+ </div>
33
+ </div>
34
+ </div>
24
35
  <div class="tip-img" v-if="type === 'input'">
25
36
  <div class="tip-input" v-for="(item,index) in inputArr" :key="index">
26
37
  <span v-if="item.name"><em v-html="item.name"></em><i v-if="item.required">*</i></span>
@@ -118,6 +129,10 @@ export default {
118
129
  type: Array,
119
130
  default: []
120
131
  },
132
+ checkboxArr: { // 单选数据
133
+ type: Array,
134
+ default: []
135
+ },
121
136
  submitText: { // 确认按钮
122
137
  type: String,
123
138
  default: '确认'
@@ -135,6 +150,9 @@ export default {
135
150
  }
136
151
  },
137
152
  methods: {
153
+ checkboxTao(index) {
154
+ this.checkboxArr[index].checked = !this.checkboxArr[index].checked
155
+ },
138
156
  fileTap(event,index) {
139
157
  let file = event.target.files[0]
140
158
  this.fileName = file.name
@@ -1,266 +1,329 @@
1
1
  @keyframes linkDown {
2
- 0% {
3
- opacity: 0;
4
- }
5
- 100% {
6
- opacity: 1;
7
- }
8
- }
9
- .tip-popupWindowSearch{
10
- position: fixed;
11
- top: 0;
12
- left: 0;
13
- right: 0;
14
- bottom: 0;
15
- background-color: rgba(0, 0, 0, 0.2);
16
- z-index: 2000;
17
- display: flex;
18
- align-items: center;
2
+ 0% {
3
+ opacity: 0;
4
+ }
5
+ 100% {
6
+ opacity: 1;
7
+ }
8
+ }
9
+
10
+ .tip-popupWindowSearch {
11
+ position: fixed;
12
+ top: 0;
13
+ left: 0;
14
+ right: 0;
15
+ bottom: 0;
16
+ background-color: rgba(0, 0, 0, 0.2);
17
+ z-index: 2000;
18
+ display: flex;
19
+ align-items: center;
19
20
  }
21
+
20
22
  .tip-box {
21
- width: 480px;
22
- padding: 40px 40px;
23
- background-color: white;
24
- border-radius: 5px;
25
- border: 5px rgba(0, 0, 0, .1) solid;
26
- margin: 0 auto;
27
- box-sizing: border-box;
28
- animation: linkDown .3s linear forwards;
29
- opacity: 0;
23
+ width: 480px;
24
+ padding: 40px 40px;
25
+ background-color: white;
26
+ border-radius: 5px;
27
+ border: 5px rgba(0, 0, 0, .1) solid;
28
+ margin: 0 auto;
29
+ box-sizing: border-box;
30
+ animation: linkDown .3s linear forwards;
31
+ opacity: 0;
30
32
  }
31
- .tip-boxContent{
32
- max-height: 600px;
33
+
34
+ .tip-boxContent {
35
+ max-height: 600px;
33
36
  }
34
- .tip-boxContent:hover{
35
- cursor:default
37
+
38
+ .tip-boxContent:hover {
39
+ cursor: default
36
40
  }
37
41
 
38
42
  .tip-closeBtn {
39
- position: absolute;
40
- top: 10px;
41
- right: 10px;
42
- font-size: 28px;
43
- color: #767676;
43
+ position: absolute;
44
+ top: 10px;
45
+ right: 10px;
46
+ font-size: 28px;
47
+ color: #767676;
44
48
  }
49
+
45
50
  .tip-title {
46
- margin-bottom: 20px;
47
- font-size: 18px;
48
- font-weight: 700;
49
- flex-shrink: 0;
50
- display: flex;
51
- align-items: flex-end;
52
- justify-content: center;
53
- flex-wrap: wrap;
54
- overflow: hidden;
51
+ margin-bottom: 20px;
52
+ font-size: 18px;
53
+ font-weight: 700;
54
+ flex-shrink: 0;
55
+ display: flex;
56
+ align-items: flex-end;
57
+ justify-content: center;
58
+ flex-wrap: wrap;
59
+ overflow: hidden;
55
60
  }
61
+
56
62
  .tip-title1 {
57
- font-size: 16px;
58
- text-align: left;
63
+ font-size: 16px;
64
+ text-align: left;
59
65
  }
60
- .tip-title2{
61
- font-size: 16px;
62
- text-align: center;
63
- line-height: 30px;
66
+
67
+ .tip-title2 {
68
+ font-size: 16px;
69
+ text-align: center;
70
+ line-height: 30px;
64
71
  }
65
72
 
66
73
  .tip-btnBox {
67
- margin-top: 20px;
68
- flex-shrink: 0;
69
- display: flex;
70
- justify-content: center;
71
- align-items: flex-start;
72
- font-size: 12px;
73
- }
74
-
75
- .tip-btnBox>div {
76
- width: 60px;
77
- height: 22px;
78
- line-height: 22px;
79
- margin-right: 10px;
80
- border-radius: 3px;
81
- border: 1px solid #000000;
82
- cursor: pointer;
83
- text-align: center;
84
- }
85
- .tip-quesTitle{
86
- padding-left: 2px;
87
- margin-left: -10px!important;
88
- }
89
- .tap-p{
90
- text-align: center;
91
- }
92
- .tip-img{
93
- width: 100%;
94
- display: inline-block;
95
- }
96
- .tip-img>img{
97
- width: 100%;
98
- }
99
- .tip-input{
100
- display: inline-block;
101
- padding-bottom: 15px;
102
- }
103
- .tip-input:last-child{
104
- padding-bottom: 0;
105
- }
106
- .tip-input>span{
107
- font-size: 16px;
108
- font-weight: bold;
109
- display: inline-block;
110
- line-height: 30px;
111
- padding-right: 10px;
112
- text-align: right;
113
- float: left;
114
- position: relative;
115
- }
116
- .tip-input>span>em{
117
- font-style: normal;
118
- }
119
- .tip-input>span>i{
120
- color: #dc231d;
121
- font-style: normal;
122
- position: absolute;
123
- top: 0;
124
- left: -10px;
125
- z-index: 1;
126
- font-size: 14px;
127
- }
128
- .tip-input input{
129
- width: 211px;
130
- height: 32px;
131
- box-sizing: border-box;
132
- font-size: 16px;
133
- outline: none;
134
- padding-left: 10px;
135
- border: 1px solid #ccc;
136
- border-radius: 3px;
137
- box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
138
- }
139
- .tip-input>select{
140
- width: 210px;
141
- height: 30px;
142
- box-sizing: border-box;
143
- font-size: 16px;
144
- outline: none;
145
- padding-left: 10px;
146
- border: 1px solid #ccc;
147
- }
148
- .text{
149
- display: inline-block;
150
- font-size: 16px;
151
- width: 210px;
152
- text-align: left;
153
- }
154
- .cal{
155
- display: inline-block;
156
- position: relative;
157
- }
158
- .ph-code{
159
- position: relative;
160
- display: inline-block;
161
- }
162
- .ph-code>button{
163
- position: absolute;
164
- top: 0;
165
- right: 0;
166
- z-index: 1;
167
- margin-left: 5px;
168
- font-size: 12px;
169
- background-color: transparent;
170
- padding: 2px 5px;
171
- cursor: pointer;
172
- width: 75px;
173
- height: 32px;
174
- line-height: 30px;
175
- border: 0;
176
- border-left: 1px solid #ccc;
177
- }
178
- .radio-list{
179
- padding: 10px 20px;
180
- text-align: left;
181
- font-size: 16px;
182
- position: relative;
183
- }
184
- .radio-list span{
185
- padding-left: 22px;
186
- }
187
- .radio-list input{
188
- width: 16px;
189
- height: 16px;
190
- position: absolute;
191
- top: 12px;
192
- left: 20px;
193
- z-index: 1;
194
- }
195
- .number-input{
196
- width: 211px;
197
- height: 32px;
198
- box-sizing: border-box;
199
- font-size: 16px;
200
- outline: none;
201
- border: 1px solid #ccc;
202
- border-radius: 3px;
203
- box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
204
- overflow: hidden;
205
- }
206
- .number-input>input{
207
- border: 0 !important;
208
- box-shadow: none !important;
209
- height: 30px !important;
210
- width: 240px !important;
211
- }
212
- .file-cont{
213
- display: inline-block;
214
- position: relative;
74
+ margin-top: 20px;
75
+ flex-shrink: 0;
76
+ display: flex;
77
+ justify-content: center;
78
+ align-items: flex-start;
79
+ font-size: 12px;
80
+ }
81
+
82
+ .tip-btnBox > div {
83
+ width: 60px;
84
+ height: 22px;
85
+ line-height: 22px;
86
+ margin-right: 10px;
87
+ border-radius: 3px;
88
+ border: 1px solid #000000;
89
+ cursor: pointer;
90
+ text-align: center;
91
+ }
92
+
93
+ .tip-quesTitle {
94
+ padding-left: 2px;
95
+ margin-left: -10px !important;
96
+ }
97
+
98
+ .tap-p {
99
+ text-align: center;
100
+ }
101
+
102
+ .tip-img {
103
+ width: 100%;
104
+ display: inline-block;
105
+ }
106
+
107
+ .tip-img > img {
108
+ width: 100%;
109
+ }
110
+
111
+ .tip-input {
112
+ display: inline-block;
113
+ padding-bottom: 15px;
114
+ }
115
+
116
+ .tip-input:last-child {
117
+ padding-bottom: 0;
118
+ }
119
+
120
+ .tip-input > span {
121
+ font-size: 16px;
122
+ font-weight: bold;
123
+ display: inline-block;
124
+ line-height: 30px;
125
+ padding-right: 10px;
126
+ text-align: right;
127
+ float: left;
128
+ position: relative;
129
+ }
130
+
131
+ .tip-input > span > em {
132
+ font-style: normal;
133
+ }
134
+
135
+ .tip-input > span > i {
136
+ color: #dc231d;
137
+ font-style: normal;
138
+ position: absolute;
139
+ top: 0;
140
+ left: -10px;
141
+ z-index: 1;
142
+ font-size: 14px;
143
+ }
144
+
145
+ .tip-input input {
146
+ width: 211px;
147
+ height: 32px;
148
+ box-sizing: border-box;
149
+ font-size: 16px;
150
+ outline: none;
151
+ padding-left: 10px;
152
+ border: 1px solid #ccc;
153
+ border-radius: 3px;
154
+ box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
155
+ }
156
+
157
+ .tip-input > select {
158
+ width: 210px;
159
+ height: 30px;
160
+ box-sizing: border-box;
161
+ font-size: 16px;
162
+ outline: none;
163
+ padding-left: 10px;
164
+ border: 1px solid #ccc;
165
+ }
166
+
167
+ .text {
168
+ display: inline-block;
169
+ font-size: 16px;
170
+ width: 210px;
171
+ text-align: left;
215
172
  }
173
+
174
+ .cal {
175
+ display: inline-block;
176
+ position: relative;
177
+ }
178
+
179
+ .ph-code {
180
+ position: relative;
181
+ display: inline-block;
182
+ }
183
+
184
+ .ph-code > button {
185
+ position: absolute;
186
+ top: 0;
187
+ right: 0;
188
+ z-index: 1;
189
+ margin-left: 5px;
190
+ font-size: 12px;
191
+ background-color: transparent;
192
+ padding: 2px 5px;
193
+ cursor: pointer;
194
+ width: 75px;
195
+ height: 32px;
196
+ line-height: 30px;
197
+ border: 0;
198
+ border-left: 1px solid #ccc;
199
+ }
200
+
201
+ .radio-list {
202
+ padding: 10px 20px;
203
+ text-align: left;
204
+ font-size: 16px;
205
+ position: relative;
206
+ }
207
+
208
+ .radio-list span {
209
+ padding-left: 22px;
210
+ }
211
+
212
+ .radio-list input {
213
+ width: 16px;
214
+ height: 16px;
215
+ position: absolute;
216
+ top: 12px;
217
+ left: 20px;
218
+ z-index: 1;
219
+ }
220
+
221
+ .number-input {
222
+ width: 211px;
223
+ height: 32px;
224
+ box-sizing: border-box;
225
+ font-size: 16px;
226
+ outline: none;
227
+ border: 1px solid #ccc;
228
+ border-radius: 3px;
229
+ box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
230
+ overflow: hidden;
231
+ }
232
+
233
+ .number-input > input {
234
+ border: 0 !important;
235
+ box-shadow: none !important;
236
+ height: 30px !important;
237
+ width: 240px !important;
238
+ }
239
+
240
+ .file-cont {
241
+ display: inline-block;
242
+ position: relative;
243
+ }
244
+
216
245
  .file-cont label {
217
- position: absolute;
218
- top: 0;
219
- right: 0;
220
- z-index: 1;
221
- padding-top: 6px;
222
- }
223
- .file{
224
- display: none;
225
- }
226
- .file-cont>em{
227
- display: inline-block;
228
- font-style: normal;
229
- width: 211px;
230
- height: 32px;
231
- box-sizing: border-box;
232
- font-size: 16px;
233
- outline: none;
234
- padding-left: 10px;
235
- border-radius: 3px;
236
- text-align: left;
237
- line-height: 32px;
238
- padding-right: 65px;
239
- overflow: hidden;
240
- text-overflow: ellipsis;
241
- white-space: nowrap;
242
- word-break: break-all;
243
- }
244
- .but{
245
- margin-left: 5px;
246
- font-size: 12px;
247
- background-color: transparent;
248
- border: 1px solid #000;
249
- border-radius: 3px;
250
- padding: 2px 5px;
251
- cursor: pointer;
252
- min-width: 60px;
253
- display: inline-block;
254
- }
255
- .input-name{
256
- display: inline-block;
257
- position: relative;
258
- }
259
- .input-name b{
260
- position: absolute;
261
- top: 5px;
262
- right: 10px;
263
- z-index: 1;
264
- font-size: 16px;
265
- font-weight: normal;
246
+ position: absolute;
247
+ top: 0;
248
+ right: 0;
249
+ z-index: 1;
250
+ padding-top: 6px;
251
+ }
252
+
253
+ .file {
254
+ display: none;
255
+ }
256
+
257
+ .file-cont > em {
258
+ display: inline-block;
259
+ font-style: normal;
260
+ width: 211px;
261
+ height: 32px;
262
+ box-sizing: border-box;
263
+ font-size: 16px;
264
+ outline: none;
265
+ padding-left: 10px;
266
+ border-radius: 3px;
267
+ text-align: left;
268
+ line-height: 32px;
269
+ padding-right: 65px;
270
+ overflow: hidden;
271
+ text-overflow: ellipsis;
272
+ white-space: nowrap;
273
+ word-break: break-all;
274
+ }
275
+
276
+ .but {
277
+ margin-left: 5px;
278
+ font-size: 12px;
279
+ background-color: transparent;
280
+ border: 1px solid #000;
281
+ border-radius: 3px;
282
+ padding: 2px 5px;
283
+ cursor: pointer;
284
+ min-width: 60px;
285
+ display: inline-block;
286
+ }
287
+
288
+ .input-name {
289
+ display: inline-block;
290
+ position: relative;
291
+ }
292
+
293
+ .input-name b {
294
+ position: absolute;
295
+ top: 5px;
296
+ right: 10px;
297
+ z-index: 1;
298
+ font-size: 16px;
299
+ font-weight: normal;
300
+ }
301
+
302
+ .check {
303
+ text-align: center;
304
+ }
305
+
306
+ .check-cont {
307
+ display: inline-block;
308
+ }
309
+
310
+ .check-li {
311
+ display: inline-block;
312
+ margin-right: 15px;
313
+ position: relative;
314
+ }
315
+ .check-li:last-child{
316
+ margin-right: 0;
317
+ }
318
+ .check-li span{
319
+ display: inline-block;
320
+ padding-left: 20px;
321
+ }
322
+ .check-li input{
323
+ width: 14px;
324
+ height: 14px;
325
+ position: absolute;
326
+ top: 3px;
327
+ left: 0;
328
+ z-index: 1;
266
329
  }
package/src/index.js CHANGED
@@ -71,7 +71,7 @@ function install(app) {
71
71
  }
72
72
 
73
73
  export default {
74
- version: '1.30.147',
74
+ version: '1.30.149',
75
75
  install,
76
76
  Calendar,
77
77
  Message,