ant-design-vue icon indicating copy to clipboard operation
ant-design-vue copied to clipboard

Image component adds custom preview option function and documentation, demo description

Open LadyChatterleyLover opened this issue 3 years ago • 3 comments
trafficstars

First of all, thank you for your contribution! 😄

New feature please send pull request to feature branch, and rest to master branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!

[中文版模板 / Chinese template]

This is a ...

  • [√] New feature
  • [ ] Bug fix
  • [ ] Site / document update
  • [ ] Component style update
  • [ ] TypeScript definition update
  • [ ] Refactoring
  • [ ] Code style optimization
  • [ ] Branch merge
  • [ ] Other (about what?)

What's the background?

  1. Image组件在设置很小的时候,文字出现错乱
  2. Image组件新增showType属性
  3. Related issue link.

API Realization (Optional if not new feature)

  1. Image组件新增showType属性
  2. showType: 'both' | 'text' | 'icon'

1

What's the effect? (Optional if not new feature)

  1. 不影响用户使用
  2. Image组件新增showType属性来自定义预览选项
  3. 不包含任何影响

Changelog description (Optional if not new feature)

  1. Image control the preview options to display only icons or only text
  2. Image组件可控制预览选项仅显示图标或仅显示文字或都显示。

Self Check before Merge

  • [√] Doc is updated/provided or not needed
  • [√ ] Demo is updated/provided or not needed
  • [√] TypeScript definition is updated/provided or not needed
  • [√ ] Changelog is provided or not needed

Additional Plan? (Optional if not new feature)

If this PR related with other PR or following info. You can type here.

LadyChatterleyLover avatar Jul 15 '22 09:07 LadyChatterleyLover

与目前的previewMaskAPI功能上有点重叠了,使用previewMask插槽/函数也可以做到一样的事情,就是稍微麻烦一点。

<template>
  <Image
    :width="200"
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  >
    <template #previewMask>
      <EyeOutlined />
    </template>
  </Image>
</template>
<script lang="ts" setup>
  import { EyeOutlined } from '@ant-design/icons-vue';
  import { Image } from 'ant-design-vue';
</script>

ant.design并没有showType相关API,ant design貌似也仅支持通过配置previewType mask来自定义mask(效果同previewMask),不过showType在某些场景下可以认为是一种快捷方式吧!@tangjinzhou 唐老师,你怎么看?

buqiyuan avatar Jul 16 '22 04:07 buqiyuan

@buqiyuan showType确实在某些场景是一种快捷方式,previewMask这样做有些麻烦

LadyChatterleyLover avatar Jul 16 '22 05:07 LadyChatterleyLover

与目前的previewMaskAPI功能上有点重叠了,使用previewMask插槽/函数也可以做到一样的事情,就是稍微麻烦一点。

<template>
  <Image
    :width="200"
    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  >
    <template #previewMask>
      <EyeOutlined />
    </template>
  </Image>
</template>
<script lang="ts" setup>
  import { EyeOutlined } from '@ant-design/icons-vue';
  import { Image } from 'ant-design-vue';
</script>

ant.design并没有showType相关API,ant design貌似也仅支持通过配置previewType mask来自定义mask(效果同previewMask),不过showType在某些场景下可以认为是一种快捷方式吧!@tangjinzhou 唐老师,你怎么看?

保持同步吧,可以用 css 覆盖来隐藏也是可以的吧

tangjinzhou avatar Jul 24 '22 01:07 tangjinzhou

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

github-actions[bot] avatar Aug 26 '23 00:08 github-actions[bot]