1 | ### Usage
|
2 |
|
3 | #### WechatUploader
|
4 |
|
5 | ##### Props
|
6 |
|
7 | |名称|默认|说明|
|
8 | |---|---|---|
|
9 | |size|1|允许最大上传图片数量|
|
10 | |canModify|true|是否允许修改|
|
11 | |containerClass|\{\}|容器元素样式类|
|
12 | |containerStyle|\{\}|容器元素样式|
|
13 | |imageClass|\{\}|每个图片元素样式类|
|
14 | |imageStyle|\{\}|每个图片元素样式|
|
15 | |requestClass|\{\}|添加按钮样式类|
|
16 | |requestStyle|\{\}|添加按钮样式|
|
17 | |imageWrapClass|\{\}|图片容器样式类|
|
18 | |imageWrapStyle|\{\}|图片容器样式|
|
19 | |useWechatPreview|true|是否使用微信JSSDK预览|
|
20 | |lazyload|false|是否使用vue-lazyload|
|
21 |
|
22 | ##### 事件
|
23 |
|
24 | |名称|参数|说明|
|
25 | |---|---|---|
|
26 | |load|无|图片上传到微信服务器开始|
|
27 | |finish|无|图片上传到微信服务器结束|
|
28 | |add| \{ localId, serverId \} |有图片增加|
|
29 | |remove|index (被删除图片位置)|有图片被删除|
|
30 | |click|index (被点击图片位置)|当正在显示的图片被点击|
|
31 |
|
32 | ##### 函数
|
33 |
|
34 | |名称|参数|说明|
|
35 | |---|---|---|
|
36 | |request|无|发起图片上传|
|
37 | |removeAll|无|删除所有图片|
|
38 | |getImages|无|获得所有图片内容|
|
39 |
|
40 | ###### WechatUploader.setImages
|
41 |
|
42 | __html__
|
43 |
|
44 | ```html
|
45 | <WechatUploader
|
46 | ref="uploader"
|
47 | :size="4"
|
48 | :can-modify="true">
|
49 | </WechatUploader>
|
50 | ```
|
51 |
|
52 | __script__
|
53 |
|
54 | ```javascript
|
55 | this.$refs.uploader.setImages([
|
56 | {
|
57 | image: '...', // 可以是url或者localId
|
58 | serverId: '...', // 可以不传入
|
59 | },
|
60 | ]);
|
61 | ```
|
62 |
|
63 | ###### WechatUploader.getImages
|
64 |
|
65 | ```javascript
|
66 | const images = this.$refs.uploader.getImages();
|
67 |
|
68 | // 结果是
|
69 | [
|
70 | {
|
71 | image: '...',
|
72 | serverId: '...',
|
73 | },
|
74 | ]
|
75 | ```
|
76 |
|
77 | ### Roadmap
|
78 |
|
79 | 1. image之间添加间距
|
80 |
|
81 | ### Changelog
|
82 |
|
83 | #### v0.0.2
|
84 |
|
85 | 1. export default Uploader 改为 export {Uploader, WechatUploader}
|
86 |
|
87 | #### v0.0.3
|
88 |
|
89 | 1. add/remove添加boolean返回值
|
90 |
|
91 | #### v0.0.4
|
92 |
|
93 | 1. WechatUploader中setImages(images: Array<image>)函数修改为setImages(data: Array<{image, serverId}>)
|
94 | 2. WechatUploader中getImages: Array<image>函数修改为getImages: Array<{image, serverId}>
|
95 |
|
96 | ### Version
|
97 |
|
98 | #### v0.0.1
|
99 |
|
100 | 1. @request() 请求一张图片
|
101 | 1. @click(index) 点击了某张图片
|
102 | 1. @remove(index) 删除了某张图片
|
103 | 1. add(image) 添加一张图片
|
104 | 1. remove(index) 删除某张图片
|
105 | 1. getImages(): Array<image> 获得所有的图片
|
106 | 1. setImages(images: Array<image>) 设置所有的图片
|
107 | 1. 样式上
|
108 | 1. 强制70px宽度
|
109 | 1. icon使用before和after生成
|
110 |
|
111 | #### v0.0.2
|
112 |
|
113 | 1. 添加@add(image)事件
|
114 | 1. remove(index)函数调用将触发@remove(index)事件
|
115 | 1. 添加wechat-uploader.js
|
116 | 1. 图片上传将触发@load和@finish事件
|
117 |
|
118 | #### 0.0.3
|
119 |
|
120 | 1. 样式代码简单优化
|
121 | 1. remove(index)需要对index进行处理,例如是否大于0。添加返回值
|
122 | 1. add(image)需要判断当前的size是否已满。添加返回值
|
123 |
|
124 | #### 0.0.4
|
125 |
|
126 | 1. 修复WechatUploader中setImages/getImages的参数可能导致的不正确问题
|
127 |
|
128 | #### 0.0.5
|
129 |
|
130 | 1. WechatUploader提供preview
|
131 | 1. 添加canModify控制部分按钮的显示
|
132 |
|
133 | #### 0.0.6
|
134 |
|
135 | 1. 修复WechatUploader的setImages逻辑错误
|
136 |
|
137 | #### 0.0.7
|
138 |
|
139 | 1. request组件和container组件的样式允许部分自定义
|
140 |
|
141 | #### 0.0.8
|
142 |
|
143 | 1. 修复错误
|
144 |
|
145 | #### 0.0.9
|
146 |
|
147 | 1. 添加 removeAll / getCount / getSize 函数
|
148 |
|
149 | #### 0.0.10
|
150 |
|
151 | 1. 添加新函数,优化样式
|
152 |
|
153 | #### 0.0.11
|
154 |
|
155 | 1. 优化样式
|
156 |
|
157 | #### 0.0.12
|
158 |
|
159 | 1. 添加props: imageStyle/imageClass
|
160 |
|
161 | #### 0.0.13
|
162 |
|
163 | 1. 完善文档
|
164 |
|
165 | #### v0.0.14
|
166 |
|
167 | 1. 修复错误
|
168 |
|
169 | #### v0.0.15
|
170 |
|
171 | 1. 添加props,mageWrapClass和imageWrapStyle
|
172 |
|
173 | #### v0.0.16
|
174 |
|
175 | 1. 添加prop: lazyload
|
176 |
|
177 | #### v0.0.17
|
178 |
|
179 | 1. 修复微信预览黑屏的问题 |
\ | No newline at end of file |