Skip to content

Commit 0dc5933

Browse files
ygj6ygj6
authored
Vue3 readme docs (#183)
* docs:modify Readme.md * docs:fix juejin image * docs: delete zh in readme.md
1 parent 6682e6a commit 0dc5933

File tree

3 files changed

+103
-51
lines changed

3 files changed

+103
-51
lines changed

‎README.md

Lines changed: 52 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# vue-simple-uploader [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![juejin likes][juejin-image]](juejin-url)
1+
# vue-simple-uploader [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![juejin likes][juejin-image]][juejin-url]
22

33
> A Vue.js upload component powered by [simple-uploader.js](https://github.com/simple-uploader/Uploader)
44
@@ -26,7 +26,7 @@
2626
## Install
2727

2828
``` bash
29-
npm install vue-simple-uploader --save
29+
npm install vue-simple-uploader@next --save
3030
```
3131

3232
## Notes
@@ -40,18 +40,13 @@ npm install vue-simple-uploader --save
4040
### init
4141

4242
``` js
43-
import Vue from 'vue'
43+
import { createApp } from 'vue'
4444
import uploader from 'vue-simple-uploader'
4545
import App from './App.vue'
4646

47-
Vue.use(uploader)
48-
49-
/* eslint-disable no-new */
50-
new Vue({
51-
render(createElement) {
52-
return createElement(App)
53-
}
54-
}).$mount('#app')
47+
const app = createApp(App)
48+
app.use(uploader)
49+
app.mount('#app')
5550
```
5651

5752
### App.vue
@@ -71,17 +66,42 @@ new Vue({
7166
</template>
7267
7368
<script>
69+
import { nextTick, ref, onMounted } from 'vue'
7470
export default {
75-
data () {
71+
setup () {
72+
const uploader = ref(null)
73+
const options = {
74+
target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
75+
testChunks: false
76+
}
77+
const attrs = {
78+
accept: 'image/*'
79+
}
80+
const statusText = {
81+
success: 'success',
82+
error: 'error',
83+
uploading: 'uploading',
84+
paused: 'paused',
85+
waiting: 'waiting'
86+
}
87+
const complete = () => {
88+
console.log('complete', arguments)
89+
}
90+
const fileComplete = () => {
91+
console.log('file complete', arguments)
92+
}
93+
onMounted(() => {
94+
nextTick(() => {
95+
window.uploader = uploader.value.uploader
96+
})
97+
})
7698
return {
77-
options: {
78-
// https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
79-
target: '//localhost:3000/upload',
80-
testChunks: false
81-
},
82-
attrs: {
83-
accept: 'image/*'
84-
}
99+
uploader,
100+
options,
101+
attrs,
102+
statusText,
103+
complete,
104+
fileComplete
85105
}
86106
}
87107
}
@@ -181,7 +201,7 @@ Root component.
181201
}
182202
if (status === 'success' || status === 'error') {
183203
// only use response when status is success or error
184-
204+
185205
// eg:
186206
// return response data ?
187207
return response.data
@@ -224,6 +244,15 @@ See [simple-uploader.js uploader/events](https://github.com/simple-uploader/Uplo
224244
You can get it like this:
225245

226246
```js
247+
// Composition API
248+
const uploader = ref(null)
249+
// there will be an uploader attribute on the uploader component, which points to the Uploader instance
250+
const uploaderInstance = uploader.value.uploader
251+
// now you can call all uploader methods
252+
// https://github.com/simple-uploader/Uploader#methods
253+
uploaderInstance.cancel()
254+
255+
//Options API
227256
const uploaderInstance = this.$refs.uploader.uploader
228257
// now you can call all uploader methods
229258
// https://github.com/simple-uploader/Uploader#methods
@@ -387,14 +416,12 @@ npm run dev
387416

388417
# build for production with minification
389418
npm run build
390-
391-
# build for production and view the bundle analyzer report
392-
npm run build --report
393419
```
394420

395421
[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat
396422
[npm-url]: https://npmjs.org/package/vue-simple-uploader
397423
[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat
398424
[downloads-url]: https://npmjs.org/package/vue-simple-uploader
399-
[juejin-image]: https://badge.juejin.im/entry/599dad0ff265da248b04d7b8/likes.svg?style=flat
425+
[juejin-image]: https://img.shields.io/badge/Jue%20Jin-446Likes-blue.svg
400426
[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail
427+

‎README_zh-CN.md

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# vue-simple-uploader [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![juejin likes][juejin-image]](juejin-url)
1+
# vue-simple-uploader [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![juejin likes][juejin-image]][juejin-url]
22

33
> 一个基于 [simple-uploader.js](https://github.com/simple-uploader/Uploader) 的 Vue 上传组件
44
@@ -29,7 +29,7 @@
2929
## 安装
3030

3131
``` bash
32-
npm install vue-simple-uploader --save
32+
npm install vue-simple-uploader@next --save
3333
```
3434

3535
## 笔记周边
@@ -43,18 +43,13 @@ npm install vue-simple-uploader --save
4343
### 初始化
4444

4545
``` js
46-
import Vue from 'vue'
46+
import { createApp } from 'vue'
4747
import uploader from 'vue-simple-uploader'
4848
import App from './App.vue'
4949

50-
Vue.use(uploader)
51-
52-
/* eslint-disable no-new */
53-
new Vue({
54-
render(createElement) {
55-
return createElement(App)
56-
}
57-
}).$mount('#app')
50+
const app = createApp(App)
51+
app.use(uploader)
52+
app.mount('#app')
5853
```
5954

6055
### App.vue
@@ -74,17 +69,42 @@ new Vue({
7469
</template>
7570
7671
<script>
72+
import { nextTick, ref, onMounted } from 'vue'
7773
export default {
78-
data () {
74+
setup () {
75+
const uploader = ref(null)
76+
const options = {
77+
target: '//localhost:3000/upload', // '//jsonplaceholder.typicode.com/posts/',
78+
testChunks: false
79+
}
80+
const attrs = {
81+
accept: 'image/*'
82+
}
83+
const statusText = {
84+
success: '成功了',
85+
error: '出错了',
86+
uploading: '上传中',
87+
paused: '暂停中',
88+
waiting: '等待中'
89+
}
90+
const complete = () => {
91+
console.log('complete', arguments)
92+
}
93+
const fileComplete = () => {
94+
console.log('file complete', arguments)
95+
}
96+
onMounted(() => {
97+
nextTick(() => {
98+
window.uploader = uploader.value.uploader
99+
})
100+
})
79101
return {
80-
options: {
81-
// https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
82-
target: '//localhost:3000/upload',
83-
testChunks: false
84-
},
85-
attrs: {
86-
accept: 'image/*'
87-
}
102+
uploader,
103+
options,
104+
attrs,
105+
statusText,
106+
complete,
107+
fileComplete
88108
}
89109
}
90110
}
@@ -185,7 +205,7 @@ new Vue({
185205
}
186206
if (status === 'success' || status === 'error') {
187207
// 只有status为success或者error的时候可以使用 response
188-
208+
189209
// eg:
190210
// return response data ?
191211
return response.data
@@ -228,6 +248,15 @@ new Vue({
228248
可以通过如下方式获得：
229249

230250
```js
251+
// Composition API
252+
const uploader = ref(null)
253+
// 在 uploader 组件上会有 uploader 属性 指向的就是 Uploader 实例
254+
const uploaderInstance = uploader.value.uploader
255+
// 这里可以调用实例方法
256+
// https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md#方法
257+
uploaderInstance.cancel()
258+
259+
//Options API
231260
// 在 uploader 组件上会有 uploader 属性 指向的就是 Uploader 实例
232261
const uploaderInstance = this.$refs.uploader.uploader
233262
// 这里可以调用实例方法
@@ -392,14 +421,11 @@ npm run dev
392421
393422
# build for production with minification
394423
npm run build
395-
396-
# build for production and view the bundle analyzer report
397-
npm run build --report
398424
```
399425

400426
[npm-image]: https://img.shields.io/npm/v/vue-simple-uploader.svg?style=flat
401427
[npm-url]: https://npmjs.org/package/vue-simple-uploader
402428
[downloads-image]: https://img.shields.io/npm/dm/vue-simple-uploader.svg?style=flat
403429
[downloads-url]: https://npmjs.org/package/vue-simple-uploader
404-
[juejin-image]: https://badge.juejin.im/entry/599dad0ff265da248b04d7b8/likes.svg?style=flat
430+
[juejin-image]: https://img.shields.io/badge/%E6%8E%98%E9%87%91-446Likes-blue.svg
405431
[juejin-url]: https://juejin.im/entry/599dad0ff265da248b04d7b8/detail

‎example/App.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
waiting: '等待中'
2323
}
2424
const complete = () => {
25-
debugger
2625
console.log('complete', arguments)
2726
}
2827
const fileComplete = () => {

0 commit comments

Comments
 (0)