alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

docs: prettier all markdown files

Browse Source
This commit is contained in:
chenjiahan
2020-04-11 09:17:33 +08:00
committed by neverland
parent 48067f79db
commit 7f84f8a487
140 changed files with 4441 additions and 4723 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/uploader/README.md
+55 -60
View File
@@ -21,9 +21,9 @@ Vue.use(Uploader);
export default {
methods: {
afterRead(file) {
console.log(file)
}
}
console.log(file);
},
},
};
```
@@ -37,13 +37,12 @@ export default {
export default {
data() {
return {
fileList: [
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }
]
}
}
fileList: [{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' }],
};
},
};
```
### Disabled
```html
@@ -64,15 +63,15 @@ export default {
{
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
status: 'uploading',
message: 'Uploading...'
message: 'Uploading...',
},
{
url: 'https://img.yzcdn.cn/vant/tree.jpg',
status: 'failed',
message: 'Failed'
}
]
}
message: 'Failed',
},
],
};
},
methods: {
afterRead(file) {
@@ -83,28 +82,24 @@ export default {
file.status = 'failed';
file.message = 'Failed';
}, 1000);
}
}
},
},
};
```
### Max Count
```html
<van-uploader
v-model="fileList"
multiple
:max-count="2"
/>
<van-uploader v-model="fileList" multiple :max-count="2" />
```
```js
export default {
data() {
return {
fileList: []
}
}
fileList: [],
};
},
};
```
@@ -140,15 +135,15 @@ export default {
Toast('Please upload an image in jpg format');
reject();
} else {
let img = new File(["foo"], "bar.jpg", {
type: "image/jpeg",
let img = new File(['foo'], 'bar.jpg', {
type: 'image/jpeg',
});
resolve(img);
}
});
}
}
}
},
},
};
```
## API
@@ -156,31 +151,31 @@ export default {
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| accept | Accepted [file type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) | *string* | `image/*` |
| name `v2.0.3` | Input name | *number \| string* | - |
| preview-size | Size of preview image | *number \| string* | `80px` |
| preview-image `v2.1.5` | Whether to show image preview | *boolean* | `true` |
| preview-full-image | Whethe to show full screen image preview when click image | *boolean* | `true` |
| multiple | Whether to enable multiple selection pictures | *boolean* | `false` |
| disabled | Whether to disabled the upload | *boolean* | `false` |
| deletable `v2.2.12` | Whether to show delete icon | *boolean* | `true` |
| show-upload `v2.5.6` | Whether to show upload area | *boolean* | `true` |
| capture | Capture，can be set to `camera` | *string* | - |
| after-read | Hook after reading the file | *Function* | - |
| before-read | Hook before reading the file, return false to stop reading the file, can return Promise | *Function* | - |
| before-delete | Hook before delete the file, return false to stop reading the file, can return Promise | *Function* | - |
| max-size | Max size of file | *number \| string* | - |
| max-count | Max count of image | *number \| string* | - |
| result-type `v2.2.7` | Type of file read result, can be set to `file` `text` | *string* | `dataUrl` |
| upload-text | Upload text | *string* | - |
| image-fit `v2.1.5` | Preview image fit mode | *string* | `cover` |
| upload-icon `v2.5.4` | Upload icon | *string* | `photograph` |
| --- | --- | --- | --- |
| accept | Accepted [file type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) | _string_ | `image/*` |
| name `v2.0.3` | Input name | _number \| string_ | - |
| preview-size | Size of preview image | _number \| string_ | `80px` |
| preview-image `v2.1.5` | Whether to show image preview | _boolean_ | `true` |
| preview-full-image | Whethe to show full screen image preview when click image | _boolean_ | `true` |
| multiple | Whether to enable multiple selection pictures | _boolean_ | `false` |
| disabled | Whether to disabled the upload | _boolean_ | `false` |
| deletable `v2.2.12` | Whether to show delete icon | _boolean_ | `true` |
| show-upload `v2.5.6` | Whether to show upload area | _boolean_ | `true` |
| capture | Capture，can be set to `camera` | _string_ | - |
| after-read | Hook after reading the file | _Function_ | - |
| before-read | Hook before reading the file, return false to stop reading the file, can return Promise | _Function_ | - |
| before-delete | Hook before delete the file, return false to stop reading the file, can return Promise | _Function_ | - |
| max-size | Max size of file | _number \| string_ | - |
| max-count | Max count of image | _number \| string_ | - |
| result-type `v2.2.7` | Type of file read result, can be set to `file` `text` | _string_ | `dataUrl` |
| upload-text | Upload text | _string_ | - |
| image-fit `v2.1.5` | Preview image fit mode | _string_ | `cover` |
| upload-icon `v2.5.4` | Upload icon | _string_ | `photograph` |
### Events
| Event | Description | Arguments |
|------|------|------|
| --- | --- | --- |
| oversize | Triggered when file size over limit | Same as after-read |
| click-preview | Triggered when click preview image | Same as after-read |
| close-preview | Triggered when close full screen image preview | - |
@@ -188,23 +183,23 @@ export default {
### Slots
| Name | Description |
|------|------|
| Name | Description |
| ------- | ----------- |
| default | Custom icon |
### Parematers of before-read、after-read、before-delete
| Attribute | Description | Type |
|------|------|------|
| file | File object | *object* |
| detail | Detail info, contains name and index | *object* |
| Attribute | Description | Type |
| --------- | ------------------------------------ | -------- |
| file | File object | _object_ |
| detail | Detail info, contains name and index | _object_ |
### ResultType
| Value | Description |
|------|------|
| file | Result contains File object |
| text | Result contains File object and text content |
| Value | Description |
| ------- | ---------------------------------------------- |
| file | Result contains File object |
| text | Result contains File object and text content |
| dataUrl | Result contains File object and base64 content |
### Methods
@@ -212,6 +207,6 @@ export default {
Use [ref](https://vuejs.org/v2/api/#ref) to get Uploader instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| --- | --- | --- | --- |
| closeImagePreview | Close full screen image preview | - | - |
| chooseFile `v2.5.6` | Trigger choosing files, works with the user action context only because of browser security | - | - |
src/uploader/README.zh-CN.md
+60 -64
View File
@@ -25,8 +25,8 @@ export default {
afterRead(file) {
// 此时可以自行将文件上传至服务器
console.log(file);
}
}
},
},
};
```
@@ -46,10 +46,10 @@ export default {
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
// Uploader 根据文件后缀来判断是否为图片文件
// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
{ url: 'https://cloud-image', isImage: true }
]
}
}
{ url: 'https://cloud-image', isImage: true },
],
};
},
};
```
@@ -77,15 +77,15 @@ export default {
{
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
status: 'uploading',
message: '上传中...'
message: '上传中...',
},
{
url: 'https://img.yzcdn.cn/vant/tree.jpg',
status: 'failed',
message: '上传失败'
}
]
}
message: '上传失败',
},
],
};
},
methods: {
afterRead(file) {
@@ -96,8 +96,8 @@ export default {
file.status = 'failed';
file.message = '上传失败';
}, 1000);
}
}
},
},
};
```
@@ -106,20 +106,16 @@ export default {
通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
```html
<van-uploader
v-model="fileList"
multiple
:max-count="2"
/>
<van-uploader v-model="fileList" multiple :max-count="2" />
```
```js
export default {
data() {
return {
fileList: []
}
}
fileList: [],
};
},
};
```
@@ -161,15 +157,15 @@ export default {
Toast('请上传 jpg 格式图片');
reject();
} else {
let img = new File(["foo"], "bar.jpg", {
type: "image/jpeg",
let img = new File(['foo'], 'bar.jpg', {
type: 'image/jpeg',
});
resolve(img);
}
});
}
}
}
},
},
};
```
## API
@@ -177,59 +173,59 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | *string* | `image/*` |
| name `v2.0.3` | 标识符，可以在回调函数的第二项参数中获取 | *number \| string* | - |
| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *number \| string* | `80px` |
| preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` |
| preview-full-image `v2.1.5` | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` |
| multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` |
| disabled | 是否禁用文件上传 | *boolean* | `false` |
| deletable `v2.2.12` | 是否展示删除按钮 | *boolean* | `true` |
| show-upload `v2.5.6` | 是否展示上传区域 | *boolean* | `true` |
| capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | *string* | - |
| after-read | 文件读取完成后的回调函数 | *Function* | - |
| before-read | 文件读取前的回调函数，返回`false`可终止文件读取，<br>支持返回`Promise` | *Function* | - |
| before-delete | 文件删除前的回调函数，返回`false`可终止文件读取，<br>支持返回`Promise` | *Function* | - |
| max-size | 文件大小限制，单位为`byte` | *number \| string* | - |
| max-count | 文件上传数量限制 | *number \| string* | - |
| result-type `v2.2.7` | 文件读取结果类型，可选值为`file` `text` | *string* | `dataUrl` |
| upload-text | 上传区域文字提示 | *string* | - |
| image-fit `v2.1.5` | 预览图裁剪模式，可选值见 [Image](#/zh-CN/image) 组件 | *string* | `cover` |
| upload-icon `v2.5.4` | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | *string* | `photograph` |
| --- | --- | --- | --- |
| accept | 允许上传的文件类型，[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | _string_ | `image/*` |
| name `v2.0.3` | 标识符，可以在回调函数的第二项参数中获取 | _number \| string_ | - |
| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | _number \| string_ | `80px` |
| preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` |
| preview-full-image `v2.1.5` | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` |
| multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` |
| disabled | 是否禁用文件上传 | _boolean_ | `false` |
| deletable `v2.2.12` | 是否展示删除按钮 | _boolean_ | `true` |
| show-upload `v2.5.6` | 是否展示上传区域 | _boolean_ | `true` |
| capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | _string_ | - |
| after-read | 文件读取完成后的回调函数 | _Function_ | - |
| before-read | 文件读取前的回调函数，返回`false`可终止文件读取，<br>支持返回`Promise` | _Function_ | - |
| before-delete | 文件删除前的回调函数，返回`false`可终止文件读取，<br>支持返回`Promise` | _Function_ | - |
| max-size | 文件大小限制，单位为`byte` | _number \| string_ | - |
| max-count | 文件上传数量限制 | _number \| string_ | - |
| result-type `v2.2.7` | 文件读取结果类型，可选值为`file` `text` | _string_ | `dataUrl` |
| upload-text | 上传区域文字提示 | _string_ | - |
| image-fit `v2.1.5` | 预览图裁剪模式，可选值见 [Image](#/zh-CN/image) 组件 | _string_ | `cover` |
| upload-icon `v2.5.4` | 上传区域[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photograph` |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| oversize | 文件大小超过限制时触发 | 同`after-read` |
| click-preview | 点击预览图时触发 | 同`after-read` |
| close-preview | 关闭全屏图片预览时触发 | - |
| delete | 删除文件预览时触发 | 同`after-read` |
| 事件名 | 说明 | 回调参数 |
| ------------- | ---------------------- | -------------- |
| oversize | 文件大小超过限制时触发 | 同`after-read` |
| click-preview | 点击预览图时触发 | 同`after-read` |
| close-preview | 关闭全屏图片预览时触发 | - |
| delete | 删除文件预览时触发 | 同`after-read` |
### Slots
| 名称 | 说明 |
|------|------|
| 名称 | 说明 |
| ------- | -------------- |
| default | 自定义上传区域 |
### 回调参数
before-read、after-read、before-delete 执行时会传递以下回调参数：
| 参数名 | 说明 | 类型 |
|------|------|------|
| file | 文件解析后的 file 对象 | *object* |
| detail | 额外信息，包含 name 和 index 字段 | *object* |
| 参数名 | 说明 | 类型 |
| ------ | --------------------------------- | -------- |
| file | 文件解析后的 file 对象 | _object_ |
| detail | 额外信息，包含 name 和 index 字段 | _object_ |
### ResultType 可选值
### ResultType  可选值
`result-type`字段表示文件读取结果的类型，上传大文件时，建议使用 file 类型，避免卡顿。
| 值 | 描述 |
|------|------|
| file | 结果仅包含 File 对象 |
| text | 结果包含 File 对象，以及文件的文本内容 |
| 值 | 描述 |
| ------- | ---------------------------------------------- |
| file | 结果仅包含 File 对象 |
| text | 结果包含 File 对象，以及文件的文本内容 |
| dataUrl | 结果包含 File 对象，以及文件对应的 base64 编码 |
### 方法
@@ -237,6 +233,6 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：
通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|
| --- | --- | --- | --- |
| closeImagePreview | 关闭全屏的图片预览 | - | - |
| chooseFile `v2.5.6` | 主动调起文件选择，由于浏览器安全限制，只有在用户触发操作的上下文中调用才有效 | - | - |