feat(image): add alt prop (#335)

* feat:n-input Support hidden password * feat(form): support require-mark-placement(#171) * Revert "feat(form): support require-mark-placement(#171)" This reverts commit 0627777. * Revert "feat:n-input Support hidden password" This reverts commit ea64917. * feat(input): add alt prop * feat(input): add alt prop * feat(input): add alt prop
tusen-ai · Jul 1, 2021 · 322bf2c · 322bf2c
1 parent efc0ba1
commit 322bf2c
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 4 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,13 +2,16 @@
 
 ## Pending
 
+### Breaking Changes
+
 - `n-select` add `render-tag` prop.
 
 ### Feats
 
 - `n-carousel` add `trigger` prop.
 - `n-menu` add `dropdown-placement` prop.
 - `n-upload` add `before-upload` prop.
+- `n-image` add `alt` prop.
 - Support the enter key on the numeric keypad.
 - `n-form` export `FormItemRule` & `FormRules` type.
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -2,13 +2,16 @@
 
 ## Pending
 
+### Breaking Changes
+
 - `n-select` 新增 `render-tag` 属性
 
 ### Feats
 
 - `n-carousel` 增加 `trigger` 属性增加触发切换的方式
 - `n-menu` 新增 `dropdown-placement` 属性
 - `n-upload` 新增 `before-upload` 属性
+- `n-image` 新增 `alt` 属性.
 - 支持小键盘的 enter 键
 - `n-form` 导出 `FormItemRule` & `FormRules` 类型
 

diff --git a/src/image/src/Image.tsx b/src/image/src/Image.tsx
@@ -6,6 +6,7 @@ import { ExtractPublicPropTypes } from '../../_utils'
 import { useConfig } from '../../_mixins'
 
 const imageProps = {
+  alt: String,
   width: [String, Number] as PropType<string | number>,
   height: [String, Number] as PropType<string | number>,
   src: String,
@@ -45,13 +46,15 @@ export default defineComponent({
   render () {
     const { mergedClsPrefix } = this
     return this.groupId ? (
-      <div class={`${mergedClsPrefix}-image`}>
+      <div class={`${mergedClsPrefix}-image`} role="none">
         <img
           class={this.groupId}
           ref="imageRef"
           width={this.width}
           height={this.height}
           src={this.src}
+          alt={this.alt}
+          aria-label={this.alt}
           onClick={this.handleClick}
         />
       </div>
@@ -64,12 +67,14 @@ export default defineComponent({
         {{
           default: () => {
             return (
-              <div class={`${mergedClsPrefix}-image`}>
+              <div class={`${mergedClsPrefix}-image`} role="none">
                 <img
                   ref="imageRef"
                   width={this.width}
                   height={this.height}
                   src={this.src}
+                  alt={this.alt}
+                  aria-label={this.alt}
                   onClick={this.handleClick}
                 />
               </div>

diff --git a/src/upload/demos/enUS/before-upload.demo.md b/src/upload/demos/enUS/before-upload.demo.md
@@ -21,7 +21,9 @@ export default defineComponent({
     return {
       async beforeUpload ({ file, fileList }) {
         if (file.file.type !== 'image/png') {
-          message.error('Only upload picture files in png format, please re-upload.')
+          message.error(
+            'Only upload picture files in png format, please re-upload.'
+          )
           return false
         }
         return true

diff --git a/src/upload/demos/enUS/index.demo-entry.md b/src/upload/demos/enUS/index.demo-entry.md
@@ -40,7 +40,8 @@ before-upload
 | on-update:file-list | `(fileList: UploadFile[]) => void` | `undefined` | Callback function triggered on fileList changes. |
 | on-finish | `(options: { file: UploadFile }) => UploadFile \| void` | `({ file }) => file` | The callback of file upload finish. You can modify the UploadFile or retun a new UploadFile. |
 | on-remove | `(options: { file: UploadFile, fileList: Array<UploadFile> }) => boolean \| Promise<boolean> \| any` | `() => true` | The callback of file removal. Return false, promise resolve false or promise reject will cancel this removal. |
-| on-before-upload | `(options: { file: UploadFile, fileList: Array<UploadFile> }) => (Promise<boolean \| void> \| boolean \| void)` | `true` | Callback before file is uploaded, return false or a Promise that resolve false or reject will cancel this upload.  |
+| on-before-upload | `(options: { file: UploadFile, fileList: Array<UploadFile> }) => (Promise<boolean \| void> \| boolean \| void)` | `true` | Callback before file is uploaded, return false or a Promise that resolve false or reject will cancel this upload. |
+
 ### UploadFile Type
 
 | Property | Type | Description |

diff --git a/src/upload/demos/zhCN/index.demo-entry.md b/src/upload/demos/zhCN/index.demo-entry.md
@@ -40,6 +40,7 @@ before-upload
 | on-finish | `(options: { file: UploadFile }) => UploadFile \| void` | `({ file }) => file` | 文件上传结束的回调，可以修改传入的 UploadFile 或者返回一个新的 UploadFile |
 | on-update:file-list | `(fileList: UploadFile[]) => void` | `undefined` | 当 file-list 改变时触发的回调函数 |
 | on-before-upload | `(options: { file: UploadFile, fileList: UploadFile[] }) => (Promise<boolean \| void> \| boolean \| void)` | `undefined` | 文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传 |
+
 ### UploadFile Type
 
 | 属性 | 类型 | 说明 |