lxm_front/vxe-table
1
0
Fork 0
mirror of https://gitee.com/xuliangzhan_admin/vxe-table.git synced 2026-01-21 05:27:57 +08:00
Code Issues Projects Releases Wiki Activity

modal 增加参数 draggable

Browse Source
This commit is contained in:
xuliangzhan
2021-09-04 12:51:12 +08:00
parent 1a8b57168f
commit f0c87eaef6
11 changed files with 75 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
examples/api/modal.js
View File

@@ -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: []
},
{

1
examples/i18n/lang/en-US.js
View File

@@ -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',

1
examples/i18n/lang/zh-CN.js
View File

@@ -685,6 +685,7 @@ export default {
zIndex: '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
showTitleOverflow: '设置标题内容过长时显示为省略号',
fullscreen: '默认最大化显示',
draggable: '是否启用窗口拖动',
dblclickZoom: '只对 type=modal 有效，是否允许通过双击头部放大或还原窗口',
remember: '记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态',
destroyOnClose: '在窗口关闭时销毁内容',

1
examples/i18n/lang/zh-TC.js
View File

@@ -685,6 +685,7 @@ export default {
zIndex: '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
showTitleOverflow: '设置标题内容过长时显示为省略号',
fullscreen: '默认最大化显示',
draggable: '是否启用窗口拖动',
dblclickZoom: '只对 type=modal 有效，是否允许通过双击头部放大或还原窗口',
remember: '记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态',
destroyOnClose: '在窗口关闭时销毁内容',

74
examples/views/modal/Modal.vue
View File

@@ -23,27 +23,28 @@
</p>
<p>
<vxe-button @click="$XModal.message({ content: '消息提示' })">默认消息框</vxe-button>
<vxe-button @click="$XModal.message({ content: 'info 消息提示', status: 'info' })">info</vxe-button>
<vxe-button @click="$XModal.message({ content: 'warning 消息提示', status: 'warning' })">warning</vxe-button>
<vxe-button @click="$XModal.message({ content: 'question 消息提示', status: 'question' })">question</vxe-button>
<vxe-button @click="$XModal.message({ content: 'success 消息提示', status: 'success' })">success</vxe-button>
<vxe-button @click="$XModal.message({ content: 'error 消息提示', status: 'error' })">error</vxe-button>
<vxe-button @click="$XModal.message({ content: 'loading 消息提示', status: 'loading' })">loading</vxe-button>
<vxe-button @click="$XModal.message({ content: 'iconStatus 自定义图标', status:'success', iconStatus: 'fa fa-thumbs-up' })">自定义图标</vxe-button>
<vxe-button @click="$XModal.message({ content: '不允许重复点击', id: 'unique1' })">不允许重复点击</vxe-button>
<vxe-button content="默认消息框" @click="$XModal.message({ content: '消息提示' })"></vxe-button>
<vxe-button content="info" @click="$XModal.message({ content: 'info 消息提示', status: 'info' })"></vxe-button>
<vxe-button content="warning" @click="$XModal.message({ content: 'warning 消息提示', status: 'warning' })"></vxe-button>
<vxe-button content="question" @click="$XModal.message({ content: 'question 消息提示', status: 'question' })"></vxe-button>
<vxe-button content="success" @click="$XModal.message({ content: 'success 消息提示', status: 'success' })"></vxe-button>
<vxe-button content="error" @click="$XModal.message({ content: 'error 消息提示', status: 'error' })"></vxe-button>
<vxe-button content="loading" @click="$XModal.message({ content: 'loading 消息提示', status: 'loading' })"></vxe-button>
<vxe-button content="自定义图标" @click="$XModal.message({ content: 'iconStatus 自定义图标', status:'success', iconStatus: 'fa fa-thumbs-up' })"></vxe-button>
<vxe-button content="不允许重复点击" @click="$XModal.message({ content: '不允许重复点击', id: 'unique1' })"></vxe-button>
</p>
<p>
<vxe-button @click="$XModal.alert('基本提示框', '标题1')">基本提示框</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'info 提示框', status: 'info' })">info</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'warning 提示框', status: 'warning' })">warning</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'question 提示框', status: 'question' })">question</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'success 提示框', status: 'success' })">success</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'error 提示框', title:'app.body.msg.error', status: 'error' })">error</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'loading 提示框', status: 'loading' })">loading</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'iconStatus 自定义图标', status:'error', iconStatus: 'fa fa-hand-peace-o' })">自定义图标</vxe-button>
<vxe-button @click="confirmEvent">确认提示框</vxe-button>
<vxe-button content="基本提示框" @click="$XModal.alert('基本提示框', '标题1')"></vxe-button>
<vxe-button content="info" @click="$XModal.alert({ content: 'info 提示框', status: 'info' })"></vxe-button>
<vxe-button content="warning" @click="$XModal.alert({ content: 'warning 提示框', status: 'warning' })"></vxe-button>
<vxe-button content="question" @click="$XModal.alert({ content: 'question 提示框', status: 'question' })"></vxe-button>
<vxe-button content="success" @click="$XModal.alert({ content: 'success 提示框', status: 'success' })"></vxe-button>
<vxe-button content="error" @click="$XModal.alert({ content: 'error 提示框', title:'app.body.msg.error', status: 'error' })"></vxe-button>
<vxe-button content="loading" @click="$XModal.alert({ content: 'loading 提示框', status: 'loading' })"></vxe-button>
<vxe-button content="自定义图标" @click="$XModal.alert({ content: 'iconStatus 自定义图标', status:'error', iconStatus: 'fa fa-hand-peace-o' })"></vxe-button>
<vxe-button content="禁止拖动" @click="$XModal.alert({ content: '禁止后，按住头部无法进行拖动', draggable: false })"></vxe-button>
<vxe-button content="确认提示框" @click="confirmEvent"></vxe-button>
</p>
<p>
@@ -332,27 +333,28 @@ export default {
demoCodes: [
`
<p>
<vxe-button @click="$XModal.message({ content: '消息提示' })">默认消息框</vxe-button>
<vxe-button @click="$XModal.message({ content: 'info 消息提示', status: 'info' })">info</vxe-button>
<vxe-button @click="$XModal.message({ content: 'warning 消息提示', status: 'warning' })">warning</vxe-button>
<vxe-button @click="$XModal.message({ content: 'question 消息提示', status: 'question' })">question</vxe-button>
<vxe-button @click="$XModal.message({ content: 'success 消息提示', status: 'success' })">success</vxe-button>
<vxe-button @click="$XModal.message({ content: 'error 消息提示', status: 'error' })">error</vxe-button>
<vxe-button @click="$XModal.message({ content: 'loading 消息提示', status: 'loading' })">loading</vxe-button>
<vxe-button @click="$XModal.message({ content: 'iconStatus 自定义图标', status:'success', iconStatus: 'fa fa-thumbs-up' })">自定义图标</vxe-button>
<vxe-button @click="$XModal.message({ content: '不允许重复点击', id: 'unique1' })">不允许重复点击</vxe-button>
<vxe-button content="默认消息框" @click="$XModal.message({ content: '消息提示' })"></vxe-button>
<vxe-button content="info" @click="$XModal.message({ content: 'info 消息提示', status: 'info' })"></vxe-button>
<vxe-button content="warning" @click="$XModal.message({ content: 'warning 消息提示', status: 'warning' })"></vxe-button>
<vxe-button content="question" @click="$XModal.message({ content: 'question 消息提示', status: 'question' })"></vxe-button>
<vxe-button content="success" @click="$XModal.message({ content: 'success 消息提示', status: 'success' })"></vxe-button>
<vxe-button content="error" @click="$XModal.message({ content: 'error 消息提示', status: 'error' })"></vxe-button>
<vxe-button content="loading" @click="$XModal.message({ content: 'loading 消息提示', status: 'loading' })"></vxe-button>
<vxe-button content="自定义图标" @click="$XModal.message({ content: 'iconStatus 自定义图标', status:'success', iconStatus: 'fa fa-thumbs-up' })"></vxe-button>
<vxe-button content="不允许重复点击" @click="$XModal.message({ content: '不允许重复点击', id: 'unique1' })"></vxe-button>
</p>
<p>
<vxe-button @click="$XModal.alert('基本提示框', '标题1')">基本提示框</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'info 提示框', status: 'info' })">info</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'warning 提示框', status: 'warning' })">warning</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'question 提示框', status: 'question' })">question</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'success 提示框', status: 'success' })">success</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'error 提示框', title:'app.body.msg.error', status: 'error' })">error</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'loading 提示框', status: 'loading' })">loading</vxe-button>
<vxe-button @click="$XModal.alert({ content: 'iconStatus 自定义图标', status:'error', iconStatus: 'fa fa-hand-peace-o' })">自定义图标</vxe-button>
<vxe-button @click="confirmEvent">确认提示框</vxe-button>
<vxe-button content="基本提示框" @click="$XModal.alert('基本提示框', '标题1')"></vxe-button>
<vxe-button content="info" @click="$XModal.alert({ content: 'info 提示框', status: 'info' })"></vxe-button>
<vxe-button content="warning" @click="$XModal.alert({ content: 'warning 提示框', status: 'warning' })"></vxe-button>
<vxe-button content="question" @click="$XModal.alert({ content: 'question 提示框', status: 'question' })"></vxe-button>
<vxe-button content="success" @click="$XModal.alert({ content: 'success 提示框', status: 'success' })"></vxe-button>
<vxe-button content="error" @click="$XModal.alert({ content: 'error 提示框', title:'app.body.msg.error', status: 'error' })"></vxe-button>
<vxe-button content="loading" @click="$XModal.alert({ content: 'loading 提示框', status: 'loading' })"></vxe-button>
<vxe-button content="自定义图标" @click="$XModal.alert({ content: 'iconStatus 自定义图标', status:'error', iconStatus: 'fa fa-hand-peace-o' })"></vxe-button>
<vxe-button content="禁止拖动" @click="$XModal.alert({ content: '禁止后，按住头部无法进行拖动', draggable: false })"></vxe-button>
<vxe-button content="确认提示框" @click="confirmEvent"></vxe-button>
</p>
<p>

8
helper/vetur/attributes.json
View File

@@ -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 有效，是否允许通过双击头部放大或还原窗口"

2
helper/vetur/tags.json
View File

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

2
package.json
View File

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

13
packages/modal/src/modal.js
View File

@@ -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', {

1
packages/v-x-e-table/src/conf.js
View File

@@ -308,6 +308,7 @@ export default {
showTitleOverflow: true,
animat: true,
showClose: true,
draggable: true,
// storage: false,
storageKey: 'VXE_MODAL_POSITION'
},

6
styles/modal.scss
View File

@@ -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;