mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(uploader): add single uploader preview image style (#7731)
This commit is contained in:
Jontyy
GitHub
parent
6e8ca9fd8b
commit
b41d95b074
@ -91,7 +91,7 @@ export default {
|
||||
| coupons | 可用优惠券列表 | _Coupon[]_ | `[]` |
|
||||
| editable | 能否切换优惠券 | _boolean_ | `true` |
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| currency | 货币符号 | _string_ | `¥` | - |
|
||||
| currency | 货币符号 | _string_ | `¥` |
|
||||
|
||||
### CouponList Props
|
||||
|
||||
|
||||
@ -223,6 +223,41 @@ Use `disabled` prop to disable uploader.
|
||||
<van-uploader disabled />
|
||||
```
|
||||
|
||||
### Customize Single Preview Image Style
|
||||
|
||||
```html
|
||||
<van-uploader v-model="fileList" :deletable="false" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const fileList = ref([
|
||||
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
|
||||
{
|
||||
url: 'https://img.yzcdn.cn/vant/sand.jpg',
|
||||
deletable: true,
|
||||
beforeDelete: () => {
|
||||
Toast('Customize the events and styles of a single preview image');
|
||||
},
|
||||
},
|
||||
{
|
||||
url: 'https://img.yzcdn.cn/vant/tree.jpg',
|
||||
deletable: true,
|
||||
imageFit: 'contain',
|
||||
previewSize: 120,
|
||||
},
|
||||
]);
|
||||
return {
|
||||
fileList:
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -246,6 +246,43 @@ export default {
|
||||
<van-uploader disabled />
|
||||
```
|
||||
|
||||
### 自定义单个图片预览
|
||||
|
||||
在 `v-model` 数组中设置单个预览图片属性，支持 `imageFit`,`deletable`,`previewSize`,`beforeDelete`
|
||||
|
||||
```html
|
||||
<van-uploader v-model="fileList" :deletable="false" />
|
||||
```
|
||||
|
||||
```js
|
||||
import { ref } from 'vue';
|
||||
import { Toast } from 'vant';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const fileList = ref([
|
||||
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
|
||||
{
|
||||
url: 'https://img.yzcdn.cn/vant/sand.jpg',
|
||||
deletable: true,
|
||||
beforeDelete: () => {
|
||||
Toast('自定义单个预览图片的事件和样式');
|
||||
},
|
||||
},
|
||||
{
|
||||
url: 'https://img.yzcdn.cn/vant/tree.jpg',
|
||||
deletable: true,
|
||||
imageFit: 'contain',
|
||||
previewSize: 120,
|
||||
},
|
||||
]);
|
||||
return {
|
||||
fileList:
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@ -47,6 +47,10 @@
|
||||
<demo-block :title="t('disabled')">
|
||||
<van-uploader :after-read="afterRead" disabled />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customPreviewImage')">
|
||||
<van-uploader v-model="fileList5" multiple accept="*" :deletable="false" />
|
||||
</demo-block>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -70,6 +74,8 @@ const i18n = {
|
||||
invalidType: '请上传 jpg 格式图片',
|
||||
customUpload: '自定义上传样式',
|
||||
previewCover: '自定义预览样式',
|
||||
customPreviewImage: '自定义单个图片预览',
|
||||
deleteMessage: '删除前置处理',
|
||||
},
|
||||
'en-US': {
|
||||
status: 'Upload Status',
|
||||
@ -86,6 +92,8 @@ const i18n = {
|
||||
invalidType: 'Please upload an image in jpg format',
|
||||
customUpload: 'Custom Upload Area',
|
||||
previewCover: 'Preview Cover',
|
||||
customPreviewImage: 'Custom single prevew image',
|
||||
deleteMessage: 'Before Delete',
|
||||
},
|
||||
};
|
||||
|
||||
@ -100,6 +108,22 @@ export default {
|
||||
fileList2: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
|
||||
fileList3: [],
|
||||
fileList4: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
|
||||
fileList5: [
|
||||
{ url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
|
||||
{
|
||||
url: 'https://img.yzcdn.cn/vant/sand.jpg',
|
||||
deletable: true,
|
||||
beforeDelete: () => {
|
||||
Toast(t('deleteMessage'));
|
||||
},
|
||||
},
|
||||
{
|
||||
url: 'https://img.yzcdn.cn/vant/tree.jpg',
|
||||
deletable: true,
|
||||
imageFit: 'contain',
|
||||
previewSize: 120,
|
||||
},
|
||||
],
|
||||
statusFileList: [
|
||||
{
|
||||
url: 'https://img.yzcdn.cn/vant/leaf.jpg',
|
||||
|
||||
@ -235,30 +235,42 @@ export default createComponent({
|
||||
emit('delete', item, getDetail(index));
|
||||
};
|
||||
|
||||
const renderPreviewItem = (item, index) => (
|
||||
<PreviewItem
|
||||
v-slots={{ 'preview-cover': slots['preview-cover'] }}
|
||||
item={item}
|
||||
index={index}
|
||||
onClick={() => {
|
||||
emit('click-preview', item, getDetail(index));
|
||||
}}
|
||||
onDelete={() => {
|
||||
deleteFile(item, index);
|
||||
}}
|
||||
onPreview={() => {
|
||||
previewImage(item);
|
||||
}}
|
||||
{...pick(props, [
|
||||
'name',
|
||||
'lazyLoad',
|
||||
'imageFit',
|
||||
'deletable',
|
||||
'previewSize',
|
||||
'beforeDelete',
|
||||
])}
|
||||
/>
|
||||
);
|
||||
const renderPreviewItem = (item, index) => {
|
||||
const needPickData = [
|
||||
'imageFit',
|
||||
'deletable',
|
||||
'previewSize',
|
||||
'beforeDelete',
|
||||
];
|
||||
|
||||
const previewData = pick(props, needPickData);
|
||||
const previewProp = pick(item, needPickData);
|
||||
|
||||
Object.keys(previewProp).forEach((item) => {
|
||||
if (previewProp[item] !== undefined) {
|
||||
previewData[item] = previewProp[item];
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<PreviewItem
|
||||
v-slots={{ 'preview-cover': slots['preview-cover'] }}
|
||||
item={item}
|
||||
index={index}
|
||||
onClick={() => {
|
||||
emit('click-preview', item, getDetail(index));
|
||||
}}
|
||||
onDelete={() => {
|
||||
deleteFile(item, index);
|
||||
}}
|
||||
onPreview={() => {
|
||||
previewImage(item);
|
||||
}}
|
||||
{...pick(props, ['name', 'lazyLoad'])}
|
||||
{...previewData}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderPreviewList = () => {
|
||||
if (props.previewImage) {
|
||||
|
||||
@ -279,4 +279,65 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-uploader">
|
||||
<div class="van-uploader__wrapper">
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image">
|
||||
<img src="https://img.yzcdn.cn/vant/leaf.jpg"
|
||||
class="van-image__img"
|
||||
style="object-fit: cover;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image">
|
||||
<img src="https://img.yzcdn.cn/vant/sand.jpg"
|
||||
class="van-image__img"
|
||||
style="object-fit: cover;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview">
|
||||
<div class="van-image van-uploader__preview-image"
|
||||
style="width: 120px; height: 120px;"
|
||||
>
|
||||
<img src="https://img.yzcdn.cn/vant/tree.jpg"
|
||||
class="van-image__img"
|
||||
style="object-fit: contain;"
|
||||
>
|
||||
<div class="van-image__loading">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__preview-delete">
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-uploader__preview-delete-icon">
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-uploader__upload">
|
||||
<i class="van-badge__wrapper van-icon van-icon-photograph van-uploader__upload-icon">
|
||||
</i>
|
||||
<input type="file"
|
||||
class="van-uploader__input"
|
||||
accept="*"
|
||||
multiple
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user