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

[improvement] rename packages dir to src (#3659)

Browse Source
This commit is contained in:
neverland
2019-06-27 11:25:57 +08:00
committed by GitHub
parent 8489918dca
commit 75c79b7044
619 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/image/demo/index.vue
+136
View File
@@ -0,0 +1,136 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-row>
<van-image
width="100"
height="100"
:src="image"
/>
</van-row>
</demo-block>
<demo-block :title="$t('fitMode')">
<van-row gutter="20">
<van-col
v-for="fit in fits"
span="8"
:key="fit"
>
<van-image
:fit="fit"
width="100%"
height="27vw"
:src="image"
/>
<div class="text">{{ fit }}</div>
</van-col>
</van-row>
</demo-block>
<demo-block :title="$t('loading')">
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
/>
<div class="text">{{ $t('defaultTip') }}</div>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
>
<template #loading>
<van-loading
type="spinner"
size="20"
/>
</template>
</van-image>
<div class="text">{{ $t('customTip') }}</div>
</van-col>
</van-row>
</demo-block>
<demo-block :title="$t('error')">
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
/>
<div class="text">{{ $t('defaultTip') }}</div>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
>
<template #error>{{ $t('loadFail') }}</template>
</van-image>
<div class="text">{{ $t('customTip') }}</div>
</van-col>
</van-row>
</demo-block>
</demo-section>
</template>
<script>
export default {
i18n: {
'zh-CN': {
fitMode: '填充模式',
loading: '加载中提示',
error: '加载失败提示',
defaultTip: '默认提示',
customTip: '自定义提示',
loadFail: '加载失败'
},
'en-US': {
fitMode: 'Fit Mode',
loading: 'Loading',
error: 'Error',
defaultTip: 'Default Tip',
customTip: 'Custom Tip',
loadFail: 'Load failed'
}
},
data() {
return {
image: 'https://img.yzcdn.cn/vant/cat.jpeg',
fits: ['contain', 'cover', 'fill', 'none', 'scale-down']
};
}
};
</script>
<style lang="less">
@import "../../style/var";
.demo-image {
overflow-x: hidden;
background-color: @white;
.van-row {
padding: 0 15px;
}
.van-col {
margin-bottom: 20px;
}
.text {
margin-top: 5px;
color: @gray-darker;
font-size: 14px;
text-align: center;
}
}
</style>
src/image/en-US.md
+87
View File
@@ -0,0 +1,87 @@
# Image
### Install
``` javascript
import { Image } from 'vant';
Vue.use(Image);
```
## Usage
### Basic Usage
```html
<van-image
width="100"
height="100"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
### Fit Mode
```html
<van-image
width="10rem"
height="10rem"
fit="contain"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
### Lazy Load
```html
<van-image
width="100"
height="100"
lazy-load
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
```js
import { Lazyload } from 'vant';
Vue.use(Lazyload);
```
## API
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| src | Src | `String` | - | - |
| fit | Fit mode | `String` | `fill` | - |
| alt | Alt | `String` | - | - |
| width | Width | `String | Number` | - | - |
| height | Height | `String | Number` | - | - |
| lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` | - |
### fit optional value
| name | desctription |
|------|------|
| contain | Keep aspect ratio, fully display the long side of the image |
| cover | Keep aspect ratio, fully display the short side of the image, cutting the long side |
| fill | Stretch and resize image to fill the content box |
| none | Not resize image |
| scale-down | Take the smaller of `none` or `contain` |
### Events
| Event | Description | Arguments |
|------|------|------|
| click | Triggered when click image | event: Event |
| load | Triggered when image loaded | - |
| error | Triggered when image load failed | - |
### Slots
| Name | Description |
|------|------|
| loading | Custom loading placeholder |
| error | Custom error placeholder |
src/image/index.js
+143
View File
@@ -0,0 +1,143 @@
import { createNamespace, isDef, suffixPx } from '../utils';
import Icon from '../icon';
const [createComponent, bem] = createNamespace('image');
export default createComponent({
props: {
src: String,
fit: String,
alt: String,
lazyLoad: Boolean,
width: [String, Number],
height: [String, Number]
},
data() {
return {
loading: true,
error: false
};
},
watch: {
src() {
this.loading = true;
this.error = false;
}
},
computed: {
style() {
const style = {};
if (isDef(this.width)) {
style.width = suffixPx(this.width);
}
if (isDef(this.height)) {
style.height = suffixPx(this.height);
}
return style;
}
},
created() {
const { $Lazyload } = this;
if ($Lazyload) {
$Lazyload.$on('loaded', this.onLazyLoaded);
$Lazyload.$on('error', this.onLazyLoadError);
}
},
beforeDestroy() {
const { $Lazyload } = this;
if ($Lazyload) {
$Lazyload.$off('loaded', this.onLazyLoaded);
$Lazyload.$off('error', this.onLazyLoadError);
}
},
methods: {
onLoad(event) {
this.loading = false;
this.$emit('load', event);
},
onLazyLoaded({ el }) {
if (el === this.$refs.image && this.loading) {
this.onLoad();
}
},
onLazyLoadError({ el }) {
if (el === this.$refs.image && !this.error) {
this.onError();
}
},
onError(event) {
this.error = true;
this.loading = false;
this.$emit('error', event);
},
onClick(event) {
this.$emit('click', event);
},
renderPlaceholder() {
if (this.loading) {
return (
<div class={bem('loading')}>
{this.slots('loading') || <Icon name="photo-o" size="22" />}
</div>
);
}
if (this.error) {
return (
<div class={bem('error')}>
{this.slots('error') || <Icon name="warning-o" size="22" />}
</div>
);
}
},
renderImage() {
const imgData = {
class: bem('img'),
attrs: {
alt: this.alt
},
style: {
objectFit: this.fit
}
};
if (this.error) {
return;
}
if (this.lazyLoad) {
return <img ref="image" vLazy={this.src} {...imgData} />;
}
return (
<img src={this.src} onLoad={this.onLoad} onError={this.onError} {...imgData} />
);
}
},
render(h) {
return (
<div class={bem()} style={this.style} onClick={this.onClick}>
{this.renderImage()}
{this.renderPlaceholder()}
</div>
);
}
});
src/image/index.less
+28
View File
@@ -0,0 +1,28 @@
@import '../style/var';
.van-image {
position: relative;
display: inline-block;
&__img,
&__error,
&__loading {
display: block;
width: 100%;
height: 100%;
}
&__error,
&__loading {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: @image-placeholder-text-color;
font-size: @image-placeholder-font-size;
background-color: @image-placeholder-background-color;
}
}
src/image/test/__snapshots__/demo.spec.js.snap
+90
View File
@@ -0,0 +1,90 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-row">
<div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">contain</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">cover</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">fill</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">none</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">scale-down</div>
</div>
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
<div class="van-image__loading">
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(201, 201, 201); width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</div>
<div class="text">自定义提示</div>
</div>
</div>
</div>
<div>
<div class="van-row" style="margin-left: -10px; margin-right: -10px;">
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">默认提示</div>
</div>
<div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
<div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
<div class="text">自定义提示</div>
</div>
</div>
</div>
</div>
`;
src/image/test/__snapshots__/index.spec.js.snap
+26
View File
@@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`lazy load 1`] = `
<div class="van-image"><img class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
`;
exports[`lazy-load error event 1`] = `
<div class="van-image">
<div class="van-image__error"><i class="van-icon van-icon-warning-o" style="font-size: 22px;">
<!----></i></div>
</div>
`;
exports[`lazy-load load event 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img"></div>`;
exports[`load event 2`] = `
<div class="van-image"><img src="" class="van-image__img">
<div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
<!----></i></div>
</div>
`;
src/image/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import demoTest from '../../../test/demo-test';
demoTest(Demo);
src/image/test/index.spec.js
+103
View File
@@ -0,0 +1,103 @@
import { mount } from '../../../test/utils';
import Image from '..';
test('click event', () => {
const wrapper = mount(Image);
wrapper.trigger('click');
expect(wrapper.emitted('click')[0][0]).toBeTruthy();
wrapper.destroy();
});
test('load event', () => {
const wrapper = mount(Image, {
propsData: {
src: 'https://img.yzcdn.cn/vant/cat.jpeg'
}
});
wrapper.find('img').trigger('load');
expect(wrapper.emitted('load')[0][0]).toBeTruthy();
expect(wrapper).toMatchSnapshot();
wrapper.setProps({ src: '' });
expect(wrapper).toMatchSnapshot();
});
test('error event', () => {
const wrapper = mount(Image, {
propsData: {
src: 'https://img.yzcdn.cn/vant/cat.jpeg'
}
});
wrapper.find('img').trigger('error');
expect(wrapper.emitted('error')[0][0]).toBeTruthy();
});
test('lazy load', () => {
const wrapper = mount(Image, {
propsData: {
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
lazyLoad: true
}
});
expect(wrapper).toMatchSnapshot();
});
test('lazy-load load event', done => {
const wrapper = mount(Image, {
propsData: {
lazyLoad: true,
src: 'https://img.yzcdn.cn/vant/cat.jpeg'
},
mocks: {
$Lazyload: {
$on(eventName, hanlder) {
if (eventName === 'loaded') {
setTimeout(() => {
hanlder({ el: null });
hanlder({ el: wrapper.find('img').element });
expect(wrapper.emitted('load').length).toEqual(1);
expect(wrapper).toMatchSnapshot();
wrapper.destroy();
});
}
},
$off() {
done();
}
}
}
});
});
test('lazy-load error event', done => {
const wrapper = mount(Image, {
propsData: {
lazyLoad: true
},
mocks: {
$Lazyload: {
$on(eventName, hanlder) {
if (eventName === 'error') {
setTimeout(() => {
hanlder({ el: null });
hanlder({ el: wrapper.find('img').element });
expect(wrapper.emitted('error').length).toEqual(1);
expect(wrapper).toMatchSnapshot();
wrapper.destroy();
});
}
},
$off() {
done();
}
}
}
});
});
src/image/zh-CN.md
+113
View File
@@ -0,0 +1,113 @@
# Image 图片
### 介绍
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
### 引入
``` javascript
import { Image } from 'vant';
Vue.use(Image);
```
## 代码演示
### 基础用法
基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性
```html
<van-image
width="100"
height="100"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
### 填充模式
通过`fit`属性可以设置图片填充模式，可选值见下方表格
```html
<van-image
width="10rem"
height="10rem"
fit="contain"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
### 图片懒加载
设置`lazy-load`属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用
```html
<van-image
width="100"
height="100"
lazy-load
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
### 加载中提示
`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容
```html
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
</van-image>
```
### 加载失败提示
`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容
```html
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
<template v-slot:error>加载失败</template>
</van-image>
```
## API
### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| src | 图片链接 | `String` | - | - |
| fit | 图片填充模式 | `String` | `fill` | - |
| alt | 替代文本 | `String` | - | - |
| width | 宽度，默认单位为 px | `String | Number` | - | - |
| height | 高度，默认单位为 px | `String | Number` | - | - |
| lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | - |
### 图片填充模式
| 名称 | 含义 |
|------|------|
| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
| fill | 拉伸图片，使图片填满元素 |
| none | 保持图片原有尺寸 |
| scale-down | 取`none`或`contain`中较小的一个 |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| click | 点击图片时触发 | event: Event |
| load | 图片加载完毕时触发 | - |
| error | 图片加载失败时触发 | - |
### Slots
| 名称 | 说明 |
|------|------|
| loading | 自定义加载中的提示内容 |
| error | 自定义加载失败时的提示内容 |