diff --git a/src/image/README.md b/src/image/README.md index d2f90af9f..6b0571ecf 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -73,6 +73,7 @@ Vue.use(Lazyload); | alt | Alt | `string` | - | - | | width | Width | `string | number` | - | - | | height | Height | `string | number` | - | - | +| radius | Border Radius | `string | number` | `0` | - | | round | Whether to be round | `boolean` | `false` | - | | lazy-load | Whether to enable lazy load,should register [Lazyload](#/en-US/lazyload) component | `boolean` | `false` | - | | show-error | Whether to show error placeholder | `boolean` | `true` | diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md index d394480c6..5f343d925 100644 --- a/src/image/README.zh-CN.md +++ b/src/image/README.zh-CN.md @@ -99,10 +99,11 @@ Vue.use(Image); | alt | 替代文本 | `string` | - | - | | width | 宽度,默认单位为`px` | `string | number` | - | - | | height | 高度,默认单位为`px` | `string | number` | - | - | +| radius | 圆角大小,默认单位为`px` | `string | number` | `0` | 2.1.6 | | round | 是否显示为圆形 | `boolean` | `false` | - | | lazy-load | 是否开启图片懒加载,须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `boolean` | `false` | - | | show-error | 是否展示图片加载失败提示 | `boolean` | `true` | 2.0.9 | -| show-loading | 是否展示图片加载中提示 | `boolean` | `true` | `2.0.9` | +| show-loading | 是否展示图片加载中提示 | `boolean` | `true` | 2.0.9 | ### 图片填充模式 diff --git a/src/image/index.js b/src/image/index.js index d66d3a980..2bf0c0d32 100644 --- a/src/image/index.js +++ b/src/image/index.js @@ -11,6 +11,7 @@ export default createComponent({ round: Boolean, width: [Number, String], height: [Number, String], + radius: [Number, String], lazyLoad: Boolean, showError: { type: Boolean, @@ -48,6 +49,11 @@ export default createComponent({ style.height = addUnit(this.height); } + if (isDef(this.radius)) { + style.overflow = 'hidden'; + style.borderRadius = addUnit(this.radius); + } + return style; } }, diff --git a/src/image/test/__snapshots__/index.spec.js.snap b/src/image/test/__snapshots__/index.spec.js.snap index 876d58483..e0d8bbf5a 100644 --- a/src/image/test/__snapshots__/index.spec.js.snap +++ b/src/image/test/__snapshots__/index.spec.js.snap @@ -25,6 +25,13 @@ exports[`load event 2`] = ` `; -exports[`show-loading prop 1`] = `
`; +exports[`radius prop 1`] = ` +
+
+
+
+`; exports[`show-error prop 1`] = `
`; + +exports[`show-loading prop 1`] = `
`; diff --git a/src/image/test/index.spec.js b/src/image/test/index.spec.js index 91f514832..1a54b2f06 100644 --- a/src/image/test/index.spec.js +++ b/src/image/test/index.spec.js @@ -124,3 +124,14 @@ test('show-error prop', () => { expect(wrapper).toMatchSnapshot(); }); + +test('radius prop', () => { + const wrapper = mount(Image, { + propsData: { + radius: 3, + src: 'https://img.yzcdn.cn/vant/cat.jpeg' + } + }); + + expect(wrapper).toMatchSnapshot(); +});