blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] Uploader: add default style & upload-text prop

Browse Source
This commit is contained in:
陈嘉涵 2019-05-27 20:50:40 +08:00
parent d2a6a692c5
commit c0e2ce200e
8 changed files with 92 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/markdown/changelog.zh-CN.md
View File

@ -39,6 +39,11 @@
- 新增`drag-start`事件
- 新增`drag-end`事件
##### Uploader
- 增加上传区域默认样式
- 新增`upload-text`属性
### [v2.0.0-beta.1](https://github.com/youzan/vant/tree/v2.0.0-beta.1)

1
packages/slider/test/index.spec.js
View File

@ -24,7 +24,6 @@ test('drag button', () => {
wrapper.setProps({ value });
});
const button = wrapper.find('.van-slider__button');
triggerDrag(button, 50, 0);
expect(wrapper).toMatchSnapshot();

39
packages/uploader/demo/index.vue
View File

@ -1,26 +1,18 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<div class="demo-uploader-container">
<van-uploader
:max-size="102400"
@oversize="logContent('oversize')"
:before-read="beforeRead(1)"
>
<van-icon name="photograph" />
</van-uploader>
</div>
<van-uploader />
</demo-block>
<demo-block :title="$t('name')">
<div class="demo-uploader-container">
<van-uploader
name="uploader"
:after-read="toastName"
<demo-block :title="$t('uploadStyle')">
<van-uploader>
<van-button
type="primary"
icon="photo"
>
<van-icon name="photograph" />
</van-uploader>
</div>
{{ this.$t('upload') }}
</van-button>
</van-uploader>
</demo-block>
</demo-section>
</template>
@ -30,11 +22,13 @@ export default {
i18n: {
'zh-CN': {
name: '标识名称',
title2: '设置 input 属性'
upload: '上传图片',
uploadStyle: '自定义上传样式'
},
'en-US': {
name: 'Name',
title2: 'Set input attrs'
upload: 'Upload Image',
uploadStyle: 'Upload Style'
}
},
@ -58,9 +52,10 @@ export default {
<style lang="less">
.demo-uploader {
&-container {
padding: 10px 20px;
font-size: 20px;
background-color: #fff;
.van-uploader {
margin-left: 15px;
}
}
</style>

27
packages/uploader/en-US.md
View File

@ -13,11 +13,7 @@ Vue.use(Uploader);
### Basic Usage
```html
<div class="uploader-container">
<van-uploader :after-read="onRead">
<van-icon name="photograph" />
</van-uploader>
</div>
<van-uploader :after-read="onRead" />
```
```javascript
@ -30,24 +26,14 @@ export default {
};
```
### Name
### Upload Style
```html
<van-uploader name="uploader" :after-read="onRead">
<van-icon name="photograph" />
<van-uploader :after-read="onRead">
<van-button icon="photo" type="primary">Upload Image</van-button>
</van-uploader>
```
```javascript
export default {
methods: {
onRead(file, detail) {
this.$toast(detail.name);
}
}
};
```
## API
### Props
@ -55,14 +41,15 @@ export default {
| Attribute | Description | Type | Default |
|------|------|------|------|
| name | Input name | `String` | - |
| result-type | Type of file read result, can be set to `dataUrl` `text` | `String` | `dataUrl` |
| accept | Accepted file type | `String` | `image/*` |
| disabled | Whether to disabled the upload | `Boolean` | `false` |
| multiple | Whether to enable multiple selection pictures | `Boolean` | `false` |
| disabled | Whether to disabled the upload | `Boolean` | `false` |
| capture | Capture，can be set to `camera` | `String` | - |
| before-read | Hook before reading the file, return false to stop reading the file | `Function` | - |
| after-read | Hook after reading the file | `Function` | - |
| max-size | Max size of file | `Number` | - |
| result-type | Type of file read result, can be set to `dataUrl` `text` | `String` | `dataUrl` |
| upload-text | Upload text | `String` | - |
### Events

31
packages/uploader/index.js
View File

@ -1,4 +1,5 @@
import { use } from '../utils';
import Icon from '../icon';
const [sfc, bem] = use('uploader');
@ -7,6 +8,7 @@ export default sfc({
props: {
disabled: Boolean,
uploadText: String,
beforeRead: Function,
afterRead: Function,
accept: {
@ -62,10 +64,7 @@ export default sfc({
});
} else {
this.readFile(files).then(content => {
this.onAfterRead(
{ file: files, content },
files.size > this.maxSize
);
this.onAfterRead({ file: files, content }, files.size > this.maxSize);
});
}
},
@ -103,16 +102,28 @@ export default sfc({
},
render(h) {
const {
accept,
disabled
} = this;
const { slots, accept, disabled, uploadText } = this;
function Upload() {
const slot = slots();
if (slot) {
return slot;
}
return (
<div class={bem('upload')}>
<Icon name="plus" class={bem('upload-icon')} />
{uploadText && <span class={bem('upload-text')}>{uploadText}</span>}
</div>
);
}
return (
<div class={bem()}>
{this.slots()}
{Upload()}
<input
{ ...{ attrs: this.$attrs } }
{...{ attrs: this.$attrs }}
ref="input"
type="file"
accept={accept}

23
packages/uploader/index.less
View File

@ -14,4 +14,27 @@
cursor: pointer;
opacity: 0;
}
&__upload {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 80px;
height: 80px;
background-color: @white;
border: 1px dashed @gray-light;
&-icon {
color: @gray-dark;
font-size: 24px;
}
&-text {
margin-top: 10px;
color: @gray-dark;
font-size: 12px;
}
}
}

14
packages/uploader/test/__snapshots__/demo.spec.js.snap
View File

@ -3,16 +3,16 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="demo-uploader-container">
<div class="van-uploader"><i class="van-icon van-icon-photograph">
<!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
<div class="van-uploader">
<div class="van-uploader__upload"><i class="van-icon van-icon-plus van-uploader__upload-icon">
<!----></i></div><input type="file" accept="image/*" class="van-uploader__input">
</div>
</div>
<div>
<div class="demo-uploader-container">
<div class="van-uploader"><i class="van-icon van-icon-photograph">
<!----></i><input name="uploader" type="file" accept="image/*" class="van-uploader__input"></div>
</div>
<div class="van-uploader"><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-photo van-button__icon">
<!----></i><span class="van-button__text">
上传图片
</span></button><input type="file" accept="image/*" class="van-uploader__input"></div>
</div>
</div>
`;

35
packages/uploader/zh-CN.md
View File

@ -13,9 +13,7 @@ Vue.use(Uploader);
### 基础用法
```html
<van-uploader :after-read="onRead">
<van-icon name="photograph" />
</van-uploader>
<van-uploader :after-read="onRead" />
```
```javascript
@ -28,24 +26,14 @@ export default {
};
```
### 标识名称
### 自定义上传样式
```html
<van-uploader name="uploader" :after-read="onRead">
<van-icon name="photograph" />
<van-uploader :after-read="onRead">
<van-button icon="photo" type="primary">上传图片</van-button>
</van-uploader>
```
```javascript
export default {
methods: {
onRead(file, detail) {
this.$toast(detail.name);
}
}
};
```
## API
### Props
@ -53,14 +41,15 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| name | 标识符，可以在回调函数的第二项参数中获取 | `String` | - | 1.6.13 |
| result-type | 文件读取结果类型，可选值为 `text` | `String` | `dataUrl` | - |
| accept | 接受的文件类型 | `String` | `image/*` | - |
| disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
| multiple | 是否开启图片多选，部分安卓机型不支持 | `Boolean` | `false` | 2.0.0 |
| capture | 捕获模式，可选值为`camera`(直接调起摄像头) | `String` | - | 2.0.0 |
| before-read | 读取前的回调函数，返回 false 可终止文件读取 | `Function` | - | - |
| after-read | 读取完成后的回调函数 | `Function` | - | - |
| max-size | 文件大小限制，单位为 byte | `Number` | - | - |
| disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
| capture | 图片选取模式，可选值为`camera`(直接调起摄像头) | `String` | - | 2.0.0 |
| before-read | 文件读取前的回调函数，返回`false`可终止文件读取 | `Function` | - | - |
| after-read | 文件读取完成后的回调函数 | `Function` | - | - |
| max-size | 文件大小限制，单位为`byte` | `Number` | - | - |
| result-type | 文件读取结果类型，可选值为`text` | `String` | `dataUrl` | - |
| upload-text | 上传区域文字提示 | `String` | - | 2.0.0 |
### Events
@ -72,7 +61,7 @@ export default {
| 名称 | 说明 |
|------|------|
| default | 自定义 uploader 内容 |
| default | 自定义上传区域 |
### before-read、after-read 回调参数