UNPKG

ivue-material-plus

Version:

A high quality UI components Library with Vue.js

1 lines 29.3 kB
{"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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"}