modal 增加参数 draggable
This commit is contained in:
xuliangzhan
@@ -342,13 +342,22 @@ const apis = [
|
||||
defVal: 'false',
|
||||
list: []
|
||||
},
|
||||
{
|
||||
name: 'draggable',
|
||||
descKey: 'app.api.modal.desc.draggable',
|
||||
version: '4.0.28',
|
||||
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: []
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -685,6 +685,7 @@ export default {
|
||||
zIndex: '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
|
||||
showTitleOverflow: '设置标题内容过长时显示为省略号',
|
||||
fullscreen: '默认最大化显示',
|
||||
draggable: '是否启用窗口拖动',
|
||||
dblclickZoom: '只对 type=modal 有效，是否允许通过双击头部放大或还原窗口',
|
||||
remember: '记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态',
|
||||
destroyOnClose: '在窗口关闭时销毁内容',
|
||||
|
||||
@@ -685,6 +685,7 @@ export default {
|
||||
zIndex: '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
|
||||
showTitleOverflow: '设置标题内容过长时显示为省略号',
|
||||
fullscreen: '默认最大化显示',
|
||||
draggable: '是否启用窗口拖动',
|
||||
dblclickZoom: '只对 type=modal 有效，是否允许通过双击头部放大或还原窗口',
|
||||
remember: '记忆功能，会记住最后操作状态，再次打开窗口时还原窗口状态',
|
||||
destroyOnClose: '在窗口关闭时销毁内容',
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
<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>
|
||||
|
||||
@@ -349,6 +350,7 @@ export default defineComponent({
|
||||
<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>
|
||||
|
||||
|
||||
@@ -19,10 +19,10 @@
|
||||
ref="xTable1"
|
||||
height="200"
|
||||
:data="demo1.tableData">
|
||||
<vxe-table-column field="name" title="Name"></vxe-table-column>
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex" :visible="false"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column field="name" title="Name"></vxe-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex" :visible="false"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -44,11 +44,11 @@
|
||||
height="200"
|
||||
:loading="demo2.loading"
|
||||
:data="demo2.tableData">
|
||||
<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name"></vxe-table-column>
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column type="seq" title="序号" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name"></vxe-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -72,17 +72,17 @@
|
||||
height="300"
|
||||
:loading="demo3.loading"
|
||||
:data="demo3.tableData">
|
||||
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name" :visible="false"></vxe-table-column>
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-colgroup title="基本信息">
|
||||
<vxe-table-column field="sex" title="Sex" :visible="false"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-table-colgroup title="其他信息">
|
||||
<vxe-table-column field="rate" title="Rate"></vxe-table-column>
|
||||
<vxe-table-column field="flag" title="Flag"></vxe-table-column>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name" :visible="false"></vxe-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-colgroup title="基本信息">
|
||||
<vxe-column field="sex" title="Sex" :visible="false"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
<vxe-colgroup title="其他信息">
|
||||
<vxe-column field="rate" title="Rate"></vxe-column>
|
||||
<vxe-column field="flag" title="Flag"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -99,23 +99,23 @@
|
||||
ref="xTable4"
|
||||
height="200"
|
||||
:data="demo4.tableData">
|
||||
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name" width="200">
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name" width="200">
|
||||
<template #header>
|
||||
<i :class="demo4.collapsable1 ? 'fa fa-minus-square' : 'fa fa-plus-square'" @click="collapsable1Event"></i>
|
||||
<span>Name</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="role" title="Role" :visible="false" width="200"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex" :visible="false" width="200"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age" width="200">
|
||||
</vxe-column>
|
||||
<vxe-column field="role" title="Role" :visible="false" width="200"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex" :visible="false" width="200"></vxe-column>
|
||||
<vxe-column field="age" title="Age" width="200">
|
||||
<template #header>
|
||||
<i :class="demo4.collapsable2 ? 'fa fa-minus-square-o' : 'fa fa-plus-square-o'" @click="collapsable2Event"></i>
|
||||
<span>Age</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="rate" title="Rate" :visible="false" width="200"></vxe-table-column>
|
||||
<vxe-table-column field="address" title="Address" :visible="false" width="200"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="rate" title="Rate" :visible="false" width="200"></vxe-column>
|
||||
<vxe-column field="address" title="Address" :visible="false" width="200"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -279,10 +279,10 @@ export default defineComponent({
|
||||
ref="xTable1"
|
||||
height="200"
|
||||
:data="demo1.tableData">
|
||||
<vxe-table-column field="name" title="Name"></vxe-table-column>
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex" :visible="false"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column field="name" title="Name"></vxe-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex" :visible="false"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
@@ -323,11 +323,11 @@ export default defineComponent({
|
||||
height="200"
|
||||
:loading="demo2.loading"
|
||||
:data="demo2.tableData">
|
||||
<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name"></vxe-table-column>
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column type="seq" title="序号" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name"></vxe-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
@@ -393,17 +393,17 @@ export default defineComponent({
|
||||
height="300"
|
||||
:loading="demo3.loading"
|
||||
:data="demo3.tableData">
|
||||
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name" :visible="false"></vxe-table-column>
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-colgroup title="基本信息">
|
||||
<vxe-table-column field="sex" title="Sex" :visible="false"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-table-colgroup title="其他信息">
|
||||
<vxe-table-column field="rate" title="Rate"></vxe-table-column>
|
||||
<vxe-table-column field="flag" title="Flag"></vxe-table-column>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name" :visible="false"></vxe-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-colgroup title="基本信息">
|
||||
<vxe-column field="sex" title="Sex" :visible="false"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
<vxe-colgroup title="其他信息">
|
||||
<vxe-column field="rate" title="Rate"></vxe-column>
|
||||
<vxe-column field="flag" title="Flag"></vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
@@ -453,23 +453,23 @@ export default defineComponent({
|
||||
ref="xTable4"
|
||||
height="200"
|
||||
:data="demo4.tableData">
|
||||
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name" width="200">
|
||||
<vxe-column type="checkbox" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name" width="200">
|
||||
<template #header>
|
||||
<i :class="demo4.collapsable1 ? 'fa fa-minus-square' : 'fa fa-plus-square'" @click="collapsable1Event"></i>
|
||||
<span>Name</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="role" title="Role" :visible="false" width="200"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex" :visible="false" width="200"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age" width="200">
|
||||
</vxe-column>
|
||||
<vxe-column field="role" title="Role" :visible="false" width="200"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex" :visible="false" width="200"></vxe-column>
|
||||
<vxe-column field="age" title="Age" width="200">
|
||||
<template #header>
|
||||
<i :class="demo4.collapsable2 ? 'fa fa-minus-square-o' : 'fa fa-plus-square-o'" @click="collapsable2Event"></i>
|
||||
<span>Age</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="rate" title="Rate" :visible="false" width="200"></vxe-table-column>
|
||||
<vxe-table-column field="address" title="Address" :visible="false" width="200"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="rate" title="Rate" :visible="false" width="200"></vxe-column>
|
||||
<vxe-column field="address" title="Address" :visible="false" width="200"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
|
||||
@@ -19,8 +19,8 @@
|
||||
border
|
||||
:expand-config="{iconOpen: 'fa fa-minus-square', iconClose: 'fa fa-plus-square'}"
|
||||
:data="demo1.tableData">
|
||||
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
||||
<vxe-table-column type="expand" title="Name">
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column type="expand" title="Name">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
@@ -29,8 +29,8 @@
|
||||
<vxe-table
|
||||
border
|
||||
:data="demo1.tableData">
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div v-else class="expand-wrapper">
|
||||
@@ -54,9 +54,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -73,8 +73,8 @@
|
||||
border
|
||||
:expand-config="demo2.expandConfig"
|
||||
:data="demo2.tableData">
|
||||
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
||||
<vxe-table-column type="expand" title="Name">
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column type="expand" title="Name">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
@@ -83,8 +83,8 @@
|
||||
<vxe-table
|
||||
border
|
||||
:data="demo2.tableData">
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div v-else class="expand-wrapper">
|
||||
@@ -108,9 +108,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -127,8 +127,8 @@
|
||||
border
|
||||
:expand-config="demo3.expandConfig"
|
||||
:data="demo3.tableData">
|
||||
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
||||
<vxe-table-column type="expand" title="Name">
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column type="expand" title="Name">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
@@ -137,8 +137,8 @@
|
||||
<vxe-table
|
||||
border
|
||||
:data="demo3.tableData">
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div v-else class="expand-wrapper">
|
||||
@@ -162,9 +162,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -261,8 +261,8 @@ export default defineComponent({
|
||||
border
|
||||
:expand-config="{iconOpen: 'fa fa-minus-square', iconClose: 'fa fa-plus-square'}"
|
||||
:data="demo1.tableData">
|
||||
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
||||
<vxe-table-column type="expand" title="Name">
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column type="expand" title="Name">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
@@ -271,8 +271,8 @@ export default defineComponent({
|
||||
<vxe-table
|
||||
border
|
||||
:data="demo1.tableData">
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div v-else class="expand-wrapper">
|
||||
@@ -296,9 +296,9 @@ export default defineComponent({
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
@@ -333,8 +333,8 @@ export default defineComponent({
|
||||
border
|
||||
:expand-config="demo2.expandConfig"
|
||||
:data="demo2.tableData">
|
||||
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
||||
<vxe-table-column type="expand" title="Name">
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column type="expand" title="Name">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
@@ -343,8 +343,8 @@ export default defineComponent({
|
||||
<vxe-table
|
||||
border
|
||||
:data="demo2.tableData">
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div v-else class="expand-wrapper">
|
||||
@@ -368,9 +368,9 @@ export default defineComponent({
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
@@ -422,8 +422,8 @@ export default defineComponent({
|
||||
border
|
||||
:expand-config="demo3.expandConfig"
|
||||
:data="demo3.tableData">
|
||||
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
||||
<vxe-table-column type="expand" title="Name">
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column type="expand" title="Name">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.name }}</span>
|
||||
</template>
|
||||
@@ -432,8 +432,8 @@ export default defineComponent({
|
||||
<vxe-table
|
||||
border
|
||||
:data="demo3.tableData">
|
||||
<vxe-table-column field="role" title="Role"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column field="role" title="Role"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<div v-else class="expand-wrapper">
|
||||
@@ -457,9 +457,9 @@ export default defineComponent({
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
|
||||
@@ -16,10 +16,10 @@
|
||||
<vxe-table
|
||||
:align="allAlign"
|
||||
:data="tableData1">
|
||||
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -37,11 +37,11 @@
|
||||
show-overflow
|
||||
highlight-hover-row
|
||||
:data="tableData2">
|
||||
<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-table-column field="address" title="Address"></vxe-table-column>
|
||||
<vxe-column type="seq" title="序号" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
<vxe-column field="address" title="Address"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -91,10 +91,10 @@ export default defineComponent({
|
||||
<vxe-table
|
||||
:align="allAlign"
|
||||
:data="tableData1">
|
||||
<vxe-table-column type="seq" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-column type="seq" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
@@ -125,11 +125,11 @@ export default defineComponent({
|
||||
show-overflow
|
||||
highlight-hover-row
|
||||
:data="tableData2">
|
||||
<vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
|
||||
<vxe-table-column field="name" title="Name"></vxe-table-column>
|
||||
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
|
||||
<vxe-table-column field="age" title="Age"></vxe-table-column>
|
||||
<vxe-table-column field="address" title="Address"></vxe-table-column>
|
||||
<vxe-column type="seq" title="序号" width="60"></vxe-column>
|
||||
<vxe-column field="name" title="Name"></vxe-column>
|
||||
<vxe-column field="sex" title="Sex"></vxe-column>
|
||||
<vxe-column field="age" title="Age"></vxe-column>
|
||||
<vxe-column field="address" title="Address"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
|
||||
@@ -10,21 +10,21 @@
|
||||
height="500"
|
||||
:scroll-y="{gt: 0, rHeight: 120}"
|
||||
:loading="demo1.loading">
|
||||
<vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
|
||||
<vxe-table-column title="图片" width="140" align="center">
|
||||
<vxe-column type="seq" title="序号" width="100"></vxe-column>
|
||||
<vxe-column title="图片" width="140" align="center">
|
||||
<template #default>
|
||||
<img src="/vxe-table/static/other/img1.gif" style="width: 100px;">
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column title="基本信息">
|
||||
</vxe-column>
|
||||
<vxe-column title="基本信息">
|
||||
<template #default="{ row }">
|
||||
<div class="label-ellipsis">{{ row.name }}</div>
|
||||
<div class="label-ellipsis">{{ row.num }}</div>
|
||||
<div class="label-ellipsis">{{ row.address }}</div>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="num" title="Num" width="200"></vxe-table-column>
|
||||
<vxe-table-column field="time" title="Time" width="200"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="num" title="Num" width="200"></vxe-column>
|
||||
<vxe-column field="time" title="Time" width="200"></vxe-column>
|
||||
</vxe-table>
|
||||
|
||||
<p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
|
||||
@@ -92,21 +92,21 @@ export default defineComponent({
|
||||
height="500"
|
||||
:scroll-y="{gt: 0, rHeight: 120}"
|
||||
:loading="loading">
|
||||
<vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
|
||||
<vxe-table-column title="图片" width="120" align="center">
|
||||
<vxe-column type="seq" title="序号" width="100"></vxe-column>
|
||||
<vxe-column title="图片" width="120" align="center">
|
||||
<template #default>
|
||||
<img src="/vxe-table/static/other/img1.gif" style="width: 100px;">
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column title="基本信息">
|
||||
</vxe-column>
|
||||
<vxe-column title="基本信息">
|
||||
<template #default="{ row }">
|
||||
<div class="label-ellipsis">{{ row.name }}</div>
|
||||
<div class="label-ellipsis">{{ row.num }}</div>
|
||||
<div class="label-ellipsis">{{ row.address }}</div>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column field="num" title="Num" width="200"></vxe-table-column>
|
||||
<vxe-table-column field="time" title="Time" width="200"></vxe-table-column>
|
||||
</vxe-column>
|
||||
<vxe-column field="num" title="Num" width="200"></vxe-column>
|
||||
<vxe-column field="time" title="Time" width="200"></vxe-column>
|
||||
</vxe-table>
|
||||
`,
|
||||
`
|
||||
|
||||
@@ -1671,6 +1671,10 @@
|
||||
"type": "boolean",
|
||||
"description": "是否允许窗口边缘拖动调整窗口大小"
|
||||
},
|
||||
"vxe-modal/margin-size": {
|
||||
"type": "number",
|
||||
"description": "只对 resize 启用后有效，用于设置可拖动界限范围，如果为负数则允许拖动超出屏幕边界"
|
||||
},
|
||||
"vxe-modal/duration": {
|
||||
"type": "number | string",
|
||||
"description": "只对 type=message 有效，自动关闭的延时，如果为 -1 禁用自动关闭"
|
||||
@@ -1715,6 +1719,10 @@
|
||||
"type": "boolean",
|
||||
"description": "默认最大化显示"
|
||||
},
|
||||
"vxe-modal/draggable": {
|
||||
"type": "boolean",
|
||||
"description": "是否启用窗口拖动"
|
||||
},
|
||||
"vxe-modal/dblclick-zoom": {
|
||||
"type": "boolean",
|
||||
"description": "只对 type=modal 有效，是否允许通过双击头部放大或还原窗口"
|
||||
|
||||
@@ -545,6 +545,7 @@
|
||||
"show-zoom",
|
||||
"show-close",
|
||||
"resize",
|
||||
"margin-size",
|
||||
"duration",
|
||||
"width",
|
||||
"height",
|
||||
@@ -556,6 +557,7 @@
|
||||
"show-title-overflow",
|
||||
"transfer",
|
||||
"fullscreen",
|
||||
"draggable",
|
||||
"dblclick-zoom",
|
||||
"remember",
|
||||
"destroy-on-close",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vxe-table",
|
||||
"version": "4.0.27",
|
||||
"version": "4.0.28-beta.0",
|
||||
"description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
@@ -88,7 +88,7 @@
|
||||
"vxe-table-plugin-shortcut-key": "^3.0.1",
|
||||
"xe-ajax": "^4.0.5",
|
||||
"xe-clipboard": "^1.10.1",
|
||||
"xe-utils": "^3.3.1",
|
||||
"xe-utils": "^3.3.2",
|
||||
"xlsx": "^0.17.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -48,6 +48,7 @@ export default defineComponent({
|
||||
zIndex: Number as PropType<VxeModalPropTypes.ZIndex>,
|
||||
marginSize: { type: [Number, String] as PropType<VxeModalPropTypes.MarginSize>, default: () => GlobalConfig.modal.marginSize },
|
||||
fullscreen: Boolean as PropType<VxeModalPropTypes.Fullscreen>,
|
||||
draggable: { type: Boolean as PropType<VxeModalPropTypes.Draggable>, default: () => GlobalConfig.modal.draggable },
|
||||
remember: { type: Boolean, default: () => GlobalConfig.modal.remember },
|
||||
destroyOnClose: { type: Boolean as PropType<VxeModalPropTypes.DestroyOnClose>, default: () => GlobalConfig.modal.destroyOnClose },
|
||||
showTitleOverflow: { type: Boolean as PropType<VxeModalPropTypes.ShowTitleOverflow>, default: () => GlobalConfig.modal.showTitleOverflow },
|
||||
@@ -703,21 +704,27 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const renderHeaders = () => {
|
||||
const { slots: propSlots = {}, showZoom } = props
|
||||
const { slots: propSlots = {}, showZoom, draggable } = props
|
||||
const isMsg = computeIsMsg.value
|
||||
const headerSlot = slots.header || propSlots.header
|
||||
const headVNs: VNode[] = []
|
||||
if (props.showHeader) {
|
||||
const headerOns: {
|
||||
onMousedown?: typeof mousedownEvent;
|
||||
onDblclick?: typeof toggleZoomEvent;
|
||||
} = {}
|
||||
if (draggable) {
|
||||
headerOns.onMousedown = mousedownEvent
|
||||
}
|
||||
if (showZoom && props.dblclickZoom && props.type === 'modal') {
|
||||
headerOns.onDblclick = toggleZoomEvent
|
||||
}
|
||||
headVNs.push(
|
||||
h('div', {
|
||||
class: ['vxe-modal--header', !isMsg && props.showTitleOverflow ? 'is--ellipsis' : ''],
|
||||
onMousedown: mousedownEvent,
|
||||
class: ['vxe-modal--header', {
|
||||
'is--drag': draggable,
|
||||
'is--ellipsis': !isMsg && props.showTitleOverflow
|
||||
}],
|
||||
...headerOns
|
||||
}, headerSlot ? (!reactData.inited || (props.destroyOnClose && !reactData.visible) ? [] : headerSlot({ $modal: $xemodal })) as VNode[] : renderTitles())
|
||||
)
|
||||
|
||||
@@ -311,6 +311,7 @@ const GlobalConfig: VXETableGlobalConfig = {
|
||||
showTitleOverflow: true,
|
||||
animat: true,
|
||||
showClose: true,
|
||||
draggable: true,
|
||||
// storage: false,
|
||||
storageKey: 'VXE_MODAL_POSITION'
|
||||
},
|
||||
|
||||
@@ -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;
|
||||
|
||||
2
types/modal.d.ts
vendored
2
types/modal.d.ts
vendored
@@ -142,6 +142,7 @@ export namespace VxeModalPropTypes {
|
||||
export type ZIndex = number;
|
||||
export type MarginSize = number | string;
|
||||
export type Fullscreen = boolean;
|
||||
export type Draggable = boolean;
|
||||
export type Remember = boolean;
|
||||
export type DestroyOnClose = boolean;
|
||||
export type ShowTitleOverflow = boolean;
|
||||
@@ -185,6 +186,7 @@ export type VxeModalProps = {
|
||||
showZoom?: VxeModalPropTypes.ShowZoom;
|
||||
showClose?: VxeModalPropTypes.ShowClose;
|
||||
dblclickZoom?: VxeModalPropTypes.DblclickZoom;
|
||||
draggable?: VxeModalPropTypes.Draggable;
|
||||
width?: VxeModalPropTypes.Width;
|
||||
height?: VxeModalPropTypes.Height;
|
||||
minWidth?: VxeModalPropTypes.MinWidth;
|
||||
|
||||
Reference in New Issue
Block a user