{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-modal/index.vue"],"sourcesContent":["<template>\r\n  <teleport to=\"body\" :disabled=\"!transfer\">\r\n    <!-- 蒙版 -->\r\n    <transition :name=\"`${transitionNames[1]}`\">\r\n      <div\r\n        :class=\"`${prefixCls}-mask`\"\r\n        :style=\"wrapperStyles\"\r\n        @click=\"handleMask\"\r\n        v-show=\"data.visible\"\r\n        v-if=\"showMask\"\r\n      ></div>\r\n    </transition>\r\n    <!-- 弹窗外层 -->\r\n    <div\r\n      :class=\"wrapperClasses\"\r\n      :style=\"wrapperStyles\"\r\n      @click=\"handleWrapperClick\"\r\n    >\r\n      <transition\r\n        :name=\"`${transitionNames[0]}`\"\r\n        @after-leave=\"handleAfterLeave\"\r\n      >\r\n        <!-- 弹窗 -->\r\n        <div\r\n          :class=\"modalClasses\"\r\n          :style=\"modalStyles\"\r\n          v-show=\"data.visible\"\r\n          @mousedown=\"handleMousedown\"\r\n        >\r\n          <!-- 弹窗内容 -->\r\n          <div\r\n            :class=\"contentClasses\"\r\n            :style=\"contentStyles\"\r\n            @click=\"handleClickModal\"\r\n            ref=\"contentRef\"\r\n          >\r\n            <!-- close -->\r\n            <div :class=\"`${prefixCls}-close`\" @click=\"close\" v-if=\"closable\">\r\n              <slot name=\"close\">\r\n                <ivue-icon>{{ closeIcon }}</ivue-icon>\r\n              </slot>\r\n            </div>\r\n            <!-- 头部 -->\r\n            <div :class=\"`${prefixCls}-header`\" ref=\"headerRef\" v-if=\"showHead\">\r\n              <slot name=\"header\">\r\n                <div :class=\"`${prefixCls}-header--content`\">{{ title }}</div>\r\n              </slot>\r\n            </div>\r\n            <!-- 内容 -->\r\n            <!-- 使用v-if重新渲染body -->\r\n            <div :class=\"`${prefixCls}-body`\" v-if=\"resetBody\">\r\n              <template v-if=\"data.resetRenderBody\">\r\n                <slot></slot>\r\n              </template>\r\n            </div>\r\n            <!-- 普通渲染 -->\r\n            <div :class=\"`${prefixCls}-body`\" v-else>\r\n              <slot></slot>\r\n            </div>\r\n            <!-- 底部 -->\r\n            <div :class=\"`${prefixCls}-footer`\" v-if=\"!footerHide\">\r\n              <slot name=\"footer\">\r\n                <!-- 关闭 -->\r\n                <ivue-button\r\n                  :class=\"`${prefixCls}-footer--button`\"\r\n                  outline\r\n                  color=\"#dcdfe6\"\r\n                  @click=\"handleCancel\"\r\n                  >{{ cancelText }}</ivue-button\r\n                >\r\n                <!-- 确认 -->\r\n                <ivue-button\r\n                  :class=\"`${prefixCls}-footer--button`\"\r\n                  depressed\r\n                  status=\"primary\"\r\n                  :loading=\"data.buttonLoading\"\r\n                  @click=\"handleConfirm\"\r\n                  >{{ confirmText }}</ivue-button\r\n                >\r\n              </slot>\r\n            </div>\r\n          </div>\r\n          <!-- 加载中 -->\r\n          <ivue-spin\r\n            :class=\"`${prefixCls}-spin`\"\r\n            fix\r\n            :show=\"data.spinLoading\"\r\n          ></ivue-spin>\r\n        </div>\r\n      </transition>\r\n    </div>\r\n  </teleport>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  computed,\r\n  defineComponent,\r\n  getCurrentInstance,\r\n  onBeforeUnmount,\r\n  onMounted,\r\n  reactive,\r\n  ref,\r\n  watch,\r\n} from 'vue';\r\nimport { useEventListener } from '@vueuse/core';\r\n\r\nimport { scrollbarMixins } from './mixins-scrollbar';\r\n\r\nimport {\r\n  transferIndex as modalIndex,\r\n  transferIncrease as modalIncrease,\r\n} from '../../utils/transfer-queue';\r\nimport { currentUid, setCurrentUid } from '../../utils/current-event';\r\nimport { deepCopy } from '../../utils/assist';\r\nimport { oneOf } from '../../utils/assist';\r\nimport { useDraggable } from '../../hooks';\r\n\r\n// components\r\nimport IvueIcon from '../ivue-icon';\r\nimport IvueButton from '../ivue-button';\r\nimport IvueSpin from '../ivue-spin';\r\n\r\n// ts\r\nimport type { _ComponentInternalInstance, Props, Data } from './types/modal';\r\n\r\nconst prefixCls = 'ivue-modal';\r\n\r\n// 拖动初始数据\r\nconst dragData = {\r\n  x: null,\r\n  y: null,\r\n  dragX: null,\r\n  dragY: null,\r\n  dragging: false,\r\n  rect: null,\r\n};\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: [\r\n    'update:modelValue',\r\n    'on-cancel',\r\n    'on-hidden',\r\n    'on-confirm',\r\n    'on-visible-change',\r\n  ],\r\n  props: {\r\n    /**\r\n     * modelValue\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    modelValue: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否将弹层放置于 body 内，在 Tabs、\r\n     * 带有 fixed 的 Table 列内使用时，\r\n     * 建议添加此属性，它将不受父级样式影响，\r\n     * 从而达到更好的效果\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    transfer: {\r\n      type: Boolean,\r\n      default() {\r\n        const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n        return !global.$IVUE || global.$IVUE.transfer === ''\r\n          ? false\r\n          : global.$IVUE.transfer;\r\n      },\r\n    },\r\n    /**\r\n     * 自定义显示动画，第一项是模态框，第二项是背景\r\n     *\r\n     * @type {Array}\r\n     */\r\n    transitionNames: {\r\n      type: Array,\r\n      default() {\r\n        return ['zoom', 'fade'];\r\n      },\r\n    },\r\n    /**\r\n     * 弹窗层级\r\n     *\r\n     * @type {Number}\r\n     */\r\n    zIndex: {\r\n      type: Number,\r\n      default: 1000,\r\n    },\r\n    /**\r\n     * 是否显示遮罩层\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    mask: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    /**\r\n     * 是否允许点击遮罩层关闭\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    maskClosable: {\r\n      type: Boolean,\r\n      default() {\r\n        const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n        return !global.$IVUE || !global.$IVUE.modal.maskClosable\r\n          ? true\r\n          : global.$IVUE.modal.maskClosable;\r\n      },\r\n    },\r\n    /**\r\n     * 返回 Promise 可以阻止关闭\r\n     *\r\n     * @type {Function}\r\n     */\r\n    beforeClose: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * 弹窗外层样式\r\n     *\r\n     * @type {String}\r\n     */\r\n    modalWrapperClasses: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 页面是否可以滚动\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    scrollable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 对话框宽度，对话框的宽度是响应式的，\r\n     * 当屏幕尺寸小于 768px 时，宽度会变为自动auto。\r\n     * 当其值不大于 100 时以百分比显示，大于 100 时为像素\r\n     *\r\n     * @type {Number | String}\r\n     */\r\n    width: {\r\n      type: [Number, String],\r\n      default: 520,\r\n    },\r\n    /**\r\n     * 弹窗样式\r\n     *\r\n     * @type {Object}\r\n     */\r\n    styles: {\r\n      type: Object,\r\n      default: () => {},\r\n    },\r\n    /**\r\n     * 标题\r\n     *\r\n     * @type {String}\r\n     */\r\n    title: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 关闭按钮图标\r\n     *\r\n     * @type {String}\r\n     */\r\n    closeIcon: {\r\n      type: String,\r\n      default: 'cancel',\r\n    },\r\n    /**\r\n     * 是否显示关闭按钮\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    closable: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    /**\r\n     * 关闭文案\r\n     *\r\n     * @type {String}\r\n     */\r\n    cancelText: {\r\n      type: String,\r\n      default: '取消',\r\n    },\r\n    /**\r\n     * 确定按钮文字\r\n     *\r\n     * @type {String}\r\n     */\r\n    confirmText: {\r\n      type: String,\r\n      default: '确认',\r\n    },\r\n    /**\r\n     * 点击确定按钮时，确定按钮是否显示 loading 状态，\r\n     * 开启则需手动设置value来关闭对话框\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    loading: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * loading类型\r\n     *\r\n     * @type {String}\r\n     */\r\n    loadingType: {\r\n      type: String,\r\n      validator(value: string) {\r\n        return oneOf(value, ['spin', 'button']);\r\n      },\r\n      default: 'spin',\r\n    },\r\n    /**\r\n     * 弹窗到顶部的距离\r\n     *\r\n     * @type {Number}\r\n     */\r\n    top: {\r\n      type: Number,\r\n      default: 100,\r\n    },\r\n    /**\r\n     * 再次打开时，是否重置拖拽的位置\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    resetDragPosition: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 居中\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    center: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否全屏显示\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    fullscreen: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 不显示底部\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    footerHide: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否可以拖拽移动\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    draggable: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 拖拽时，是否吸附屏幕边缘\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    sticky: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 拖拽时，自动吸附屏幕边缘的临界距离\r\n     *\r\n     * @type {Number}\r\n     */\r\n    stickyDistance: {\r\n      type: Number,\r\n      default: 10,\r\n    },\r\n    /**\r\n     * 渲染函数\r\n     *\r\n     * @type {Function}\r\n     */\r\n    render: {\r\n      type: Function,\r\n    },\r\n    /**\r\n     * v-if 重新渲染body内容\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    resetBody: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 是否禁止对页面滚动条的修改\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    lockScroll: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n  },\r\n  setup(props: Props, { emit, slots }) {\r\n    // proxy\r\n    const { proxy, uid } = getCurrentInstance() as _ComponentInternalInstance;\r\n\r\n    // 滚动条\r\n    const { removeScrollEffect, addScrollEffect } = scrollbarMixins(props);\r\n\r\n    // dom\r\n    const headerRef = ref<HTMLElement | undefined>();\r\n    const contentRef = ref<HTMLElement>();\r\n\r\n    // computed\r\n\r\n    // 外层样式\r\n    const wrapperClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}-wrapper`,\r\n        {\r\n          // 隐藏\r\n          [`${prefixCls}-hidden`]: !data.wrapperShow,\r\n          // 没有蒙版\r\n          [`${prefixCls}-no-mask`]: !showMask.value,\r\n          // 弹窗外层样式\r\n          [`${props.modalWrapperClasses}`]: !!props.modalWrapperClasses,\r\n          // 展示方向\r\n          [`${prefixCls}-center`]: data.wrapperShow && props.center,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 外层样式\r\n    const wrapperStyles = computed(() => {\r\n      return {\r\n        zIndex: data.modalIndex + props.zIndex,\r\n      };\r\n    });\r\n\r\n    // 弹窗样式\r\n    const modalClasses = computed(() => {\r\n      return [\r\n        prefixCls,\r\n        {\r\n          [`${prefixCls}-fullscreen`]: props.fullscreen,\r\n          [`${prefixCls}-drag-mask`]: data.dragData.x !== null,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 弹窗样式\r\n    const modalStyles = computed(() => {\r\n      const width = parseInt(`${props.width}`);\r\n\r\n      let styleWidth: {\r\n        width?: string;\r\n        top?: number | string;\r\n      } = {\r\n        width: width <= 100 ? `${width}%` : `${width}px`,\r\n        top: !props.fullscreen && !props.center && `${props.top}px`,\r\n      };\r\n\r\n      // 有向左拖动\r\n      if (data.dragData.x !== null) {\r\n        styleWidth = {\r\n          top: 0,\r\n        };\r\n      }\r\n\r\n      return {\r\n        ...styleWidth,\r\n        ...props.styles,\r\n      };\r\n    });\r\n\r\n    // 弹窗内容样式\r\n    const contentClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}-content`,\r\n        {\r\n          // 没有蒙版\r\n          [`${prefixCls}-content--no-mask`]: !showMask.value,\r\n          // 内容拖动\r\n          [`${prefixCls}-content--drag`]: draggable.value,\r\n          // 拖动中\r\n          [`${prefixCls}-content--dragging`]:\r\n            props.draggable && data.dragData.dragging,\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 弹窗内容样式\r\n    const contentStyles = computed(() => {\r\n      let style: {\r\n        left?: string;\r\n        top?: string;\r\n        width?: string;\r\n      } = {};\r\n\r\n      // 开启拖动没有开启全屏\r\n      if (props.draggable && !props.fullscreen) {\r\n        const width = parseInt(`${props.width}`);\r\n\r\n        // width\r\n        style = {\r\n          width: width <= 100 ? `${width}%` : `${width}px`,\r\n        };\r\n\r\n        // 初始化自定义样式\r\n        const customTop =\r\n          props.styles && props.styles.top ? parseFloat(props.styles.top) : 0;\r\n\r\n        // 初始化自定义样式\r\n        const customLeft =\r\n          props.styles && props.styles.left ? parseFloat(props.styles.left) : 0;\r\n\r\n        // left\r\n        if (data.dragData.x !== null) {\r\n          style.left = `${data.dragData.x - customLeft}px`;\r\n        }\r\n\r\n        // top\r\n        if (data.dragData.y !== null) {\r\n          style.top = `${data.dragData.y - customTop}px`;\r\n        }\r\n\r\n        return style;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    // 是否显示蒙版\r\n    const showMask = computed(() => {\r\n      return !props.draggable && props.mask;\r\n    });\r\n\r\n    // 是否显示头部\r\n    const showHead = computed(() => {\r\n      let showHead = true;\r\n\r\n      if (!slots.header && !props.title) {\r\n        showHead = false;\r\n      }\r\n\r\n      return showHead;\r\n    });\r\n\r\n    // 可以拖动\r\n    const draggable = computed(() => {\r\n      if (!props.draggable || props.fullscreen) {\r\n        return false;\r\n      }\r\n\r\n      return true;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 获取弹窗zIndex\r\n    const handleGetModalIndex = (): number => {\r\n      modalIncrease();\r\n\r\n      return modalIndex;\r\n    };\r\n\r\n    // 点击蒙版\r\n    const handleMask = () => {\r\n      if (props.maskClosable && showMask.value) {\r\n        close();\r\n      }\r\n    };\r\n\r\n    // 关闭方法\r\n    const handleClose = () => {\r\n      data.visible = false;\r\n\r\n      // modelValue\r\n      emit('update:modelValue', false);\r\n\r\n      // 点击取消的回调\r\n      emit('on-cancel');\r\n    };\r\n\r\n    // 关闭\r\n    const close = () => {\r\n      // 没有自定义关闭方法\r\n      if (!props.beforeClose) {\r\n        return handleClose();\r\n      }\r\n\r\n      // 自定义关闭方法\r\n      const before = props.beforeClose();\r\n\r\n      // Promise\r\n      if (before && before.then) {\r\n        before.then(() => {\r\n          handleClose();\r\n        });\r\n      }\r\n      // 不是Promise\r\n      else {\r\n        handleClose();\r\n      }\r\n    };\r\n\r\n    // 弹窗外层点击\r\n    const handleWrapperClick = (event) => {\r\n      if (data.isMouseTriggerIn) {\r\n        data.isMouseTriggerIn = false;\r\n\r\n        return;\r\n      }\r\n\r\n      // 匹配当前点击的是不是弹窗 还是弹窗外面\r\n      const className = event.target.getAttribute('class');\r\n\r\n      // 点击弹窗外面\r\n      if (className && className.indexOf(`${prefixCls}-wrapper`) > -1) {\r\n        handleMask();\r\n      }\r\n    };\r\n\r\n    // 动画结束\r\n    const handleAfterLeave = () => {\r\n      // 隐藏外层显示\r\n      data.wrapperShow = false;\r\n\r\n      // 隐藏重新渲染body\r\n      data.resetRenderBody = false;\r\n\r\n      // 取消loading\r\n      setLoading(false);\r\n\r\n      // 删除滚动条修改\r\n      removeScrollEffect();\r\n\r\n      // 隐藏\r\n      emit('on-hidden');\r\n    };\r\n\r\n    // 鼠标按下\r\n    const handleMousedown = () => {\r\n      data.isMouseTriggerIn = true;\r\n    };\r\n\r\n    // 关闭按钮\r\n    const handleCancel = () => {\r\n      close();\r\n    };\r\n\r\n    // 确认按钮\r\n    const handleConfirm = () => {\r\n      // loading\r\n      if (props.loading) {\r\n        setLoading(true);\r\n      }\r\n      // 没有loading\r\n      else {\r\n        data.visible = false;\r\n\r\n        emit('update:modelValue', false);\r\n      }\r\n\r\n      emit('on-confirm');\r\n    };\r\n\r\n    // 按钮关闭\r\n    const handleEscClose = (event) => {\r\n      // 显示 & 是否显示关闭按钮\r\n      if (data.visible && props.closable) {\r\n        // esc\r\n        if (event.keyCode === 27) {\r\n          const root = proxy.$root;\r\n\r\n          // 显示的弹窗列表\r\n          const visibleModals = root.modalList\r\n            .map((item) => item.modal)\r\n            .filter((item) => item.data.visible && item.closable);\r\n\r\n          // 找视图当前顶层的弹窗\r\n          const viewTopModal = visibleModals.sort((a, b) => {\r\n            return a.data.modalIndex < b.data.modalIndex ? 1 : -1;\r\n          })[0];\r\n\r\n          setTimeout(() => {\r\n            viewTopModal.close();\r\n          }, 0);\r\n        }\r\n      }\r\n    };\r\n\r\n    // 添加实例\r\n    const addModal = () => {\r\n      const root = proxy.$root;\r\n\r\n      // 初始化弹窗列表->有哪些弹窗\r\n      if (!root.modalList) {\r\n        root.modalList = [];\r\n      }\r\n\r\n      // 添加当前实例\r\n      root.modalList.push({\r\n        id: uid,\r\n        modal: proxy,\r\n      });\r\n    };\r\n\r\n    // 删除实例\r\n    const removeModal = () => {\r\n      const root = proxy.$root;\r\n\r\n      if (!root.modalList) {\r\n        return;\r\n      }\r\n\r\n      const index = root.modalList.findIndex((item) => item.id === uid);\r\n\r\n      // 删除当前弹窗\r\n      root.modalList.splice(index, 1);\r\n    };\r\n\r\n    // 设置loading\r\n    const setLoading = (value: boolean) => {\r\n      // spin\r\n      if (props.loadingType === 'spin') {\r\n        data.spinLoading = value;\r\n      }\r\n\r\n      // button\r\n      if (props.loadingType === 'button') {\r\n        data.buttonLoading = value;\r\n      }\r\n    };\r\n\r\n    // 点击弹窗\r\n    const handleClickModal = () => {\r\n      // 重新设置当前弹窗的 zIndex\r\n      if (props.draggable) {\r\n        // 重复点击\r\n        if (currentUid === uid) {\r\n          return;\r\n        }\r\n\r\n        // 设置当前点击的uid\r\n        setCurrentUid(uid);\r\n\r\n        // 设置zIndex\r\n        data.modalIndex = handleGetModalIndex();\r\n      }\r\n    };\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 显示/隐藏\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      visible: props.modelValue,\r\n      /**\r\n       * 弹窗zIndex\r\n       *\r\n       * @type {Number}\r\n       */\r\n      modalIndex: handleGetModalIndex(),\r\n      /**\r\n       * 外层显示\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      wrapperShow: false,\r\n      /**\r\n       * 鼠标点击\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      isMouseTriggerIn: false,\r\n      /**\r\n       * setTimeout\r\n       *\r\n       * @type  {Function}\r\n       */\r\n      timer: null,\r\n      /**\r\n       * 之前是否已经显示过\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      lastVisible: false,\r\n      /**\r\n       * 拖动的数据\r\n       *\r\n       * @type {Object}\r\n       */\r\n      dragData: deepCopy(dragData),\r\n      /**\r\n       * 使用spain\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      spinLoading: false,\r\n      /**\r\n       * 按钮loading\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      buttonLoading: false,\r\n      /**\r\n       * 重新渲染body\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      resetRenderBody: false,\r\n    });\r\n\r\n    // watch\r\n\r\n    // 监听modelValue\r\n    watch(\r\n      () => props.modelValue,\r\n      (value) => {\r\n        data.visible = value;\r\n\r\n        // 显示重新渲染body\r\n        if (value) {\r\n          data.resetRenderBody = value;\r\n        }\r\n      }\r\n    );\r\n\r\n    // 监听显示/隐藏\r\n    watch(\r\n      () => data.visible,\r\n      (value) => {\r\n        // 显示\r\n        if (value) {\r\n          // 增加 zIndex\r\n          if (data.lastVisible !== value) {\r\n            data.modalIndex = handleGetModalIndex();\r\n          }\r\n\r\n          // 清除setTimeout\r\n          if (data.timer) {\r\n            clearTimeout(data.timer);\r\n\r\n            data.timer = null;\r\n          }\r\n\r\n          // 外层显示\r\n          data.wrapperShow = true;\r\n\r\n          // 页面是否可以滚动\r\n          if (!props.scrollable) {\r\n            addScrollEffect();\r\n          }\r\n        }\r\n\r\n        // 显示状态发生变化时触发\r\n        emit('on-visible-change', value);\r\n\r\n        // 之前是否已经显示过\r\n        data.lastVisible = value;\r\n\r\n        // 拖动的数据用于重新设置初始化拖动位置\r\n        if (value && props.resetDragPosition) {\r\n          data.dragData.x = null;\r\n          data.dragData.y = null;\r\n          data.dragData.dragX = null;\r\n          data.dragData.dragY = null;\r\n          data.dragData.dragging = false;\r\n          data.dragData.rect = null;\r\n        }\r\n      }\r\n    );\r\n\r\n    // 监听loading\r\n    watch(\r\n      () => props.loading,\r\n      (value) => {\r\n        if (!value) {\r\n          // 取消loading\r\n          setLoading(false);\r\n        }\r\n      }\r\n    );\r\n\r\n    // 监听页面是否可以滚动\r\n    watch(\r\n      () => props.scrollable,\r\n      (value) => {\r\n        // 页面是否可以滚动\r\n        if (!value) {\r\n          addScrollEffect();\r\n        }\r\n        // 删除滚动条修改\r\n        else {\r\n          removeScrollEffect();\r\n        }\r\n      }\r\n    );\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      // 显示\r\n      if (data.visible) {\r\n        // 外层显示\r\n        data.wrapperShow = true;\r\n      }\r\n\r\n      // 添加实例 to root 用于 esc close\r\n      addModal();\r\n\r\n      // 键盘事件\r\n      useEventListener(window, 'keydown', handleEscClose);\r\n\r\n      // 拖动\r\n      if (showHead.value) {\r\n        useDraggable(contentRef, headerRef, data.dragData, draggable, {\r\n          sticky: props.sticky,\r\n          stickyDistance: props.stickyDistance,\r\n        });\r\n      }\r\n    });\r\n\r\n    // onBeforeUnmount\r\n    onBeforeUnmount(() => {\r\n      // 删除实例\r\n      removeModal();\r\n\r\n      // 删除滚动条修改\r\n      removeScrollEffect();\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // dom\r\n      headerRef,\r\n      contentRef,\r\n\r\n      // data\r\n      data,\r\n\r\n      // computed\r\n      wrapperClasses,\r\n      wrapperStyles,\r\n      modalClasses,\r\n      modalStyles,\r\n      contentClasses,\r\n      contentStyles,\r\n      showMask,\r\n      showHead,\r\n\r\n      // methods\r\n      close,\r\n      setLoading,\r\n      handleMask,\r\n      handleWrapperClick,\r\n      handleAfterLeave,\r\n      handleMousedown,\r\n      handleCancel,\r\n      handleConfirm,\r\n      handleClickModal,\r\n    };\r\n  },\r\n  components: {\r\n    IvueIcon,\r\n    IvueButton,\r\n    IvueSpin,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_Teleport","_createCommentVNode","_createVNode","_Transition","_withDirectives","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_withCtx","_renderSlot","_Fragment"],"mappings":"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"}