fix(image): doesn't accept attributes, set border-radius not working, c…

…loses #427
tusen-ai · Jul 7, 2021 · cfff4e8 · cfff4e8
1 parent 74ad691
commit cfff4e8
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 112 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -5,6 +5,8 @@
 - Fix `n-select` bug in using custom label, closes [#352](https://github.com/TuSimple/naive-ui/issues/352).
 - Fix `n-carousel` when `autoplay` dot active status isn't displayed correctly, closes [#434](https://github.com/TuSimple/naive-ui/issues/434).
 - Fix `n-input` fixed clearable position, closes [#428](https://github.com/TuSimple/naive-ui/issues/428).
+- Fix `n-image` doesn't accept attributes.
+- Fix `n-image` set border-radius not working, closes [#427](https://github.com/TuSimple/naive-ui/issues/427).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -5,6 +5,8 @@
 - 修复 `n-select` 自定义 label 的显示问题，关闭 [#352](https://github.com/TuSimple/naive-ui/issues/352)
 - 修复 `n-carousel` 设定 `autoplay` 点击后 dot active 状态不正常，关闭 [#434](https://github.com/TuSimple/naive-ui/issues/434)
 - 修复 `n-input` 清空按钮位置引起的样式问题，关闭 [#428](https://github.com/TuSimple/naive-ui/issues/428)
+- 修复 `n-image` 不接受 attributes
+- 修复 `n-image` 设定 border-radius 无效，关闭 [#427](https://github.com/TuSimple/naive-ui/issues/427)
 
 ### Feats
 

diff --git a/src/image/src/Image.tsx b/src/image/src/Image.tsx
@@ -1,4 +1,12 @@
-import { defineComponent, h, inject, ref, PropType, toRef } from 'vue'
+import {
+  defineComponent,
+  h,
+  inject,
+  ref,
+  PropType,
+  toRef,
+  mergeProps
+} from 'vue'
 import NImagePreview from './ImagePreview'
 import type { ImagePreviewInst } from './ImagePreview'
 import { imageGroupInjectionKey } from './ImageGroup'
@@ -31,6 +39,7 @@ export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
 export default defineComponent({
   name: 'Image',
   props: imageProps,
+  inheritAttrs: false,
   setup (props) {
     const imageRef = ref<HTMLImageElement | null>(null)
     const imgPropsRef = toRef(props, 'imgProps')
@@ -61,7 +70,12 @@ export default defineComponent({
   render () {
     const { mergedClsPrefix, imgProps = {} } = this
 
-    const imgNode = (
+    const imgWrapperNode = h(
+      'div',
+      mergeProps(this.$attrs, {
+        role: 'none',
+        class: `${mergedClsPrefix}-image`
+      }),
       <img
         {...imgProps}
         class={this.groupId}
@@ -76,23 +90,15 @@ export default defineComponent({
     )
 
     return this.groupId ? (
-      <div class={`${mergedClsPrefix}-image`} role="none">
-        {imgNode}
-      </div>
+      imgWrapperNode
     ) : (
       <NImagePreview
         clsPrefix={mergedClsPrefix}
         ref="previewInstRef"
         showToolbar={this.showToolbar}
       >
         {{
-          default: () => {
-            return (
-              <div class={`${mergedClsPrefix}-image`} role="none">
-                {imgNode}
-              </div>
-            )
-          }
+          default: () => imgWrapperNode
         }}
       </NImagePreview>
     )

diff --git a/src/image/src/ImagePreview.tsx b/src/image/src/ImagePreview.tsx
@@ -37,7 +37,7 @@ export interface ImagePreviewInst {
 }
 
 export default defineComponent({
-  name: 'Image',
+  name: 'ImagePreview',
   props: {
     showToolbar: Boolean,
     onNext: Function as PropType<() => void>,
@@ -253,25 +253,10 @@ export default defineComponent({
             default: () =>
               this.show || this.displayed
                 ? withDirectives(
-                  <div
-                    class={`${clsPrefix}-image-preview-container`}
-                    style={this.cssVars as CSSProperties}
-                  >
-                    <Transition
-                      name="fade-in-transition"
-                      appear={this.appear}
+                    <div
+                      class={`${clsPrefix}-image-preview-container`}
+                      style={this.cssVars as CSSProperties}
                     >
-                      {{
-                        default: () =>
-                          this.show ? (
-                            <div
-                              class={`${clsPrefix}-image-preview-overlay`}
-                              onClick={this.toggleShow}
-                            />
-                          ) : null
-                      }}
-                    </Transition>
-                    {this.showToolbar ? (
                       <Transition
                         name="fade-in-transition"
                         appear={this.appear}
@@ -280,89 +265,104 @@ export default defineComponent({
                           default: () =>
                             this.show ? (
                               <div
-                                class={`${clsPrefix}-image-preview-toolbar`}
-                              >
-                                {this.onPrev ? (
-                                  <>
-                                    <NBaseIcon
-                                      clsPrefix={clsPrefix}
-                                      onClick={this.onPrev}
-                                    >
-                                      {{ default: () => prevIcon }}
-                                    </NBaseIcon>
-                                    <NBaseIcon
-                                      clsPrefix={clsPrefix}
-                                      onClick={this.onNext}
-                                    >
-                                      {{ default: () => nextIcon }}
-                                    </NBaseIcon>
-                                  </>
-                                ) : null}
-                                <NBaseIcon
-                                  clsPrefix={clsPrefix}
-                                  onClick={this.rotateCounterclockwise}
-                                >
-                                  {{
-                                    default: () => (
-                                      <RotateCounterclockwiseIcon />
-                                    )
-                                  }}
-                                </NBaseIcon>
-                                <NBaseIcon
-                                  clsPrefix={clsPrefix}
-                                  onClick={this.rotateClockwise}
-                                >
-                                  {{ default: () => <RotateClockwiseIcon /> }}
-                                </NBaseIcon>
-                                <NBaseIcon
-                                  clsPrefix={clsPrefix}
-                                  onClick={this.zoomOut}
-                                >
-                                  {{ default: () => <ZoomOutIcon /> }}
-                                </NBaseIcon>
-                                <NBaseIcon
-                                  clsPrefix={clsPrefix}
-                                  onClick={this.zoomIn}
-                                >
-                                  {{ default: () => <ZoomInIcon /> }}
-                                </NBaseIcon>
-                              </div>
+                                class={`${clsPrefix}-image-preview-overlay`}
+                                onClick={this.toggleShow}
+                              />
                             ) : null
                         }}
                       </Transition>
-                    ) : null}
-                    <Transition
-                      name="fade-in-scale-up-transition"
-                      onAfterLeave={this.handleAfterLeave}
-                      appear={this.appear}
-                      // BUG:
-                      // onEnter will be called twice, I don't know why
-                      // Maybe it is a bug of vue
-                      onEnter={this.syncTransformOrigin}
-                      onBeforeLeave={this.syncTransformOrigin}
-                    >
-                      {{
-                        default: () =>
-                          withDirectives(
-                            <div
-                              class={`${clsPrefix}-image-preview-wrapper`}
-                              ref="previewWrapperRef"
-                            >
-                              <img
-                                draggable={false}
-                                onMousedown={this.handlePreviewMousedown}
-                                class={`${clsPrefix}-image-preview`}
-                                key={this.previewSrc}
-                                src={this.previewSrc}
-                                ref="previewRef"
-                              />
-                            </div>,
-                            [[vShow, this.show]]
-                          )
-                      }}
-                    </Transition>
-                  </div>,
-                  [[zindexable, { enabled: this.show }]]
+                      {this.showToolbar ? (
+                        <Transition
+                          name="fade-in-transition"
+                          appear={this.appear}
+                        >
+                          {{
+                            default: () =>
+                              this.show ? (
+                                <div
+                                  class={`${clsPrefix}-image-preview-toolbar`}
+                                >
+                                  {this.onPrev ? (
+                                    <>
+                                      <NBaseIcon
+                                        clsPrefix={clsPrefix}
+                                        onClick={this.onPrev}
+                                      >
+                                        {{ default: () => prevIcon }}
+                                      </NBaseIcon>
+                                      <NBaseIcon
+                                        clsPrefix={clsPrefix}
+                                        onClick={this.onNext}
+                                      >
+                                        {{ default: () => nextIcon }}
+                                      </NBaseIcon>
+                                    </>
+                                  ) : null}
+                                  <NBaseIcon
+                                    clsPrefix={clsPrefix}
+                                    onClick={this.rotateCounterclockwise}
+                                  >
+                                    {{
+                                      default: () => (
+                                        <RotateCounterclockwiseIcon />
+                                      )
+                                    }}
+                                  </NBaseIcon>
+                                  <NBaseIcon
+                                    clsPrefix={clsPrefix}
+                                    onClick={this.rotateClockwise}
+                                  >
+                                    {{ default: () => <RotateClockwiseIcon /> }}
+                                  </NBaseIcon>
+                                  <NBaseIcon
+                                    clsPrefix={clsPrefix}
+                                    onClick={this.zoomOut}
+                                  >
+                                    {{ default: () => <ZoomOutIcon /> }}
+                                  </NBaseIcon>
+                                  <NBaseIcon
+                                    clsPrefix={clsPrefix}
+                                    onClick={this.zoomIn}
+                                  >
+                                    {{ default: () => <ZoomInIcon /> }}
+                                  </NBaseIcon>
+                                </div>
+                              ) : null
+                          }}
+                        </Transition>
+                      ) : null}
+                      <Transition
+                        name="fade-in-scale-up-transition"
+                        onAfterLeave={this.handleAfterLeave}
+                        appear={this.appear}
+                        // BUG:
+                        // onEnter will be called twice, I don't know why
+                        // Maybe it is a bug of vue
+                        onEnter={this.syncTransformOrigin}
+                        onBeforeLeave={this.syncTransformOrigin}
+                      >
+                        {{
+                          default: () =>
+                            withDirectives(
+                              <div
+                                class={`${clsPrefix}-image-preview-wrapper`}
+                                ref="previewWrapperRef"
+                              >
+                                <img
+                                  draggable={false}
+                                  onMousedown={this.handlePreviewMousedown}
+                                  class={`${clsPrefix}-image-preview`}
+                                  key={this.previewSrc}
+                                  src={this.previewSrc}
+                                  ref="previewRef"
+                                />
+                              </div>,
+                              [[vShow, this.show]]
+                            )
+                        }}
+                      </Transition>
+                    </div>,
+                    [[zindexable, { enabled: this.show }]]
                 )
                 : null
           }}

diff --git a/src/image/src/styles/index.cssr.ts b/src/image/src/styles/index.cssr.ts
@@ -72,5 +72,7 @@ export default c([
   cB('image', `
     display: inline-flex;
     cursor: pointer;
-  `)
+  `, [
+    c('img', 'border-radius: inherit;')
+  ])
 ])