dpzvc-ui 1.2.6 → 1.2.8
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 +27 -17
- package/dist/dpzvc.esm.js +591 -1155
- package/dist/dpzvc.esm.js.map +1 -1
- package/dist/dpzvc.esm.min.js +1 -1
- package/dist/dpzvc.esm.min.js.map +1 -1
- package/dist/dpzvc.js +522 -1105
- package/dist/dpzvc.js.map +1 -1
- package/dist/dpzvc.min.js +1 -1
- package/dist/dpzvc.min.js.map +1 -1
- package/dist-prod/573.d34afb948745a30ef054.js +3 -0
- package/dist-prod/573.d34afb948745a30ef054.js.LICENSE.txt +7 -0
- package/dist-prod/573.d34afb948745a30ef054.js.map +1 -0
- package/dist-prod/index.html +1 -1
- package/dist-prod/main.5ea7bcd95498f23800fb.js +2 -0
- package/dist-prod/main.5ea7bcd95498f23800fb.js.map +1 -0
- package/package.json +3 -3
- package/src/components/upload/upload.vue +65 -25
- package/src/lib/exif-js.js +235 -0
- package/src/lib/exif.js +2 -1
package/README.md
CHANGED
|
@@ -2,11 +2,18 @@
|
|
|
2
2
|
|
|
3
3
|
## 一、说明
|
|
4
4
|
|
|
5
|
-
> 一套基于 **Vue 2.X**
|
|
5
|
+
> 一套基于 **Vue 2.X** 的h5移动端通用组件库，提供丰富 UI 组件，并支持 **全量引入** 和 **按需引入**，同时提供公共样式、基础工具样式和服务组件方法（如 Message、Modal、Indicator）。
|
|
6
|
+
后续会开发基于Vue3版本的移动端组件库升级，敬请期待
|
|
6
7
|
|
|
7
8
|
---
|
|
8
9
|
|
|
9
|
-
##
|
|
10
|
+
## 二、组件库预览地址（查看各个组件库的使用效果）
|
|
11
|
+
```bash
|
|
12
|
+
https://yishide.github.io/dpzvc/#/guide
|
|
13
|
+
```
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## 三、安装
|
|
10
17
|
|
|
11
18
|
```bash
|
|
12
19
|
npm install dpzvc-ui
|
|
@@ -15,7 +22,7 @@ npm install dpzvc-ui
|
|
|
15
22
|
---
|
|
16
23
|
|
|
17
24
|
|
|
18
|
-
##
|
|
25
|
+
## 四、全量使用
|
|
19
26
|
|
|
20
27
|
|
|
21
28
|
全量引入组件库，包括 JS 组件和全量 CSS 样式（适合小型项目或快速开发）。
|
|
@@ -39,17 +46,17 @@ Vue.use(Dpzvc)
|
|
|
39
46
|
此方式会包含 components、base、utils 下的全部样式。
|
|
40
47
|
---
|
|
41
48
|
|
|
42
|
-
##
|
|
49
|
+
## 五、按需使用
|
|
43
50
|
|
|
44
51
|
按需引入可以减小打包体积，只引入你需要的组件及样式。
|
|
45
52
|
|
|
46
53
|
1. 引入组件
|
|
47
54
|
```bash
|
|
48
55
|
import Vue from 'vue'
|
|
49
|
-
import { VButton,
|
|
56
|
+
import { VButton, Badge } from 'dpzvc-ui'
|
|
50
57
|
|
|
51
58
|
Vue.component('VButton', VButton)
|
|
52
|
-
Vue.component('
|
|
59
|
+
Vue.component('Badge', Badge)
|
|
53
60
|
```
|
|
54
61
|
|
|
55
62
|
2. 引入组件 CSS
|
|
@@ -57,17 +64,20 @@ Vue.component('VBadge', VBadge)
|
|
|
57
64
|
@import "~dpzvc-ui/dist/styles/components/button.css";
|
|
58
65
|
@import "~dpzvc-ui/dist/styles/components/badge.css";
|
|
59
66
|
```
|
|
60
|
-
3.
|
|
67
|
+
3. 公共样式按需引入（可选）建议全部加上
|
|
61
68
|
```bash
|
|
62
|
-
@import "~dpzvc-ui/dist/styles/base/
|
|
69
|
+
@import "~dpzvc-ui/dist/styles/base/font.css";
|
|
70
|
+
@import "~dpzvc-ui/dist/styles/base/variable.css";
|
|
63
71
|
@import "~dpzvc-ui/dist/styles/base/reset.css";
|
|
64
|
-
@import "~dpzvc-ui/dist/styles/utils/
|
|
72
|
+
@import "~dpzvc-ui/dist/styles/utils/1px.css";
|
|
73
|
+
@import "~dpzvc-ui/dist/styles/utils/animation.css";
|
|
74
|
+
@import "~dpzvc-ui/dist/styles/utils/nowrap.css";
|
|
65
75
|
```
|
|
66
76
|
注意：按需引入组件时，如果组件依赖变量或 mixin，需要保证 base / utils 样式已引入。
|
|
67
77
|
|
|
68
78
|
---
|
|
69
79
|
|
|
70
|
-
##
|
|
80
|
+
## 六、服务组件使用
|
|
71
81
|
|
|
72
82
|
dpzvc-ui 提供一些 服务组件，无需注册即可使用，如：
|
|
73
83
|
• Message
|
|
@@ -83,16 +93,16 @@ import Dpzvc from 'dpzvc-ui'
|
|
|
83
93
|
Vue.use(Dpzvc)
|
|
84
94
|
|
|
85
95
|
// 直接使用服务组件
|
|
86
|
-
Vue.prototype.$Message.
|
|
87
|
-
Vue.prototype.$Modal.
|
|
88
|
-
Vue.prototype.$Prompt('
|
|
89
|
-
Vue.prototype.$Indicator.
|
|
96
|
+
Vue.prototype.$Message.show('操作成功！')
|
|
97
|
+
Vue.prototype.$Modal.confirm({body:'这是内容',onOk:function(){})
|
|
98
|
+
Vue.prototype.$Prompt.info({title:'Prompt',spec:'ccc',text:'vvvv'})
|
|
99
|
+
Vue.prototype.$Indicator.blade()
|
|
90
100
|
|
|
91
101
|
```
|
|
92
102
|
|
|
93
103
|
---
|
|
94
104
|
|
|
95
|
-
##
|
|
105
|
+
## 七、目录结构（dist 打包示例）
|
|
96
106
|
```bash
|
|
97
107
|
dist/
|
|
98
108
|
└── styles/
|
|
@@ -111,14 +121,14 @@ dist/
|
|
|
111
121
|
```
|
|
112
122
|
---
|
|
113
123
|
|
|
114
|
-
##
|
|
124
|
+
## 八、开发和调试
|
|
115
125
|
开发组件请放在 src/components
|
|
116
126
|
• 公共变量、样式放在 src/styles/base
|
|
117
127
|
• 工具 mixin 放在 src/styles/utils
|
|
118
128
|
• 组件样式放在 src/styles/components
|
|
119
129
|
• Gulp 任务已支持按需打包和全量打包
|
|
120
130
|
---
|
|
121
|
-
##
|
|
131
|
+
## 九、注意事项
|
|
122
132
|
|
|
123
133
|
1. 按需引入组件时，请确保 依赖的 base / utils 样式 已引入，否则可能出现变量未定义的错误。
|
|
124
134
|
2. 服务组件如 Message、Modal 等无需单独注册，全局可直接使用。
|