feat: 新增配置项

Author: Tyh2001

CHANGELOG.md

@@ -5,6 +5,7 @@
 **fix**
 
 - 修复 `FImage` 组件旋转方向一致的问题
+- 修复 `FIcon` 组件预览窗操作点击失效问题，处理点击焦点位置
 - 修复 `FIcon`、`FButton` 组件的类型问题
 - `FImage` 组件的 `select` 属性改为 `no-select` 用于禁止选择
 
@@ -17,6 +18,7 @@
 - 新增 `FImage` 组件预览图左右按钮切换加入图片长度识别，是否展示效果
 - 新增 `FImage` 组件 `show-close-btn` 配置项可配置是否展示预览窗的关闭按钮
 - 新增 `FImage` 组件可通过鼠标滚轮放大缩小图片功能
+- 新增 `FImage` 组件 `preview-round` 配置项，可配置预览图的圆角
 
 ## 0.0.5 beta.5 (2022-05-27)
 

docs/docs/components/image.md

@@ -190,16 +190,17 @@
 | fit                 | 如何适应容器，原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#try_it) 属性     | string   | `fill` `contain` `cover` `none` `scale-down` | ——     |
 | no-select           | 是否禁止选择                                                                                                 | boolean  | ——                                           | false  |
 | referrer-policy     | 原生 [referrerPolicy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy#syntax) 属性 | string   | ——                                           | ——     |
-| preview-list        | 开启图片预览                                                                                                 | string[] | ——                                           | []     |
-| preview-show-index  | 图片预览展示的首张图的索引，从 0 开始                                                                        | number   | ——                                           | 0      |
-| preview-z-index     | 图片预览展示的 [z-index](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index)                           | number   | ——                                           | 999    |
-| preview-show-option | 是否展示图片预览下面的操作栏                                                                                 | boolean  | ——                                           | true   |
 | round               | 配置圆角，传入一个单位                                                                                       | string   | ——                                           | ——     |
 | err-src             | 加载失败时要显示的地址                                                                                       | string   | ——                                           | ——     |
 | caption             | 图片上的说明文字                                                                                             | string   | ——                                           | ——     |
 | caption-color       | 图片上的说明文字的颜色                                                                                       | string   | ——                                           | #fff   |
 | modal-close         | 是否点击遮罩层关闭预览窗                                                                                     | boolean  | ——                                           | true   |
 | show-close-btn      | 是否展示预览窗口的关闭按钮                                                                                   | boolean  | ——                                           | true   |
+| preview-list        | 开启图片预览                                                                                                 | string[] | ——                                           | []     |
+| preview-show-index  | 图片预览展示的首张图的索引，从 0 开始                                                                        | number   | ——                                           | 0      |
+| preview-z-index     | 图片预览展示的 [z-index](https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index)                           | number   | ——                                           | 999    |
+| preview-show-option | 是否展示图片预览下面的操作栏                                                                                 | boolean  | ——                                           | true   |
+| preview-round       | 预览图的圆角 ，传入一个单位                                                                                  | string   | ——                                           | ——     |
 
 ## Events
 

packages/fighting-components/image/src/PreviewList.ts

@@ -2,7 +2,7 @@ import { PropType } from 'vue'
 
 export const Props = {
   previewList: {
-    type: Array as PropType<string[]>,
+    type: Array as PropType<Array<string>>,
     default: (): [] => []
   },
   previewShowIndex: {
@@ -24,6 +24,10 @@ export const Props = {
   showCloseBtn: {
     type: Boolean,
     default: (): boolean => true
+  },
+  previewRound: {
+    type: String,
+    default: (): string => ''
   }
 } as const
 

packages/fighting-components/image/src/PreviewList.vue

@@ -10,27 +10,30 @@
         class="f-image-showImg"
         draggable="false"
         :src="previewList[previewShowIndex]"
-        :style="{ transform: `scale(${scale}) rotate(${rotate}deg)` }"
+        :style="{
+          transform: `scale(${scale}) rotate(${rotate}deg)`,
+          borderRadius: previewRound
+        }"
       />
 
-      <div v-if="previewList.length > 1" class="right_button">
-        <f-icon
-          size="30px"
-          icon="f-icon-arrow-right"
-          @click="switchImage('next')"
-        />
+      <div
+        v-if="previewList.length > 1"
+        class="right_button"
+        @click="switchImage('next')"
+      >
+        <f-icon size="30px" icon="f-icon-arrow-right" />
       </div>
 
-      <div v-if="previewList.length > 1" class="left_button">
-        <f-icon
-          size="30px"
-          icon="f-icon-arrow-left"
-          @click="switchImage('prev')"
-        />
+      <div
+        v-if="previewList.length > 1"
+        class="left_button"
+        @click="switchImage('prev')"
+      >
+        <f-icon size="30px" icon="f-icon-arrow-left" />
       </div>
 
-      <div v-if="showCloseBtn" class="close_button">
-        <f-icon size="20px" icon="f-icon-close" @click="close" />
+      <div v-if="showCloseBtn" class="close_button" @click="close">
+        <f-icon size="20px" icon="f-icon-close" />
       </div>
 
       <div v-if="previewShowOption" class="option" @click="optionClick">
@@ -168,6 +171,7 @@
   }
 
   const onImgMousewheel = (evt: WheelEvent): void => {
+    evt.preventDefault()
     if (evt.deltaY > 1) {
       smaller()
       return

packages/fighting-components/image/src/image.ts

@@ -51,22 +51,6 @@ export const Props = {
     type: String,
     default: (): string => ''
   },
-  previewList: {
-    type: Array as PropType<string[]>,
-    default: (): [] => []
-  },
-  previewShowIndex: {
-    type: Number,
-    default: (): number => 0
-  },
-  previewZIndex: {
-    type: Number,
-    default: (): number => 999
-  },
-  previewShowOption: {
-    type: Boolean,
-    default: (): boolean => true
-  },
   round: {
     type: String,
     default: (): string => ''
@@ -90,6 +74,26 @@ export const Props = {
   showCloseBtn: {
     type: Boolean,
     default: (): boolean => true
+  },
+  previewList: {
+    type: Array as PropType<string[]>,
+    default: (): [] => []
+  },
+  previewShowIndex: {
+    type: Number,
+    default: (): number => 0
+  },
+  previewZIndex: {
+    type: Number,
+    default: (): number => 999
+  },
+  previewShowOption: {
+    type: Boolean,
+    default: (): boolean => true
+  },
+  previewRound: {
+    type: String,
+    default: (): string => ''
   }
 } as const
 

packages/fighting-components/image/src/image.vue

@@ -39,6 +39,7 @@
       :previewZIndex="previewZIndex"
       :modalClose="modalClose"
       :showCloseBtn="showCloseBtn"
+      :previewRound="previewRound"
       @close="onClose"
     />
   </div>

packages/fighting-theme/src/image.scss

@@ -69,8 +69,8 @@
   .right_button,
   .left_button,
   .close_button {
-    width: 54px;
-    height: 54px;
+    width: 50px;
+    height: 50px;
     background: rgba(255, 255, 255, 0.5);
     border-radius: 50%;
     position: absolute;

start/src/App.vue

@@ -9,6 +9,11 @@
     alt="ada"
     :preview-list="listImg"
     :select="true"
+    :preview-z-index="10022"
+    :preview-show-option="false"
+    round="20px"
+    preview-round="120px"
+    caption="回到家啊回到家萨的好时机啊的话苏家爱华打算结婚的洒酒大数据坎大哈时间坎大哈时间的撒健康大数据坎大哈事件扩大化"
     :preview-show-index="32"
     block
   />