feat(ui/image): support title prop

varletjs · Oct 13, 2022 · 48462bb · 48462bb
1 parent ab90d4b
commit 48462bb
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 26 deletions.
diff --git a/packages/varlet-ui/src/image/Image.vue b/packages/varlet-ui/src/image/Image.vue
@@ -11,6 +11,7 @@
     <img
       :class="n('image')"
       :alt="alt"
+      :title="title"
       :lazy-error="error"
       :lazy-loading="loading"
       :style="{ objectFit: fit }"
@@ -24,6 +25,7 @@
     <img
       :class="n('image')"
       :alt="alt"
+      :title="title"
       :style="{ objectFit: fit }"
       :src="src"
       v-else

diff --git a/packages/varlet-ui/src/image/__tests__/index.spec.js b/packages/varlet-ui/src/image/__tests__/index.spec.js
@@ -113,14 +113,16 @@ describe('test image component props', () => {
     })
   })
 
-  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
@@ -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
@@ -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
@@ -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
@@ -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