From f0c87eaef69160f92bc45c770b638cb779a58904 Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Sat, 4 Sep 2021 12:51:12 +0800 Subject: [PATCH] =?UTF-8?q?modal=20=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0=20?= =?UTF-8?q?draggable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/api/modal.js | 11 ++++- examples/i18n/lang/en-US.js | 1 + examples/i18n/lang/zh-CN.js | 1 + examples/i18n/lang/zh-TC.js | 1 + examples/views/modal/Modal.vue | 74 ++++++++++++++++---------------- helper/vetur/attributes.json | 8 ++++ helper/vetur/tags.json | 2 + package.json | 2 +- packages/modal/src/modal.js | 13 ++++-- packages/v-x-e-table/src/conf.js | 1 + styles/modal.scss | 6 +-- 11 files changed, 75 insertions(+), 45 deletions(-) diff --git a/examples/api/modal.js b/examples/api/modal.js index 7efc9abcd..b03f183ac 100644 --- a/examples/api/modal.js +++ b/examples/api/modal.js @@ -342,13 +342,22 @@ const apis = [ defVal: 'false', list: [] }, + { + name: 'draggable', + descKey: 'app.api.modal.desc.draggable', + version: '3.3.13', + type: 'boolean', + enum: '', + defVal: '默认 true，继承 setup.modal.draggable', + list: [] + }, { name: 'dblclickZoom', descKey: 'app.api.modal.desc.dblclickZoom', version: '', type: 'boolean', enum: '', - defVal: 'true', + defVal: '默认 true，继承 setup.modal.dblclickZoom', list: [] }, { diff --git a/examples/i18n/lang/en-US.js b/examples/i18n/lang/en-US.js index fb2abacf5..d0fb0c7a6 100644 --- a/examples/i18n/lang/en-US.js +++ b/examples/i18n/lang/en-US.js @@ -687,6 +687,7 @@ export default { zIndex: 'Custom style z-index (may be used for special situations, such as occlusion)', showTitleOverflow: 'Set the title content to appear as an ellipsis when it is too long', fullscreen: 'Default maximized display', + draggable: 'Whether to enable window dragging', dblclickZoom: 'It is only valid for type=modal. Is it allowed to enlarge or restore the window by double-clicking the head', remember: 'The memory function will remember the last operation state and restore the window state when the window is opened again', destroyOnClose: 'Destroy the content when the window closes', diff --git a/examples/i18n/lang/zh-CN.js b/examples/i18n/lang/zh-CN.js index b14456790..331785fac 100644 --- a/examples/i18n/lang/zh-CN.js +++ b/examples/i18n/lang/zh-CN.js @@ -685,6 +685,7 @@ export default { zIndex: '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）', showTitleOverflow: '设置标题内容过长时显示为省略号', fullscreen: '默认最大化显示', + draggable: '是否启用窗口拖动', dblclickZoom: '只对 type=modal 有效，是否允许通过双击头部放大或还原窗口', remember: '记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态', destroyOnClose: '在窗口关闭时销毁内容', diff --git a/examples/i18n/lang/zh-TC.js b/examples/i18n/lang/zh-TC.js index 058306a9d..40129dd10 100644 --- a/examples/i18n/lang/zh-TC.js +++ b/examples/i18n/lang/zh-TC.js @@ -685,6 +685,7 @@ export default { zIndex: '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）', showTitleOverflow: '设置标题内容过长时显示为省略号', fullscreen: '默认最大化显示', + draggable: '是否启用窗口拖动', dblclickZoom: '只对 type=modal 有效，是否允许通过双击头部放大或还原窗口', remember: '记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态', destroyOnClose: '在窗口关闭时销毁内容', diff --git a/examples/views/modal/Modal.vue b/examples/views/modal/Modal.vue index cca7f1502..5ee09b856 100644 --- a/examples/views/modal/Modal.vue +++ b/examples/views/modal/Modal.vue @@ -23,27 +23,28 @@

- 默认消息框 - info - warning - question - success - error - loading - 自定义图标 - 不允许重复点击 + + + + + + + + +

- 基本提示框 - info - warning - question - success - error - loading - 自定义图标 - 确认提示框 + + + + + + + + + +

@@ -332,27 +333,28 @@ export default { demoCodes: [ `

- 默认消息框 - info - warning - question - success - error - loading - 自定义图标 - 不允许重复点击 + + + + + + + + +

- 基本提示框 - info - warning - question - success - error - loading - 自定义图标 - 确认提示框 + + + + + + + + + +

diff --git a/helper/vetur/attributes.json b/helper/vetur/attributes.json index a9bec07e8..a72a6075a 100644 --- a/helper/vetur/attributes.json +++ b/helper/vetur/attributes.json @@ -1667,6 +1667,10 @@ "type": "boolean", "description": "是否允许窗口边缘拖动调整窗口大小" }, + "vxe-modal/margin-size": { + "type": "number", + "description": "只对 resize 启用后有效，用于设置可拖动界限范围，如果为负数则允许拖动超出屏幕边界" + }, "vxe-modal/show-close": { "type": "boolean", "description": "是否显示关闭按钮" @@ -1715,6 +1719,10 @@ "type": "boolean", "description": "默认最大化显示" }, + "vxe-modal/draggable": { + "type": "boolean", + "description": "是否启用窗口拖动" + }, "vxe-modal/dblclick-zoom": { "type": "boolean", "description": "只对 type=modal 有效，是否允许通过双击头部放大或还原窗口" diff --git a/helper/vetur/tags.json b/helper/vetur/tags.json index 1fb6b00b2..d072fe2a7 100644 --- a/helper/vetur/tags.json +++ b/helper/vetur/tags.json @@ -544,6 +544,7 @@ "esc-closable", "show-zoom", "resize", + "margin-size", "show-close", "duration", "width", @@ -556,6 +557,7 @@ "show-title-overflow", "transfer", "fullscreen", + "draggable", "dblclick-zoom", "remember", "destroy-on-close", diff --git a/package.json b/package.json index f3eeee95a..bde5c82d5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "3.3.12", + "version": "3.3.13-beta.0", "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...", "scripts": { "serve": "vue-cli-service serve", diff --git a/packages/modal/src/modal.js b/packages/modal/src/modal.js index 6349128f9..a8f478525 100644 --- a/packages/modal/src/modal.js +++ b/packages/modal/src/modal.js @@ -44,6 +44,7 @@ export default { zIndex: Number, marginSize: { type: [Number, String], default: () => GlobalConfig.modal.marginSize }, fullscreen: Boolean, + draggable: { type: Boolean, default: () => GlobalConfig.modal.draggable }, remember: { type: Boolean, default: () => GlobalConfig.modal.remember }, destroyOnClose: { type: Boolean, default: () => GlobalConfig.modal.destroyOnClose }, showTitleOverflow: { type: Boolean, default: () => GlobalConfig.modal.showTitleOverflow }, @@ -115,14 +116,15 @@ export default { } }, render (h) { - const { _e, $scopedSlots, slots = {}, inited, vSize, className, type, resize, showClose, showZoom, animat, loading, status, iconStatus, showFooter, zoomLocat, modalTop, dblclickZoom, contentVisible, visible, title, lockScroll, lockView, mask, isMsg, showTitleOverflow, destroyOnClose } = this + const { _e, $scopedSlots, slots = {}, inited, vSize, className, type, resize, showClose, showZoom, animat, draggable, loading, status, iconStatus, showFooter, zoomLocat, modalTop, dblclickZoom, contentVisible, visible, title, lockScroll, lockView, mask, isMsg, showTitleOverflow, destroyOnClose } = this const content = this.content || this.message const defaultSlot = $scopedSlots.default || slots.default const footerSlot = $scopedSlots.footer || slots.footer const headerSlot = $scopedSlots.header || slots.header const titleSlot = $scopedSlots.title || slots.title - const headerOns = { - mousedown: this.mousedownEvent + const headerOns = {} + if (draggable) { + headerOns.mousedown = this.mousedownEvent } if (showZoom && dblclickZoom && type === 'modal') { headerOns.dblclick = this.toggleZoomEvent @@ -157,7 +159,10 @@ export default { ref: 'modalBox' }, [ this.showHeader ? h('div', { - class: ['vxe-modal--header', !isMsg && showTitleOverflow ? 'is--ellipsis' : ''], + class: ['vxe-modal--header', { + 'is--drag': draggable, + 'is--ellipsis': !isMsg && showTitleOverflow + }], on: headerOns }, headerSlot ? (!inited || (destroyOnClose && !visible) ? [] : headerSlot.call(this, { $modal: this }, h)) : [ titleSlot ? titleSlot.call(this, { $modal: this }, h) : h('span', { diff --git a/packages/v-x-e-table/src/conf.js b/packages/v-x-e-table/src/conf.js index 37d2ad8ce..3c6744280 100644 --- a/packages/v-x-e-table/src/conf.js +++ b/packages/v-x-e-table/src/conf.js @@ -308,6 +308,7 @@ export default { showTitleOverflow: true, animat: true, showClose: true, + draggable: true, // storage: false, storageKey: 'VXE_MODAL_POSITION' }, diff --git a/styles/modal.scss b/styles/modal.scss index 1dc4d4c21..fa972c013 100644 --- a/styles/modal.scss +++ b/styles/modal.scss @@ -141,9 +141,6 @@ left: 50%; top: 0; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); - .vxe-modal--header { - cursor: move; - } } .vxe-modal--body { overflow: auto; @@ -249,6 +246,9 @@ background-color: $vxe-modal-header-background-color; border-radius: $vxe-border-radius $vxe-border-radius 0 0; user-select: none; + &.is--drag { + cursor: move; + } &.is--ellipsis { overflow: hidden; text-overflow: ellipsis;