【imagePreview】disableDefault支持动态修改,修复md文档中的错误

packages/devui-vue/devui/image-preview/src/image-preview-directive.ts

@@ -1,4 +1,4 @@
-import { BindingTypes, ImagePreviewProps } from './image-preview-types'
+import { BindingTypes, ImagePreviewProps, UpdateBindingTypes } from './image-preview-types'
 import ImagePreviewService from './image-preview-service'
 
 interface PreviewHTMLElement extends HTMLElement {
@@ -24,24 +24,27 @@ function getImgByEl(el: HTMLElement): Array<string> {
   )
   return urlList
 }
-
 function handleImgByEl(el: PreviewHTMLElement) {
-  el.addEventListener('click', (e: MouseEvent) => {
-    e.stopPropagation()
-    const target = e.target as PreviewHTMLElement
-    if (target?.nodeName?.toLowerCase() === 'img') {
-      const urlList = getImgByEl(el)
-      const url = target.getAttribute('src')
-      mountedPreviewImages({
-        url,
-        previewUrlList: urlList,
-        zIndex: el?.zIndex,
-        backDropZIndex: el?.backDropZIndex
-      })
-    }
-  })
+  el.addEventListener('click', handleImg)
+}
+function removeHandle(el: PreviewHTMLElement) {
+  el.removeEventListener('click', handleImg)
+}
+function handleImg(e: MouseEvent) {
+  e.stopPropagation()
+  const el = e.currentTarget as PreviewHTMLElement
+  const target = e.target as PreviewHTMLElement
+  if (target?.nodeName?.toLowerCase() === 'img') {
+    const urlList = getImgByEl(el)
+    const url = target.getAttribute('src')
+    mountedPreviewImages({
+      url,
+      previewUrlList: urlList,
+      zIndex: el?.zIndex,
+      backDropZIndex: el?.backDropZIndex
+    })
+  }
 }
-
 export default {
   mounted(el: PreviewHTMLElement, binding: BindingTypes | undefined) {
     if (!binding.value) {
@@ -69,8 +72,22 @@ export default {
   unmounted() {
     unmountedPreviewImages()
   },
-  updated(el: PreviewHTMLElement, binding) {
+  updated(el: PreviewHTMLElement, binding: UpdateBindingTypes | undefined) {
     el.zIndex = binding.value?.zIndex
     el.backDropZIndex = binding.value?.backDropZIndex
+
+    if (binding.value) {
+      const {
+        value: { disableDefault },
+        oldValue: { disableDefault: oldDisableDefault }
+      } = binding
+      if (disableDefault !== oldDisableDefault) {
+        if (disableDefault) {
+          removeHandle(el)
+        } else {
+          handleImgByEl(el)
+        }
+      }
+    }
   }
 }

packages/devui-vue/devui/image-preview/src/image-preview-types.ts

@@ -30,5 +30,7 @@ export interface BindingTypes {
   }
   [key: string]: any
 }
-
+export interface UpdateBindingTypes extends BindingTypes {
+  oldValue: BindingTypes['value']
+}
 export type ImagePreviewProps = ExtractPropTypes<typeof imagePreviewProps>

packages/devui-vue/docs/components/image-preview/index.md

@@ -99,7 +99,10 @@ export default defineComponent({
     </d-radio-group>
     <span class="text">backDropZIndex: {{ backDropZIndex }}</span>
   </div>
-  <div v-d-image-preview="{ zIndex, backDropZIndex }" class="devui-image-preview-demo">
+  <div
+    v-d-image-preview="{ zIndex: Number(zIndex), backDropZIndex: Number(backDropZIndex) }"
+    class="devui-image-preview-demo"
+  >
     <img v-for="src in imageList" :src="src" :key="src" />
   </div>
 </template>
@@ -111,10 +114,10 @@ export default defineComponent({
       'https://devui.design/components/assets/image1.png',
       'https://devui.design/components/assets/image3.png'
     ])
-    const zIndexList = ref([1000, 1050, 1100])
-    const backDropZIndexList = ref([900, 1040, 1000])
-    const zIndex = ref(1050)
-    const backDropZIndex = ref(1040)
+    const zIndexList = ref(['1000', '1050', '1100'])
+    const backDropZIndexList = ref(['900', '1040', '1000'])
+    const zIndex = ref('1050')
+    const backDropZIndex = ref('1040')
 
     return {
       imageList,
@@ -136,7 +139,7 @@ export default defineComponent({
 | :------------: | :-------: | :---: | :------------------------------------------------------------ |
 |     custom     | `Object`  |  --   | 可选，指令会自动注入 open 方法，通过 custom.open 开启预览窗口 |
 | disableDefault | `Boolean` | false | 可选，关闭默认点击触发图片预览方式                            |
-|     zIndex     | `Number`  | 1050  | 可选，可选，设置预览时图片的 z-index 值                       |
+|     zIndex     | `Number`  | 1050  | 可选，设置预览时图片的 z-index 值                             |
 | backDropZIndex | `Number`  | 1040  | 可选，设置预览时图片背景的 z-index 值                         |
 
 <style lang="scss">