From e1021e70ba9ddc22ac5e10cad5a128ecd3bd2667 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=80=E9=A2=97=E7=BA=A2=E5=BF=83?= Date: Thu, 18 Jul 2019 17:12:27 +0800 Subject: [PATCH] [new feature] Image: add round prop (#3838) --- src/image/README.md | 12 ++++++ src/image/README.zh-CN.md | 18 ++++++++- src/image/demo/index.vue | 21 ++++++++++ src/image/index.js | 3 +- src/image/index.less | 5 +++ .../test/__snapshots__/demo.spec.js.snap | 39 +++++++++++++++++++ 6 files changed, 95 insertions(+), 3 deletions(-) diff --git a/src/image/README.md b/src/image/README.md index 63450de41..6ffb8cee8 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -31,6 +31,17 @@ Vue.use(Image); /> ``` +### Round + +```html + +``` + ### Lazy Load ```html @@ -56,6 +67,7 @@ Vue.use(Lazyload); |------|------|------|------| | src | Src | `string` | - | - | | fit | Fit mode | `string` | `fill` | - | +| round | Round，when img width not eq height it may not works at `fit=contain` and `fit=scale-down` | `boolean` | `false` | - | | alt | Alt | `string` | - | - | | width | Width | `string | number` | - | - | | height | Height | `string | number` | - | - | diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md index 29c80b5d0..e6894c31e 100644 --- a/src/image/README.zh-CN.md +++ b/src/image/README.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示 +增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示 ### 引入 @@ -39,6 +39,19 @@ Vue.use(Image); /> ``` +### 圆形图片 + +通过`round`属性可以设置图片变圆 + +```html + +``` + ### 图片懒加载 设置`lazy-load`属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用 @@ -81,7 +94,8 @@ Vue.use(Image); | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | src | 图片链接 | `string` | - | - | -| fit | 图片填充模式 | `string` | `fill` | - | +| fit | 图片填充模式 | `string` | `fill` | - | +| round | 圆形图片，当图片宽高不相等时 `fit=contain` 和 `fit=scale-down` 可能无法实现「圆形」图片 | `boolean` | `false` | - | | alt | 替代文本 | `string` | - | - | | width | 宽度，默认单位为 px | `string | number` | - | - | | height | 高度，默认单位为 px | `string | number` | - | - | diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue index e6c519a17..d1ab4328d 100644 --- a/src/image/demo/index.vue +++ b/src/image/demo/index.vue @@ -28,6 +28,25 @@ + + + + +
{{ fit }}
+ + + + @@ -86,6 +105,7 @@ export default { i18n: { 'zh-CN': { fitMode: '填充模式', + round: '圆形图片', loading: '加载中提示', error: '加载失败提示', defaultTip: '默认提示', @@ -94,6 +114,7 @@ export default { }, 'en-US': { fitMode: 'Fit Mode', + round: 'Round', loading: 'Loading', error: 'Error', defaultTip: 'Default Tip', diff --git a/src/image/index.js b/src/image/index.js index 542699bfb..995252b69 100644 --- a/src/image/index.js +++ b/src/image/index.js @@ -5,6 +5,7 @@ const [createComponent, bem] = createNamespace('image'); export default createComponent({ props: { + round: Boolean, src: String, fit: String, alt: String, @@ -134,7 +135,7 @@ export default createComponent({ render(h) { return ( -
+
{this.renderImage()} {this.renderPlaceholder()}
diff --git a/src/image/index.less b/src/image/index.less index 724f11161..d6b72e1b9 100644 --- a/src/image/index.less +++ b/src/image/index.less @@ -4,6 +4,11 @@ position: relative; display: inline-block; + &--round { + overflow: hidden; + border-radius: 50%; + } + &__img, &__error, &__loading { diff --git a/src/image/test/__snapshots__/demo.spec.js.snap b/src/image/test/__snapshots__/demo.spec.js.snap index c28bb70d0..6ee6f957d 100644 --- a/src/image/test/__snapshots__/demo.spec.js.snap +++ b/src/image/test/__snapshots__/demo.spec.js.snap @@ -49,6 +49,45 @@ exports[`renders demo correctly 1`] = `
+
+
+
+
+
+
+
+
contain
+
+
+
+
+
+
+
cover
+
+
+
+
+
+
+
fill
+
+
+
+
+
+
+
none
+
+
+
+
+
+
+
scale-down
+
+
+