component-library-for-vue 1.2.0 → 2.0.0
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/README.md +328 -39
- package/es/index/index.js +2 -1
- package/es/index/style.css +387 -0
- package/es/pc-button/index.js +1 -0
- package/es/pc-button/style.css +300 -0
- package/es/pc-dialog/index.js +1 -0
- package/es/pc-dialog/style.css +370 -0
- package/es/pc-waterfall/index.js +2 -0
- package/es/pc-waterfall/style.css +17 -0
- package/es/pc-watermark/index.js +1 -0
- package/es/style/style.css +242 -0
- package/libs/index/index.js +2 -1
- package/libs/index/index.js.LICENSE.txt +1 -0
- package/libs/index/style.css +387 -0
- package/libs/pc-button/index.js +1 -0
- package/libs/pc-button/style.css +300 -0
- package/libs/pc-dialog/index.js +1 -0
- package/libs/pc-dialog/style.css +370 -0
- package/libs/pc-waterfall/index.js +2 -0
- package/libs/pc-waterfall/index.js.LICENSE.txt +1 -0
- package/libs/pc-waterfall/style.css +17 -0
- package/libs/pc-watermark/index.js +1 -0
- package/libs/style/style.css +242 -0
- package/package.json +1 -1
- package/es/waterfall/index.js +0 -2
- package/es/watermark/index.js +0 -1
- package/libs/waterfall/index.js +0 -2
- package/libs/watermark/index.js +0 -1
- /package/es/{waterfall → index}/index.js.LICENSE.txt +0 -0
- /package/{libs/waterfall → es/pc-waterfall}/index.js.LICENSE.txt +0 -0
package/README.md
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
# component-library-for-vue
|
|
2
|
-
|
|
2
|
+
|
|
3
|
+
自定义的ui组件库,目前支持水印组件`PcWaterMark`、瀑布流组件`PcWaterFall`、按钮组件`PcButton`、弹窗组件`PcDialog`
|
|
3
4
|
|
|
4
5
|
# 安装
|
|
5
6
|
|
|
@@ -7,14 +8,30 @@
|
|
|
7
8
|
npm install install component-library-for-vue
|
|
8
9
|
```
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
## 全量使用
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
import UI from 'component-library-for-vue';
|
|
15
|
+
import "component-library-for-vue/es/style/style.css";
|
|
16
|
+
app.use(UI)
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## 单独使用
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
import PcWaterMark from "component-library-for-vue/es/pc-waterfall/index.js";
|
|
23
|
+
import "component-library-for-vue/es/PcWaterMark/style.css";
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
# PcWaterMark 水印组件
|
|
11
27
|
|
|
12
28
|
一个基于 Canvas 实现的图片水印组件,可以在图片上绘制可重复的文字水印,并支持旋转角度、间距等配置。
|
|
13
29
|
|
|
14
30
|
适用于:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
31
|
+
|
|
32
|
+
- 图片版权标识
|
|
33
|
+
- 用户信息水印
|
|
34
|
+
- 防截图水印
|
|
18
35
|
|
|
19
36
|
---
|
|
20
37
|
|
|
@@ -22,7 +39,7 @@ npm install install component-library-for-vue
|
|
|
22
39
|
|
|
23
40
|
```vue
|
|
24
41
|
<template>
|
|
25
|
-
<
|
|
42
|
+
<PcWaterMark
|
|
26
43
|
:width="400"
|
|
27
44
|
:height="300"
|
|
28
45
|
src="https://example.com/image.jpg"
|
|
@@ -34,35 +51,25 @@ npm install install component-library-for-vue
|
|
|
34
51
|
:gapY="40"
|
|
35
52
|
/>
|
|
36
53
|
</template>
|
|
37
|
-
|
|
38
|
-
<script>
|
|
39
|
-
import {WaterMark} from 'component-library-for-vue'
|
|
40
|
-
|
|
41
|
-
export default {
|
|
42
|
-
components: {
|
|
43
|
-
WaterMark
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
</script>
|
|
47
54
|
```
|
|
48
55
|
|
|
49
56
|
## Props
|
|
50
57
|
|
|
51
|
-
| 属性
|
|
52
|
-
| -------- |
|
|
53
|
-
| width | canvas 宽度
|
|
54
|
-
| height | canvas 高度
|
|
55
|
-
| src | 图片地址
|
|
56
|
-
| text | 水印文字内容
|
|
57
|
-
| fontSize | 水印文字大小
|
|
58
|
-
| color | 水印文字颜色
|
|
59
|
-
| deg | 水印文字旋转角度
|
|
60
|
-
| gapX | 水印文字水平间距
|
|
61
|
-
| gapY | 水印文字垂直间距
|
|
58
|
+
| 属性 | 说明 | 类型 | 是否必填 | 默认值 |
|
|
59
|
+
| -------- | ---------------- | ------ | -------- | ------ |
|
|
60
|
+
| width | canvas 宽度 | Number | 否 | 300 |
|
|
61
|
+
| height | canvas 高度 | Number | 否 | 150 |
|
|
62
|
+
| src | 图片地址 | String | 是 | - |
|
|
63
|
+
| text | 水印文字内容 | String | 否 | '' |
|
|
64
|
+
| fontSize | 水印文字大小 | Number | 否 | 16 |
|
|
65
|
+
| color | 水印文字颜色 | String | 否 | #000 |
|
|
66
|
+
| deg | 水印文字旋转角度 | Number | 否 | 45 |
|
|
67
|
+
| gapX | 水印文字水平间距 | Number | 否 | 20 |
|
|
68
|
+
| gapY | 水印文字垂直间距 | Number | 否 | 20 |
|
|
62
69
|
|
|
63
70
|
---
|
|
64
71
|
|
|
65
|
-
#
|
|
72
|
+
# PcWaterFall 瀑布流组件
|
|
66
73
|
|
|
67
74
|
一个基于 Vue 的瀑布流布局组件,支持动态高度内容。
|
|
68
75
|
|
|
@@ -72,31 +79,313 @@ export default {
|
|
|
72
79
|
|
|
73
80
|
```vue
|
|
74
81
|
<template>
|
|
75
|
-
<
|
|
82
|
+
<PcWaterFall :list="list" :columns="3">
|
|
76
83
|
<template #item="{ item }">
|
|
77
84
|
<div class="card">
|
|
78
85
|
{{ item.title }}
|
|
79
86
|
</div>
|
|
80
87
|
</template>
|
|
81
|
-
</
|
|
88
|
+
</PcWaterFall>
|
|
82
89
|
</template>
|
|
83
90
|
```
|
|
84
91
|
|
|
85
92
|
## Props
|
|
86
93
|
|
|
87
|
-
| 属性
|
|
88
|
-
|
|
|
89
|
-
| list | 数据源 | Array | []
|
|
90
|
-
| columns | 列数
|
|
91
|
-
| gapX | 列间距 | Number | 20
|
|
92
|
-
| gapY | 行间距 | Number | 20
|
|
94
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
95
|
+
| ------- | ------ | ------ | ------ |
|
|
96
|
+
| list | 数据源 | Array | [] |
|
|
97
|
+
| columns | 列数 | Number | 2 |
|
|
98
|
+
| gapX | 列间距 | Number | 20 |
|
|
99
|
+
| gapY | 行间距 | Number | 20 |
|
|
93
100
|
|
|
94
101
|
## Slots
|
|
95
102
|
|
|
96
|
-
| 插槽
|
|
97
|
-
|
|
|
103
|
+
| 插槽 | 说明 | 参数 |
|
|
104
|
+
| ------ | -------- | ---------- |
|
|
98
105
|
| header | 顶部内容 | - |
|
|
99
106
|
| item | 列表内容 | `{ item }` |
|
|
100
|
-
| empty | 空状态
|
|
107
|
+
| empty | 空状态 | - |
|
|
101
108
|
| footer | 底部内容 | - |
|
|
102
109
|
|
|
110
|
+
# PcButton 按钮
|
|
111
|
+
|
|
112
|
+
常用的按钮组件,用于触发操作。
|
|
113
|
+
|
|
114
|
+
支持 **primary / hollow / text** 三种类型,并支持 `loading` 与 `disabled` 状态。
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## 基础用法
|
|
119
|
+
|
|
120
|
+
```vue
|
|
121
|
+
<template>
|
|
122
|
+
<PcButton text="提交" @click="handleClick" />
|
|
123
|
+
</template>
|
|
124
|
+
|
|
125
|
+
<script>
|
|
126
|
+
export default {
|
|
127
|
+
methods: {
|
|
128
|
+
handleClick() {
|
|
129
|
+
console.log('点击按钮');
|
|
130
|
+
},
|
|
131
|
+
},
|
|
132
|
+
};
|
|
133
|
+
</script>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## 按钮类型
|
|
137
|
+
|
|
138
|
+
- `primary`:主按钮
|
|
139
|
+
- `hollow`:空心按钮
|
|
140
|
+
- `text`: 文本按钮
|
|
141
|
+
|
|
142
|
+
```vue
|
|
143
|
+
<template>
|
|
144
|
+
<PcButton text="Primary按钮" type="primary" />
|
|
145
|
+
|
|
146
|
+
<PcButton text="Hollow按钮" type="hollow" />
|
|
147
|
+
|
|
148
|
+
<PcButton text="Text按钮" type="text" />
|
|
149
|
+
</template>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## Loading 状态
|
|
153
|
+
|
|
154
|
+
当按钮处于加载状态时,会显示 loading 图标,并禁止点击。
|
|
155
|
+
|
|
156
|
+
```
|
|
157
|
+
<template>
|
|
158
|
+
<PcButton text="加载中" loading />
|
|
159
|
+
</template>
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## Disabled 状态
|
|
163
|
+
|
|
164
|
+
禁用按钮,按钮不可点击。
|
|
165
|
+
|
|
166
|
+
```
|
|
167
|
+
<template>
|
|
168
|
+
<PcButton text="禁用按钮" disabled />
|
|
169
|
+
</template>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
## Props
|
|
173
|
+
|
|
174
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
175
|
+
| -------- | ----------------------------------- | -------- | -------- |
|
|
176
|
+
| type | 按钮类型(primary / hollow / text) | string | primary |
|
|
177
|
+
| text | 按钮文本 | string | — |
|
|
178
|
+
| loading | 是否为加载状态 | boolean | false |
|
|
179
|
+
| disabled | 是否禁用 | boolean | false |
|
|
180
|
+
| click | 点击回调函数 | function | () => {} |
|
|
181
|
+
|
|
182
|
+
## 注意事项
|
|
183
|
+
|
|
184
|
+
- 当 `loading` 或 `disabled` 为 `true` 时,按钮不会触发 `click` 事件。
|
|
185
|
+
|
|
186
|
+
# PcDialog
|
|
187
|
+
|
|
188
|
+
`PcDialog` 是一个基础的弹窗组件,用于展示提示信息、表单内容或自定义内容区域。
|
|
189
|
+
支持 **遮罩层、标题、副标题、自定义内容、底部按钮、ESC关闭、v-model控制显示状态**。
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
## 基本使用
|
|
194
|
+
|
|
195
|
+
```vue
|
|
196
|
+
<template>
|
|
197
|
+
<div>
|
|
198
|
+
<PcButton text="打开弹窗" @click="visible = true" />
|
|
199
|
+
|
|
200
|
+
<PcDialog v-model="visible" title="标题" subTitle="副标题" :buttons="buttons">
|
|
201
|
+
<template #default>
|
|
202
|
+
<div>这里是弹窗内容</div>
|
|
203
|
+
</template>
|
|
204
|
+
</PcDialog>
|
|
205
|
+
</div>
|
|
206
|
+
</template>
|
|
207
|
+
|
|
208
|
+
<script>
|
|
209
|
+
export default {
|
|
210
|
+
data() {
|
|
211
|
+
return {
|
|
212
|
+
visible: false,
|
|
213
|
+
buttons: [
|
|
214
|
+
{
|
|
215
|
+
text: '取消',
|
|
216
|
+
type: 'default',
|
|
217
|
+
click: () => {
|
|
218
|
+
this.visible = false;
|
|
219
|
+
},
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
text: '确定',
|
|
223
|
+
type: 'primary',
|
|
224
|
+
click: () => {
|
|
225
|
+
console.log('confirm');
|
|
226
|
+
},
|
|
227
|
+
},
|
|
228
|
+
],
|
|
229
|
+
};
|
|
230
|
+
},
|
|
231
|
+
};
|
|
232
|
+
</script>
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
---
|
|
236
|
+
|
|
237
|
+
## v-model
|
|
238
|
+
|
|
239
|
+
组件使用 `visible` 作为双向绑定属性。
|
|
240
|
+
|
|
241
|
+
```vue
|
|
242
|
+
<PcDialog v-model:visible="visible" />
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
247
|
+
## Props
|
|
248
|
+
|
|
249
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
250
|
+
| ---------- | -------------- | ------- | ------ |
|
|
251
|
+
| visible | 是否显示弹窗 | Boolean | true |
|
|
252
|
+
| title | 主标题 | String | '' |
|
|
253
|
+
| subTitle | 副标题 | String | '' |
|
|
254
|
+
| width | 弹窗宽度(px) | Number | 400 |
|
|
255
|
+
| ifShowMask | 是否显示遮罩层 | Boolean | true |
|
|
256
|
+
| buttons | 底部按钮配置 | Array | [] |
|
|
257
|
+
|
|
258
|
+
---
|
|
259
|
+
|
|
260
|
+
## buttons 配置
|
|
261
|
+
|
|
262
|
+
`buttons` 为按钮配置数组,会自动渲染 `PcButton`。
|
|
263
|
+
|
|
264
|
+
示例:
|
|
265
|
+
|
|
266
|
+
```js
|
|
267
|
+
buttons: [
|
|
268
|
+
{
|
|
269
|
+
text: '取消',
|
|
270
|
+
type: 'default',
|
|
271
|
+
click: () => {},
|
|
272
|
+
},
|
|
273
|
+
{
|
|
274
|
+
text: '确定',
|
|
275
|
+
type: 'primary',
|
|
276
|
+
click: () => {},
|
|
277
|
+
},
|
|
278
|
+
];
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
每一项会通过 `v-bind` 透传到 `PcButton`。
|
|
282
|
+
|
|
283
|
+
---
|
|
284
|
+
|
|
285
|
+
## Events
|
|
286
|
+
|
|
287
|
+
| 事件名 | 说明 |
|
|
288
|
+
| ------ | ------------------------- |
|
|
289
|
+
| close | 点击关闭按钮或 ESC 时触发 |
|
|
290
|
+
|
|
291
|
+
示例:
|
|
292
|
+
|
|
293
|
+
```vue
|
|
294
|
+
<PcDialog v-model="visible" @close="handleClose" />
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
---
|
|
298
|
+
|
|
299
|
+
## Slots
|
|
300
|
+
|
|
301
|
+
| 名称 | 说明 |
|
|
302
|
+
| ------- | ------------ |
|
|
303
|
+
| default | 弹窗主体内容 |
|
|
304
|
+
|
|
305
|
+
示例:
|
|
306
|
+
|
|
307
|
+
```vue
|
|
308
|
+
<PcDialog v-model="visible">
|
|
309
|
+
<template #default>
|
|
310
|
+
<div>自定义内容</div>
|
|
311
|
+
</template>
|
|
312
|
+
</PcDialog>
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
---
|
|
316
|
+
|
|
317
|
+
## 特性
|
|
318
|
+
|
|
319
|
+
### 1 自动挂载到 body
|
|
320
|
+
|
|
321
|
+
组件在 `mounted` 时会自动挂载到 `document.body`:
|
|
322
|
+
|
|
323
|
+
```js
|
|
324
|
+
document.body.prepend(this.$el);
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
避免被父元素 `overflow:hidden` 或 `z-index` 影响。
|
|
328
|
+
|
|
329
|
+
---
|
|
330
|
+
|
|
331
|
+
### 2 自动禁止页面滚动
|
|
332
|
+
|
|
333
|
+
弹窗打开时:
|
|
334
|
+
|
|
335
|
+
```
|
|
336
|
+
document.body.style.overflow = 'hidden'
|
|
337
|
+
```
|
|
338
|
+
|
|
339
|
+
关闭时恢复。
|
|
340
|
+
|
|
341
|
+
---
|
|
342
|
+
|
|
343
|
+
### 3 支持 ESC 关闭
|
|
344
|
+
|
|
345
|
+
监听 `keydown` 事件:
|
|
346
|
+
|
|
347
|
+
```
|
|
348
|
+
Esc
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
即可关闭弹窗。
|
|
352
|
+
|
|
353
|
+
---
|
|
354
|
+
|
|
355
|
+
## 组件结构
|
|
356
|
+
|
|
357
|
+
```
|
|
358
|
+
PcDialog
|
|
359
|
+
├─ Header
|
|
360
|
+
│ ├─ Title
|
|
361
|
+
│ ├─ SubTitle
|
|
362
|
+
│ └─ Close Icon
|
|
363
|
+
├─ Main (slot)
|
|
364
|
+
└─ Footer (buttons)
|
|
365
|
+
```
|
|
366
|
+
|
|
367
|
+
---
|
|
368
|
+
|
|
369
|
+
## 示例截图结构
|
|
370
|
+
|
|
371
|
+
```
|
|
372
|
+
+---------------------------+
|
|
373
|
+
| Title [X] |
|
|
374
|
+
| SubTitle |
|
|
375
|
+
|---------------------------|
|
|
376
|
+
| |
|
|
377
|
+
| content |
|
|
378
|
+
| |
|
|
379
|
+
|---------------------------|
|
|
380
|
+
| Cancel Confirm |
|
|
381
|
+
+---------------------------+
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
---
|
|
385
|
+
|
|
386
|
+
## 注意事项
|
|
387
|
+
|
|
388
|
+
1️⃣ `visible` 推荐通过 `v-model` 控制
|
|
389
|
+
2️⃣ `buttons` 会自动渲染 `PcButton`
|
|
390
|
+
3️⃣ 如果不传 `default slot`,内容区域不会显示
|
|
391
|
+
4️⃣ 按下 `ESC` 或点击关闭按钮会触发 `close`
|
package/es/index/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
/*! For license information please see index.js.LICENSE.txt */
|
|
2
|
+
var t={183(t,e,n){n.d(e,{A:()=>o});var r=n(194);r.A.inject=function(t){t.component(r.A.name,r.A)};const o=r.A},491(t,e,n){n.d(e,{A:()=>s});var r=function(){var t=this,e=t._self._c;return t.visible?e("div",{staticClass:"pc pc-dialog__box",style:[t.cusStyle]},[t.ifShowMask?e("div",{staticClass:"pc-dialog__layout",on:{click:function(t){t.stopPropagation()}}}):t._e(),t._v(" "),e("div",{staticClass:"pc-dialog__content__wrap"},[e("div",{staticClass:"pc-dialog__content"},[e("div",{staticClass:"pc-dialog__header"},[e("p",{staticClass:"pc-dialog__title pc-text-ellipsis"},[t._v(t._s(t.title))]),t._v(" "),e("p",{staticClass:"pc-dialog__sub-title pc-text-ellipsis"},[t._v(t._s(t.subTitle))]),t._v(" "),e("div",{staticClass:"pc-dialog__close",on:{click:t.close}},[e("svg",{attrs:{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"}},[e("path",{attrs:{d:"M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z",fill:"currentColor"}})])])]),t._v(" "),t.ifShowMain?e("div",{staticClass:"pc-dialog__main"},[t._t("default")],2):t._e(),t._v(" "),t.buttons&&t.buttons.length?[e("div",{class:["pc-dialog__footer","pc-flex","pc-flex-end",{border:t.ifShowMain}]},t._l(t.buttons,function(n,r){return e("PcButton",t._b({key:r},"PcButton",n,!1))}),1)]:[e("div",{staticStyle:{height:"10px"}})]],2)])]):t._e()};r._withStripped=!0;var o=n(705);const i={name:"PcDialog",components:{PcButton:n(194).A},model:{prop:"visible",event:"update:visible"},props:{title:{type:String,default:""},subTitle:{type:String,default:""},ifShowMask:{type:Boolean,default:!0},width:{type:Number,default:400},buttons:{type:Array,default:function(){return[]}},visible:{type:Boolean,default:!0}},emits:["close"],data:function(){return{}},computed:{cusStyle:function(){return(0,o.A)({},"--width","".concat(this.width,"px"))},ifShowMain:function(){return Boolean(this.$scopedSlots.default)}},watch:{visible:function(t){document.body.style.overflow=t?"hidden":""}},mounted:function(){var t=this;this.$nextTick(function(){document.body.prepend(t.$el),t.bindEsc()})},beforeDestroy:function(){this.unbindEsc(),this.$el.parentNode===document.body&&document.body.removeChild(this.$el)},methods:{close:function(){this.$emit("close"),this.$emit("update:visible",!1)},handleEsc:function(t){"Escape"===t.key&&this.close()},bindEsc:function(){document.addEventListener("keydown",this.handleEsc)},unbindEsc:function(){document.removeEventListener("keydown",this.handleEsc)}}},a=(0,n(486).A)(i,r,[],!1,null,"01f0e5c2",null).exports;a.inject=function(t){t.component(a.name,a)};const s=a},671(t,e,n){n.d(e,{A:()=>f});var r=function(){var t=this,e=t._self._c;return e("div",{ref:"waterfall",staticClass:"waterfall",style:[t.cusStyle]},[t._t("header"),t._v(" "),t.data.length?[e("div",{staticClass:"waterfall-container"},t._l(t.columnsData,function(n,r){return e("div",{key:r,staticClass:"waterfall-column"},t._l(n,function(n,r){return e("div",{key:r,staticClass:"waterfall-item"},[t._t("item",null,{item:n})],2)}),0)}),0)]:[t._t("empty")],t._v(" "),t._t("footer")],2)};function o(t,e,n,r,o,i,a){try{var s=t[i](a),u=s.value}catch(t){return void n(t)}s.done?e(u):Promise.resolve(u).then(r,o)}r._withStripped=!0;var i=n(705),a=n(756),s=n.n(a);const u={name:"PcWaterFall",props:{list:{type:Array,default:function(){return[]}},gapX:{type:Number,default:20},gapY:{type:Number,default:20},columns:{type:Number,default:2}},data:function(){return{current:0,columnsData:[],columnsHeight:[]}},computed:{data:{get:function(){return this.list}},cusStyle:function(){return(0,i.A)((0,i.A)((0,i.A)({},"--gap-x","".concat(this.gapX,"px")),"--gap-y","".concat(this.gapY,"px")),"--column",this.columns)}},watch:{list:{handler:function(t,e){t.length?(t.length<(null==e?void 0:e.length)&&this.reset(),this.init()):this.reset()},immediate:!0},columns:function(){var t=this;this.reset(),this.$nextTick(function(){t.init()})}},methods:{reset:function(){this.columnsData=Array.from({length:this.columns},function(){return[]}),this.columnsHeight=Array.from({length:this.columns},function(){return 0}),this.current=0},init:function(){this.list.length?(0===this.current&&(this.columnsData=Array.from({length:this.columns},function(){return[]}),this.columnsHeight=Array.from({length:this.columns},function(){return 0})),this.renderList()):this.reset()},renderList:function(){var t,e=this;return(t=s().mark(function t(){var n,r,o;return s().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:n=e.current;case 1:if(!(n<e.list.length)){t.next=4;break}return r=e.list[n],o=e.getMinColumn(),e.columnsData[o].push(r),t.next=2,e.$nextTick();case 2:e.calcHeight(o);case 3:n++,t.next=1;break;case 4:e.current=e.list.length;case 5:case"end":return t.stop()}},t)}),function(){var e=this,n=arguments;return new Promise(function(r,i){var a=t.apply(e,n);function s(t){o(a,r,i,s,u,"next",t)}function u(t){o(a,r,i,s,u,"throw",t)}s(void 0)})})()},getMinColumn:function(){var t=this.columnsHeight[0],e=0;return this.columnsHeight.forEach(function(n,r){n<t&&(t=n,e=r)}),e},calcHeight:function(t){var e=this.$el.querySelectorAll(".waterfall-column");this.columnsHeight[t]=e[t].offsetHeight}}},c=u,l=(0,n(486).A)(c,r,[],!1,null,"7c5bcaac",null).exports;l.install=function(t){t.component(l.name,l)};const f=l},893(t,e,n){n.d(e,{A:()=>a});var r=function(){return(0,this._self._c)("canvas",{ref:"canvas"})};r._withStripped=!0;const o={name:"PcWaterMark",props:{width:{type:Number,default:300},height:{type:Number,default:150},src:{type:String,required:!0},text:{type:String,default:""},fontSize:{type:Number,default:16},color:{type:String,default:"#000"},deg:{type:Number,default:45,validator:function(t){return!(t<0||t>360)||(console.warn("[Watermark] deg must be between 0 and 360"),!1)}},gapY:{type:Number,default:20},gapX:{type:Number,default:20}},mounted:function(){this.init()},methods:{init:function(){var t=this,e=this.$refs.canvas,n=e.getContext("2d"),r=window.devicePixelRatio||1;e.width=this.width*r,e.height=this.height*r,e.style.width="".concat(this.width,"px"),e.style.height="".concat(this.height,"px"),n.scale(r,r);var o=new Image;o.crossOrigin="anonymous",o.src=this.src,o.onload=function(){n.drawImage(o,0,0,t.width,t.height),n.font="".concat(t.fontSize,"px sans-serif"),n.fillStyle=t.color,n.textAlign="left",n.textBaseline="middle";var e=n.measureText(t.text).width;n.save(),n.translate(t.width/2,t.height/2),n.rotate(t.deg*Math.PI/180),n.translate(-t.width/2,-t.height/2);for(var r=t.fontSize+t.gapY,i=e+t.gapX,a=-t.height;a<2*t.height;a+=r)for(var s=-t.width;s<2*t.width;s+=i)n.fillText(t.text,s,a);n.restore()}}}},i=(0,n(486).A)(o,r,[],!1,null,null,null).exports;i.install=function(t){t.component(i.name,i)};const a=i},194(t,e,n){n.d(e,{A:()=>i});var r=function(){var t=this,e=t._self._c;return e("div",{staticClass:"pc-button pc-inline-flex pc-flex-center pc-flex-align-center"},["text"===t.type?[e("span",{class:["pc-button__text",{disabled:t.disabled}],on:{click:function(e){return e.stopPropagation(),t.clickButton.apply(null,arguments)}}},[t._v(t._s(t.text))])]:[e("button",{class:["pc-button__wrap pc-flex pc-flex-center pc-flex-align-center",{disabled:t.disabled||t.loading},t.type],on:{click:function(e){return e.stopPropagation(),t.clickButton.apply(null,arguments)}}},[t.loading?[e("svg",{staticClass:"pc-rotate",attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1024 1024",width:"14",height:"14"}},[e("path",{attrs:{fill:"currentColor",d:"M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248m452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248M828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0"}})])]:t._e(),t._v(" "),e("span",{staticClass:"pc-button__text"},[t._v(t._s(t.text))])],2)]],2)};r._withStripped=!0;const o={name:"PcButton",props:{type:{type:String,default:"primary",validator:function(t){return!!["primary","hollow","text"].includes(t)||(console.warn("只支持primary、hollow或者text类型"),!1)}},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},text:{type:String,required:!0},click:{type:Function,default:function(){return function(){}}}},emits:["click"],methods:{clickButton:function(){this.disabled||this.loading||("[object Function]"===Object.prototype.toString.call(this.click)&&this.click(),this.$emit("click"))}}},i=(0,n(486).A)(o,r,[],!1,null,"12b3918a",null).exports},486(t,e,n){function r(t,e,n,r,o,i,a,s){var u,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),r&&(c.functional=!0),i&&(c._scopeId="data-v-"+i),a?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=u):o&&(u=s?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),u)if(c.functional){c._injectStyles=u;var l=c.render;c.render=function(t,e){return u.call(e),l(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,u):[u]}return{exports:t,options:c}}n.d(e,{A:()=>r})},172(t){t.exports=function(t,e){this.v=t,this.k=e},t.exports.__esModule=!0,t.exports.default=t.exports},993(t,e,n){var r=n(546);function o(){var e,n,i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",s=i.toStringTag||"@@toStringTag";function u(t,o,i,a){var s=o&&o.prototype instanceof l?o:l,u=Object.create(s.prototype);return r(u,"_invoke",function(t,r,o){var i,a,s,u=0,l=o||[],f=!1,p={p:0,n:0,v:e,a:d,f:d.bind(e,4),d:function(t,n){return i=t,a=0,s=e,p.n=n,c}};function d(t,r){for(a=t,s=r,n=0;!f&&u&&!o&&n<l.length;n++){var o,i=l[n],d=p.p,h=i[2];t>3?(o=h===r)&&(s=i[(a=i[4])?5:(a=3,3)],i[4]=i[5]=e):i[0]<=d&&((o=t<2&&d<i[1])?(a=0,p.v=r,p.n=i[1]):d<h&&(o=t<3||i[0]>r||r>h)&&(i[4]=t,i[5]=r,p.n=h,a=0))}if(o||t>1)return c;throw f=!0,r}return function(o,l,h){if(u>1)throw TypeError("Generator is already running");for(f&&1===l&&d(l,h),a=l,s=h;(n=a<2?e:s)||!f;){i||(a?a<3?(a>1&&(p.n=-1),d(a,s)):p.n=s:p.v=s);try{if(u=2,i){if(a||(o="next"),n=i[o]){if(!(n=n.call(i,s)))throw TypeError("iterator result is not an object");if(!n.done)return n;s=n.value,a<2&&(a=0)}else 1===a&&(n=i.return)&&n.call(i),a<2&&(s=TypeError("The iterator does not provide a '"+o+"' method"),a=1);i=e}else if((n=(f=p.n<0)?s:t.call(r,p))!==c)break}catch(t){i=e,a=1,s=t}finally{u=1}}return{value:n,done:f}}}(t,i,a),!0),u}var c={};function l(){}function f(){}function p(){}n=Object.getPrototypeOf;var d=[][a]?n(n([][a]())):(r(n={},a,function(){return this}),n),h=p.prototype=l.prototype=Object.create(d);function v(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,p):(t.__proto__=p,r(t,s,"GeneratorFunction")),t.prototype=Object.create(h),t}return f.prototype=p,r(h,"constructor",p),r(p,"constructor",f),f.displayName="GeneratorFunction",r(p,s,"GeneratorFunction"),r(h),r(h,s,"Generator"),r(h,a,function(){return this}),r(h,"toString",function(){return"[object Generator]"}),(t.exports=o=function(){return{w:u,m:v}},t.exports.__esModule=!0,t.exports.default=t.exports)()}t.exports=o,t.exports.__esModule=!0,t.exports.default=t.exports},869(t,e,n){var r=n(887);t.exports=function(t,e,n,o,i){var a=r(t,e,n,o,i);return a.next().then(function(t){return t.done?t.value:a.next()})},t.exports.__esModule=!0,t.exports.default=t.exports},887(t,e,n){var r=n(993),o=n(791);t.exports=function(t,e,n,i,a){return new o(r().w(t,e,n,i),a||Promise)},t.exports.__esModule=!0,t.exports.default=t.exports},791(t,e,n){var r=n(172),o=n(546);t.exports=function t(e,n){function i(t,o,a,s){try{var u=e[t](o),c=u.value;return c instanceof r?n.resolve(c.v).then(function(t){i("next",t,a,s)},function(t){i("throw",t,a,s)}):n.resolve(c).then(function(t){u.value=t,a(u)},function(t){return i("throw",t,a,s)})}catch(t){s(t)}}var a;this.next||(o(t.prototype),o(t.prototype,"function"==typeof Symbol&&Symbol.asyncIterator||"@asyncIterator",function(){return this})),o(this,"_invoke",function(t,e,r){function o(){return new n(function(e,n){i(t,r,e,n)})}return a=a?a.then(o,o):o()},!0)},t.exports.__esModule=!0,t.exports.default=t.exports},546(t){function e(n,r,o,i){var a=Object.defineProperty;try{a({},"",{})}catch(n){a=0}t.exports=e=function(t,n,r,o){function i(n,r){e(t,n,function(t){return this._invoke(n,r,t)})}n?a?a(t,n,{value:r,enumerable:!o,configurable:!o,writable:!o}):t[n]=r:(i("next",0),i("throw",1),i("return",2))},t.exports.__esModule=!0,t.exports.default=t.exports,e(n,r,o,i)}t.exports=e,t.exports.__esModule=!0,t.exports.default=t.exports},373(t){t.exports=function(t){var e=Object(t),n=[];for(var r in e)n.unshift(r);return function t(){for(;n.length;)if((r=n.pop())in e)return t.value=r,t.done=!1,t;return t.done=!0,t}},t.exports.__esModule=!0,t.exports.default=t.exports},633(t,e,n){var r=n(172),o=n(993),i=n(869),a=n(887),s=n(791),u=n(373),c=n(579);function l(){var e=o(),n=e.m(l),f=(Object.getPrototypeOf?Object.getPrototypeOf(n):n.__proto__).constructor;function p(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===f||"GeneratorFunction"===(e.displayName||e.name))}var d={throw:1,return:2,break:3,continue:3};function h(t){var e,n;return function(r){e||(e={stop:function(){return n(r.a,2)},catch:function(){return r.v},abrupt:function(t,e){return n(r.a,d[t],e)},delegateYield:function(t,o,i){return e.resultName=o,n(r.d,c(t),i)},finish:function(t){return n(r.f,t)}},n=function(t,n,o){r.p=e.prev,r.n=e.next;try{return t(n,o)}finally{e.next=r.n}}),e.resultName&&(e[e.resultName]=r.v,e.resultName=void 0),e.sent=r.v,e.next=r.n;try{return t.call(this,e)}finally{r.p=e.prev,r.n=e.next}}}return(t.exports=l=function(){return{wrap:function(t,n,r,o){return e.w(h(t),n,r,o&&o.reverse())},isGeneratorFunction:p,mark:e.m,awrap:function(t,e){return new r(t,e)},AsyncIterator:s,async:function(t,e,n,r,o){return(p(e)?a:i)(h(t),e,n,r,o)},keys:u,values:c}},t.exports.__esModule=!0,t.exports.default=t.exports)()}t.exports=l,t.exports.__esModule=!0,t.exports.default=t.exports},579(t,e,n){var r=n(738).default;t.exports=function(t){if(null!=t){var e=t["function"==typeof Symbol&&Symbol.iterator||"@@iterator"],n=0;if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length))return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}}}throw new TypeError(r(t)+" is not iterable")},t.exports.__esModule=!0,t.exports.default=t.exports},738(t){function e(n){return t.exports=e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t.exports.__esModule=!0,t.exports.default=t.exports,e(n)}t.exports=e,t.exports.__esModule=!0,t.exports.default=t.exports},756(t,e,n){var r=n(633)();t.exports=r;try{regeneratorRuntime=r}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=r:Function("r","regeneratorRuntime = r")(r)}},705(t,e,n){function r(t){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(t)}function o(t,e,n){return(e=function(t){var e=function(t){if("object"!=r(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=r(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==r(e)?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}n.d(e,{A:()=>o})}},e={};function n(r){var o=e[r];if(void 0!==o)return o.exports;var i=e[r]={exports:{}};return t[r](i,i.exports,n),i.exports}n.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return n.d(e,{a:e}),e},n.d=(t,e)=>{for(var r in e)n.o(e,r)&&!n.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var r={};n.d(r,{A:()=>c,M:()=>o.A});var o=n(893),i=n(183),a=n(491),s=n(671),u=[o.A,i.A,a.A,s.A];const c={install:function(t){u.forEach(function(e){e.install(t)})}},l=r.M,f=r.A;export{l as PcWaterMark,f as default};
|