【imagePreview】disableDefault支持动态修改,修复md文档中的错误 (DevCloudFE#21)

* fix: 修复alert设置dismissTimer后提前点击close报错，空样式等问题。 * fix: imagePreview的disableDefault支持动态修改,修复md文档中的错误

Author: liuxdi

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">