From 48462bbf81d24e7558295e86ec543e6fed0a6d04 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Thu, 13 Oct 2022 22:39:41 +0800 Subject: [PATCH] feat(ui/image): support title prop --- packages/varlet-ui/src/image/Image.vue | 2 ++ .../src/image/__tests__/index.spec.js | 4 ++- packages/varlet-ui/src/image/docs/en-US.md | 24 ++++++++--------- packages/varlet-ui/src/image/docs/zh-CN.md | 27 ++++++++++--------- packages/varlet-ui/src/image/props.ts | 3 +++ packages/varlet-ui/types/image.d.ts | 1 + 6 files changed, 35 insertions(+), 26 deletions(-) diff --git a/packages/varlet-ui/src/image/Image.vue b/packages/varlet-ui/src/image/Image.vue index 01b1c4ffee8..423403d3743 100644 --- a/packages/varlet-ui/src/image/Image.vue +++ b/packages/varlet-ui/src/image/Image.vue @@ -11,6 +11,7 @@ { }) }) - test('test image alt', () => { + test('test image alt and title', () => { const wrapper = mount(VarImage, { props: { alt: 'This is alt', + title: 'This is title', }, }) expect(wrapper.find('.var-image__image').attributes('alt')).toContain('This is alt') + expect(wrapper.find('.var-image__image').attributes('title')).toContain('This is title') wrapper.unmount() }) diff --git a/packages/varlet-ui/src/image/docs/en-US.md b/packages/varlet-ui/src/image/docs/en-US.md index a299f040420..d006692af47 100644 --- a/packages/varlet-ui/src/image/docs/en-US.md +++ b/packages/varlet-ui/src/image/docs/en-US.md @@ -154,19 +154,19 @@ import logo from '../../assets/logo.png' ### Props -| Prop | Description | Type | Default | -| --- | --- | --- | --- | -| `src` | Image src | _string_ | `-` | +| Prop | Description | Type | Default | +| --- |--------------------------------------------------------------------------------| --- | --- | +| `src` | Image src | _string_ | `-` | | `fit` | Image fit mode, optional value is `fill` `contain` `cover` `none` `scale-down` | _string_ | `fill` | -| `alt` | Image alt text | _string_ | `-` | -| `width` | Image width | _string \| number_ | `-` | -| `height` | Image height | _string \| number_ | `-` | -| `radius` | Image radius | _string \| number_ | `-` | -| `lazy` | Whether to enable lazy loading | _boolean_ | `false` | -| `loading` | When lazy loading is enabled, the image displayed in loading | _string_ | `-` | -| `error` | When lazy loading is enabled, the image displayed in error | _string_ | `-` | -| `ripple` | Whether to enable ripple | _boolean_ | `false` | -| `block` | Whether it is a block element | _boolean_ | `true` | +| `alt` | Image alt text, the same as the native attribute of the `img` tag | _string_ | `-` | +| `width` | Image title text, the same as the native attribute of the `img` tag | _string \| number_ | `-` | +| `height` | Image height | _string \| number_ | `-` | +| `radius` | Image radius | _string \| number_ | `-` | +| `lazy` | Whether to enable lazy loading | _boolean_ | `false` | +| `loading` | When lazy loading is enabled, the image displayed in loading | _string_ | `-` | +| `error` | When lazy loading is enabled, the image displayed in error | _string_ | `-` | +| `ripple` | Whether to enable ripple | _boolean_ | `false` | +| `block` | Whether it is a block element | _boolean_ | `true` | ### Events diff --git a/packages/varlet-ui/src/image/docs/zh-CN.md b/packages/varlet-ui/src/image/docs/zh-CN.md index 73626d6235e..950f3a96a43 100644 --- a/packages/varlet-ui/src/image/docs/zh-CN.md +++ b/packages/varlet-ui/src/image/docs/zh-CN.md @@ -152,19 +152,20 @@ import logo from '../../assets/logo.png' ### 属性 -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `src` | 图片地址 | _string_ | `-` | -| `fit` | 填充模式, 可选值为 `fill contain cover none scale-down` | _string_ | `fill` | -| `alt` | 替代文本 | _string_ | `-` | -| `width` | 图片宽度 | _string \| number_ | `-` | -| `height` | 图片高度 | _string \| number_ | `-` | -| `radius` | 图片圆角 | _string \| number_ | `-` | -| `lazy` | 是否开启懒加载 | _boolean_ | `false` | -| `loading` | 当开启懒加载时, 加载中显示的图片 | _string_ | `-` | -| `error` | 当开启懒加载时, 加载失败显示的图片 | _string_ | `-` | -| `ripple` | 是否开启水波 | _boolean_ | `false` | -| `block` | 是否是块级元素 | _boolean_ | `true` | +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-------------------------------------------------| --- | --- | +| `src` | 图片地址 | _string_ | `-` | +| `fit` | 填充模式, 可选值为 `fill contain cover none scale-down` | _string_ | `fill` | +| `alt` | 替代文本，和 `img` 标签原生属性一致 | _string_ | `-` | +| `title` | 图片描述性文字，和 `img` 标签原生属性一致 | _string_ | `-` | +| `width` | 图片宽度 | _string \| number_ | `-` | +| `height` | 图片高度 | _string \| number_ | `-` | +| `radius` | 图片圆角 | _string \| number_ | `-` | +| `lazy` | 是否开启懒加载 | _boolean_ | `false` | +| `loading` | 当开启懒加载时, 加载中显示的图片 | _string_ | `-` | +| `error` | 当开启懒加载时, 加载失败显示的图片 | _string_ | `-` | +| `ripple` | 是否开启水波 | _boolean_ | `false` | +| `block` | 是否是块级元素 | _boolean_ | `true` | ### 事件 diff --git a/packages/varlet-ui/src/image/props.ts b/packages/varlet-ui/src/image/props.ts index 17970dfce9a..89332d58fe2 100644 --- a/packages/varlet-ui/src/image/props.ts +++ b/packages/varlet-ui/src/image/props.ts @@ -16,6 +16,9 @@ export const props = { alt: { type: String, }, + title: { + type: String, + }, width: { type: [String, Number], }, diff --git a/packages/varlet-ui/types/image.d.ts b/packages/varlet-ui/types/image.d.ts index d6fc091f094..226fe6bd36b 100644 --- a/packages/varlet-ui/types/image.d.ts +++ b/packages/varlet-ui/types/image.d.ts @@ -5,6 +5,7 @@ type ImageFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' export interface ImageProps extends BasicAttributes { src?: string fit?: ImageFit + title?: string alt?: string width?: string | number height?: string | number