-
通过 . 开启全表工具提示，还可以配合 方法重写默认的提示内容，显示逻辑完全自定义控制，可以返回 null 使用默认的提示消息
+
+ 通过 . 开启全表工具提示，还可以配合 方法重写默认的提示内容，显示逻辑完全自定义控制，可以返回 null 使用默认的提示消息
+ 还可以通过 设置标题的帮助提示消息
+
-
+
@@ -51,7 +54,7 @@ export default {
:data="tableData">
-
+
diff --git a/examples/views/table/grid/FullEdit.vue b/examples/views/table/grid/FullEdit.vue
index dd4543997..a1b6c628a 100644
--- a/examples/views/table/grid/FullEdit.vue
+++ b/examples/views/table/grid/FullEdit.vue
@@ -57,8 +57,9 @@ export default {
titleAlign: 'right',
items: [
{ field: 'name', title: 'app.body.label.name', span: 8, titlePrefix: { message: 'app.body.valid.rName', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
- { field: 'role', title: '角色', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
+ { field: 'email', title: '邮件', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入邮件' } } },
{ field: 'nickname', title: '昵称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
+ { field: 'role', title: '角色', span: 8, folding: true, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
{ field: 'sex', title: '性别', span: 8, folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] } },
{ field: 'age', title: '年龄', span: 8, folding: true, itemRender: { name: '$input', props: { type: 'number', min: 1, max: 120, placeholder: '请输入年龄' } } },
{ span: 24, align: 'center', collapseNode: true, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: 'app.body.label.search', status: 'primary' } }, { props: { type: 'reset', content: 'app.body.label.reset' } }] } }
@@ -117,9 +118,10 @@ export default {
filterMultiple: false,
editRender: { name: 'input' }
},
+ { field: 'email', title: 'Email', width: 160, editRender: { name: 'input' } },
{ field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },
{ field: 'sex', title: 'Sex', editRender: { name: '$select', options: [] } },
- { field: 'age', title: 'Age', remoteSort: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
+ { field: 'age', title: 'Age', visible: false, remoteSort: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
{ field: 'amount', title: 'Amount', formatter: this.formatAmount, editRender: { name: '$input', props: { type: 'float', digits: 2 } } },
{ field: 'updateDate', title: 'Update Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate },
{ field: 'createDate', title: 'Create Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate }
@@ -147,6 +149,9 @@ export default {
{ required: true, message: 'app.body.valid.rName' },
{ min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
],
+ email: [
+ { required: true, message: '邮件必须填写' }
+ ],
role: [
{ required: true, message: '角色必须填写' }
]
@@ -194,8 +199,9 @@ export default {
titleAlign: 'right',
items: [
{ field: 'name', title: 'app.body.label.name', span: 8, titlePrefix: { message: 'app.body.valid.rName', icon: 'fa fa-exclamation-circle' }, itemRender: { name: '$input', props: { placeholder: '请输入名称' } } },
- { field: 'role', title: '角色', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
+ { field: 'email', title: '邮件', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入邮件' } } },
{ field: 'nickname', title: '昵称', span: 8, itemRender: { name: '$input', props: { placeholder: '请输入昵称' } } },
+ { field: 'role', title: '角色', span: 8, folding: true, itemRender: { name: '$input', props: { placeholder: '请输入角色' } } },
{ field: 'sex', title: '性别', span: 8, folding: true, titleSuffix: { message: '注意，必填信息！', icon: 'fa fa-info-circle' }, itemRender: { name: '$select', options: [] } },
{ field: 'age', title: '年龄', span: 8, folding: true, itemRender: { name: '$input', props: { type: 'number', min: 1, max: 120, placeholder: '请输入年龄' } } },
{ span: 24, align: 'center', collapseNode: true, itemRender: { name: '$buttons', children: [{ props: { type: 'submit', content: 'app.body.label.search', status: 'primary' } }, { props: { type: 'reset', content: 'app.body.label.reset' } }] } }
@@ -254,9 +260,10 @@ export default {
filterMultiple: false,
editRender: { name: 'input' }
},
+ { field: 'email', title: 'Email', width: 160, editRender: { name: 'input' } },
{ field: 'nickname', title: 'Nickname', editRender: { name: 'input' } },
{ field: 'sex', title: 'Sex', editRender: { name: '$select', options: [] } },
- { field: 'age', title: 'Age', remoteSort: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
+ { field: 'age', title: 'Age', visible: false, remoteSort: true, editRender: { name: '$input', props: { type: 'number', min: 1, max: 120 } } },
{ field: 'amount', title: 'Amount', formatter: this.formatAmount, editRender: { name: '$input', props: { type: 'float', digits: 2 } } },
{ field: 'updateDate', title: 'Update Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate },
{ field: 'createDate', title: 'Create Date', width: 160, visible: false, remoteSort: true, formatter: this.formatDate }
@@ -284,6 +291,9 @@ export default {
{ required: true, message: 'app.body.valid.rName' },
{ min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
],
+ email: [
+ { required: true, message: '邮件必须填写' }
+ ],
role: [
{ required: true, message: '角色必须填写' }
]
diff --git a/examples/views/table/grid/FullQuery.vue b/examples/views/table/grid/FullQuery.vue
index 36a192721..0a0b51eab 100644
--- a/examples/views/table/grid/FullQuery.vue
+++ b/examples/views/table/grid/FullQuery.vue
@@ -107,14 +107,15 @@ export default {
columns: [
{ type: 'seq', width: 60, fixed: 'left' },
{ type: 'radio', title: 'ID', width: 120, fixed: 'left' },
- { field: 'name', title: 'Name', minWidth: 200, remoteSort: true },
- { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 200 },
- { field: 'age', title: 'Age', remoteSort: true, width: 100 },
+ { field: 'name', title: 'Name', minWidth: 160, remoteSort: true },
+ { field: 'email', title: 'Email', minWidth: 160, editRender: { name: 'input' } },
+ { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 160 },
+ { field: 'age', title: 'Age', visible: false, remoteSort: true, width: 100 },
{
field: 'role',
title: 'Role',
remoteSort: true,
- minWidth: 200,
+ minWidth: 160,
filters: [
{ label: '前端开发', value: '前端' },
{ label: '后端开发', value: '后端' },
@@ -123,9 +124,9 @@ export default {
],
filterMultiple: false
},
- { field: 'amount', title: 'Amount', width: 100, formatter: this.formatAmount },
- { field: 'updateDate', title: 'Update Date', width: 160, remoteSort: true, formatter: this.formatDate },
- { field: 'createDate', title: 'Create Date', width: 160, remoteSort: true, formatter: this.formatDate }
+ { field: 'amount', title: 'Amount', width: 140, formatter: this.formatAmount },
+ { field: 'updateDate', title: 'Update Date', visible: false, width: 160, remoteSort: true, formatter: this.formatDate },
+ { field: 'createDate', title: 'Create Date', visible: false, width: 160, remoteSort: true, formatter: this.formatDate }
]
},
demoCodes: [
@@ -222,14 +223,15 @@ export default {
columns: [
{ type: 'seq', width: 60, fixed: 'left' },
{ type: 'radio', title: 'ID', width: 120, fixed: 'left' },
- { field: 'name', title: 'Name', minWidth: 200, remoteSort: true },
- { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 200 },
- { field: 'age', title: 'Age', remoteSort: true, width: 100 },
+ { field: 'name', title: 'Name', minWidth: 160, remoteSort: true },
+ { field: 'email', title: 'Email', minWidth: 160, editRender: { name: 'input' } },
+ { field: 'nickname', title: 'Nickname', remoteSort: true, minWidth: 160 },
+ { field: 'age', title: 'Age', visible: false, remoteSort: true, width: 100 },
{
field: 'role',
title: 'Role',
remoteSort: true,
- minWidth: 200,
+ minWidth: 160,
filters: [
{ label: '前端开发', value: '前端' },
{ label: '后端开发', value: '后端' },
@@ -238,9 +240,9 @@ export default {
],
filterMultiple: false
},
- { field: 'amount', title: 'Amount', width: 100, formatter: this.formatAmount },
- { field: 'updateDate', title: 'Update Date', width: 160, remoteSort: true, formatter: this.formatDate },
- { field: 'createDate', title: 'Create Date', width: 160, remoteSort: true, formatter: this.formatDate }
+ { field: 'amount', title: 'Amount', width: 140, formatter: this.formatAmount },
+ { field: 'updateDate', title: 'Update Date', visible: false, width: 160, remoteSort: true, formatter: this.formatDate },
+ { field: 'createDate', title: 'Create Date', visible: false, width: 160, remoteSort: true, formatter: this.formatDate }
]
}
}
diff --git a/examples/views/table/grid/TreeEdit.vue b/examples/views/table/grid/TreeEdit.vue
index d4cad4d89..d5325c12d 100644
--- a/examples/views/table/grid/TreeEdit.vue
+++ b/examples/views/table/grid/TreeEdit.vue
@@ -4,6 +4,7 @@
@@ -160,6 +161,7 @@ export default {
`
diff --git a/examples/views/table/tree/CellValid.vue b/examples/views/table/tree/CellValid.vue
index 0e36f67f0..2a62e1764 100644
--- a/examples/views/table/tree/CellValid.vue
+++ b/examples/views/table/tree/CellValid.vue
@@ -17,6 +17,7 @@
GlobalConfig.button.size || GlobalConfig.size },
@@ -28,9 +30,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
isText () {
return this.type === 'text'
},
diff --git a/packages/cell/src/cell.js b/packages/cell/src/cell.js
index 6d5ffbcf1..dd69bc893 100644
--- a/packages/cell/src/cell.js
+++ b/packages/cell/src/cell.js
@@ -60,6 +60,27 @@ function renderTitleContent (h, params, content) {
]
}
+function getFooterContent (h, params) {
+ const { $table, column, _columnIndex, items } = params
+ const { slots, own } = column
+ const renderOpts = own.editRender || own.cellRender
+ if (slots && slots.footer) {
+ return slots.footer.call($table, params, h)
+ }
+ if (renderOpts) {
+ const compConf = VXETable.renderer.get(renderOpts.name)
+ if (compConf && compConf.renderFooter) {
+ return compConf.renderFooter.call($table, h, renderOpts, params, { $grid: $table.$xegrid, $table })
+ }
+ }
+ return [UtilTools.formatText(items[_columnIndex], 1)]
+}
+
+function getDefaultCellLabel (params) {
+ const { row, column } = params
+ return UtilTools.formatText(UtilTools.getCellLabel(row, column, params), 1)
+}
+
export const Cell = {
createColumn ($xetable, _vm) {
const { type, sortable, remoteSort, filters, editRender, treeNode } = _vm
@@ -132,7 +153,7 @@ export const Cell = {
return renderHelpIcon(h, params).concat(Cell.renderHeaderTitle(h, params))
},
renderDefaultCell (h, params) {
- const { $table, row, column } = params
+ const { $table, column } = params
const { slots, own } = column
const renderOpts = own.editRender || own.cellRender
if (slots && slots.default) {
@@ -145,25 +166,21 @@ export const Cell = {
return compConf[funName].call($table, h, renderOpts, Object.assign({ $type: own.editRender ? 'edit' : 'cell' }, params), { $grid: $table.$xegrid, $table })
}
}
- return [UtilTools.formatText(UtilTools.getCellLabel(row, column, params), 1)]
+ return [
+ h('span', {
+ class: 'vxe-cell--label'
+ }, [getDefaultCellLabel(params)])
+ ]
},
renderTreeCell (h, params) {
return Cell.renderTreeIcon(h, params, Cell.renderDefaultCell.call(this, h, params))
},
renderDefaultFooter (h, params) {
- const { $table, column, _columnIndex, items } = params
- const { slots, own } = column
- const renderOpts = own.editRender || own.cellRender
- if (slots && slots.footer) {
- return slots.footer.call($table, params, h)
- }
- if (renderOpts) {
- const compConf = VXETable.renderer.get(renderOpts.name)
- if (compConf && compConf.renderFooter) {
- return compConf.renderFooter.call($table, h, renderOpts, params, { $grid: $table.$xegrid, $table })
- }
- }
- return [UtilTools.formatText(items[_columnIndex], 1)]
+ return [
+ h('span', {
+ class: 'vxe-cell--item'
+ }, getFooterContent(h, params))
+ ]
},
/**
@@ -521,7 +538,7 @@ export const Cell = {
* HTML 标签
*/
renderHTMLCell (h, params) {
- const { $table, row, column } = params
+ const { $table, column } = params
const { slots } = column
if (slots && slots.default) {
return slots.default.call($table, params, h)
@@ -530,7 +547,7 @@ export const Cell = {
h('span', {
class: 'vxe-cell--html',
domProps: {
- innerHTML: UtilTools.formatText(UtilTools.getCellLabel(row, column, params), 1)
+ innerHTML: getDefaultCellLabel(params)
}
})
]
@@ -666,7 +683,7 @@ export const Cell = {
return Cell.renderTreeIcon(h, params, Cell.renderCellEdit(h, params))
},
runRenderer (h, params, _vm, isEdit) {
- const { $table, row, column } = params
+ const { $table, column } = params
const { slots, own, formatter } = column
const editRender = own.editRender
const compConf = VXETable.renderer.get(editRender.name)
@@ -680,7 +697,11 @@ export const Cell = {
return slots.default.call($table, params, h)
}
if (formatter) {
- return [UtilTools.formatText(UtilTools.getCellLabel(row, column, params), 1)]
+ return [
+ h('span', {
+ class: 'vxe-cell--label'
+ }, [getDefaultCellLabel(params)])
+ ]
}
return Cell.renderDefaultCell.call(_vm, h, params)
}
diff --git a/packages/checkbox/src/checkbox.js b/packages/checkbox/src/checkbox.js
index 23abeb2a8..504a238d1 100644
--- a/packages/checkbox/src/checkbox.js
+++ b/packages/checkbox/src/checkbox.js
@@ -1,8 +1,10 @@
import { UtilTools } from '../../tools'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
export default {
name: 'VxeCheckbox',
+ mixins: [vSize],
props: {
value: Boolean,
label: [String, Number],
@@ -18,9 +20,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
isGroup () {
return this.$xegroup
},
diff --git a/packages/conf/index.js b/packages/conf/index.js
index ee2e4d60a..e2e5ab929 100644
--- a/packages/conf/index.js
+++ b/packages/conf/index.js
@@ -1,6 +1,6 @@
const iconPrefix = 'vxe-icon--'
const GlobalConfig = {
- // size: null, // 全局尺寸
+ size: null, // 全局尺寸
zIndex: 100, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
// resizeInterval: 500,
@@ -173,7 +173,8 @@ const GlobalConfig = {
props: {
list: null,
result: 'result',
- total: 'page.total'
+ total: 'page.total',
+ message: 'message'
}
// beforeItem: null,
// beforeColumn: null,
@@ -230,7 +231,8 @@ const GlobalConfig = {
},
select: {
// size: null,
- // transfer: false
+ // transfer: false,
+ multiCharOverflow: 8
},
toolbar: {
// size: null,
diff --git a/packages/form/src/form.js b/packages/form/src/form.js
index 8b69d0e0c..83b34c40e 100644
--- a/packages/form/src/form.js
+++ b/packages/form/src/form.js
@@ -1,5 +1,6 @@
import XEUtils from 'xe-utils/methods/xe-utils'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
import VXETable from '../../v-x-e-table'
import { UtilTools, DomTools } from '../../tools'
import { createItem } from './util'
@@ -166,6 +167,7 @@ function renderItems (h, _vm) {
export default {
name: 'VxeForm',
+ mixins: [vSize],
props: {
loading: Boolean,
data: Object,
@@ -194,9 +196,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
validOpts () {
return Object.assign({}, GlobalConfig.form.validConfig, this.validConfig)
}
diff --git a/packages/grid/src/grid.js b/packages/grid/src/grid.js
index afb671bf9..dab9a289b 100644
--- a/packages/grid/src/grid.js
+++ b/packages/grid/src/grid.js
@@ -1,6 +1,7 @@
import Table from '../../table'
import XEUtils from 'xe-utils/methods/xe-utils'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
import VXETable from '../../v-x-e-table'
import { UtilTools, DomTools, GlobalEvent } from '../../tools'
@@ -105,6 +106,7 @@ Object.keys(Table.methods).forEach(name => {
export default {
name: 'VxeGrid',
+ mixins: [vSize],
props: {
...Table.props,
columns: Array,
@@ -139,9 +141,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
isMsg () {
return this.proxyOpts.message !== false
},
@@ -392,7 +391,12 @@ export default {
return ons
},
initToolbar () {
- this.$nextTick(() => this.$refs.xTable.connect(this.$refs.xToolbar))
+ this.$nextTick(() => {
+ const { xTable, xToolbar } = this.$refs
+ if (xTable && xToolbar) {
+ xTable.connect(xToolbar)
+ }
+ })
},
initPages () {
if (this.pagerConfig && this.pagerOpts.pageSize) {
@@ -699,7 +703,7 @@ export default {
}
},
sortChangeEvent (params) {
- const { proxyConfig, remoteSort } = this
+ const { remoteSort } = this
const { $table, column } = params
const isRemote = XEUtils.isBoolean(column.remoteSort) ? column.remoteSort : ($table.sortOpts.remote || remoteSort)
const property = params.order ? params.property : null
@@ -710,19 +714,22 @@ export default {
order: params.order,
sortBy: params.sortBy
} : {}
- if (proxyConfig) {
+ if (this.proxyConfig) {
+ this.tablePage.currentPage = 1
this.commitProxy('query')
}
}
this.$emit('sort-change', Object.assign({ $grid: this }, params))
},
filterChangeEvent (params) {
- const { remoteFilter } = this
const { $table, filters } = params
// 如果是服务端过滤
- if ($table.filterOpts.remote || remoteFilter) {
+ if ($table.filterOpts.remote || this.remoteFilter) {
this.filterData = filters
- this.commitProxy('query')
+ if (this.proxyConfig) {
+ this.tablePage.currentPage = 1
+ this.commitProxy('query')
+ }
}
this.$emit('filter-change', Object.assign({ $grid: this }, params))
},
diff --git a/packages/input/src/input.js b/packages/input/src/input.js
index 07e9db462..a6658002c 100644
--- a/packages/input/src/input.js
+++ b/packages/input/src/input.js
@@ -1,5 +1,6 @@
import XEUtils from 'xe-utils/methods/xe-utils'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
import { UtilTools, DomTools, GlobalEvent } from '../../tools'
const browse = DomTools.browse
@@ -551,6 +552,7 @@ function renderExtraSuffixIcon (h, _vm) {
export default {
name: 'VxeInput',
+ mixins: [vSize],
props: {
value: [String, Number, Date],
name: String,
@@ -561,6 +563,7 @@ export default {
placeholder: String,
maxlength: [String, Number],
autocomplete: { type: String, default: 'off' },
+ align: String,
form: String,
size: { type: String, default: () => GlobalConfig.input.size || GlobalConfig.size },
@@ -611,9 +614,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
isNumber () {
return ['number', 'integer', 'float'].indexOf(this.type) > -1
},
@@ -943,7 +943,7 @@ export default {
GlobalEvent.off(this, 'blur')
},
render (h) {
- const { controls, isDatePicker, visiblePanel, isActivated, vSize, type, readonly, disabled } = this
+ const { controls, isDatePicker, visiblePanel, isActivated, vSize, type, align, readonly, disabled } = this
const childs = []
const prefix = rendePrefixIcon(h, this)
const suffix = renderSuffixIcon(h, this)
@@ -966,6 +966,7 @@ export default {
return h('div', {
class: ['vxe-input', `type--${type}`, {
[`size--${vSize}`]: vSize,
+ [`is--${align}`]: align,
'is--controls': controls,
'is--prefix': !!prefix,
'is--suffix': !!suffix,
diff --git a/packages/mixins/size.js b/packages/mixins/size.js
new file mode 100644
index 000000000..034f70e52
--- /dev/null
+++ b/packages/mixins/size.js
@@ -0,0 +1,8 @@
+export default {
+ computed: {
+ vSize () {
+ const { $parent, size } = this
+ return size || ($parent && ($parent.size || $parent.vSize))
+ }
+ }
+}
diff --git a/packages/modal/src/modal.js b/packages/modal/src/modal.js
index b489f3d24..35c4f52f2 100644
--- a/packages/modal/src/modal.js
+++ b/packages/modal/src/modal.js
@@ -1,4 +1,5 @@
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
import XEUtils from 'xe-utils/methods/xe-utils'
import MsgQueue from './queue'
import { UtilTools, DomTools, GlobalEvent } from '../../tools'
@@ -7,6 +8,7 @@ const activeModals = []
export default {
name: 'VxeModal',
+ mixins: [vSize],
props: {
value: Boolean,
id: String,
@@ -60,9 +62,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || (this.$parent && (this.$parent.size || this.$parent.vSize))
- },
isMsg () {
return this.type === 'message'
}
diff --git a/packages/pager/src/pager.js b/packages/pager/src/pager.js
index 98f9df23c..b55bfd8d5 100644
--- a/packages/pager/src/pager.js
+++ b/packages/pager/src/pager.js
@@ -1,8 +1,10 @@
import XEUtils from 'xe-utils/methods/xe-utils'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
export default {
name: 'VxePager',
+ mixins: [vSize],
props: {
size: { type: String, default: () => GlobalConfig.pager.size || GlobalConfig.size },
// 自定义布局
@@ -42,9 +44,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
isSizes () {
return this.layouts.some(name => name === 'Sizes')
},
diff --git a/packages/pulldown/src/pulldown.js b/packages/pulldown/src/pulldown.js
index 2601c4725..cbac366f0 100644
--- a/packages/pulldown/src/pulldown.js
+++ b/packages/pulldown/src/pulldown.js
@@ -1,8 +1,10 @@
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
import { UtilTools, DomTools, GlobalEvent } from '../../tools'
export default {
name: 'VxePulldown',
+ mixins: [vSize],
props: {
disabled: Boolean,
placement: String,
@@ -20,11 +22,6 @@ export default {
isActivated: false
}
},
- computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- }
- },
created () {
GlobalEvent.on(this, 'mousewheel', this.handleGlobalMousewheelEvent)
GlobalEvent.on(this, 'mousedown', this.handleGlobalMousedownEvent)
diff --git a/packages/radio/src/radio.js b/packages/radio/src/radio.js
index 337c6d70d..aa23b22b9 100644
--- a/packages/radio/src/radio.js
+++ b/packages/radio/src/radio.js
@@ -1,8 +1,10 @@
import { UtilTools } from '../../tools'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
export default {
name: 'VxeRadio',
+ mixins: [vSize],
props: {
value: [String, Number],
label: [String, Number],
@@ -18,9 +20,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
isGroup () {
return this.$xegroup
},
diff --git a/packages/select/src/select.js b/packages/select/src/select.js
index 6b9cc2b5e..84d9330ec 100644
--- a/packages/select/src/select.js
+++ b/packages/select/src/select.js
@@ -1,6 +1,7 @@
import XEUtils from 'xe-utils/methods/xe-utils'
import VxeInput from '../../input/src/input'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
import { UtilTools, DomTools, GlobalEvent } from '../../tools'
function isOptionVisible (option) {
@@ -172,12 +173,14 @@ export function renderOptgroup (h, _vm) {
export default {
name: 'VxeSelect',
+ mixins: [vSize],
props: {
value: null,
clearable: Boolean,
placeholder: String,
disabled: Boolean,
multiple: Boolean,
+ multiCharOverflow: { type: [Number, String], default: () => GlobalConfig.select.multiCharOverflow },
prefixIcon: String,
placement: String,
options: Array,
@@ -214,9 +217,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
propsOpts () {
return this.optionProps || {}
},
@@ -238,13 +238,16 @@ export default {
isGroup () {
return this.fullGroupList.some(item => item.options && item.options.length)
},
+ multiMaxCharNum () {
+ return XEUtils.toNumber(this.multiCharOverflow)
+ },
selectLabel () {
- const { value, multiple } = this
+ const { value, multiple, multiMaxCharNum } = this
if (value && multiple) {
return value.map(val => {
const label = getSelectLabel(this, val)
- if (label.length > 8) {
- return `${label.substring(0, 8)}...`
+ if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
+ return `${label.substring(0, multiMaxCharNum)}...`
}
return label
}).join(', ')
diff --git a/packages/switch/src/switch.js b/packages/switch/src/switch.js
index ecec531fb..3ad302efb 100644
--- a/packages/switch/src/switch.js
+++ b/packages/switch/src/switch.js
@@ -1,10 +1,12 @@
import { UtilTools, DomTools } from '../../tools'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
const browse = DomTools.browse
export default {
name: 'VxeSwitch',
+ mixins: [vSize],
props: {
value: [String, Number, Boolean],
disabled: Boolean,
@@ -23,9 +25,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
isChecked () {
return this.value === this.onValue
},
diff --git a/packages/table/src/methods.js b/packages/table/src/methods.js
index e9958c2be..f6bac0116 100644
--- a/packages/table/src/methods.js
+++ b/packages/table/src/methods.js
@@ -1775,25 +1775,13 @@ const Methods = {
const titleElem = evnt.currentTarget
this.handleTargetEnterEvent()
if (tooltipStore.column !== column || !tooltipStore.visible) {
- this.handleTooltip(evnt, titleElem, titleElem, params)
+ this.handleTooltip(evnt, titleElem, titleElem, null, params)
}
},
/**
- * 触发表尾 tooltip 事件
+ * 触发单元格 tooltip 事件
*/
- triggerFooterTooltipEvent (evnt, params) {
- const { column } = params
- const { tooltipStore } = this
- const cell = evnt.currentTarget
- this.handleTargetEnterEvent()
- if (tooltipStore.column !== column || !tooltipStore.visible) {
- this.handleTooltip(evnt, cell, cell.children[0], params)
- }
- },
- /**
- * 触发 tooltip 事件
- */
- triggerTooltipEvent (evnt, params) {
+ triggerBodyTooltipEvent (evnt, params) {
const { editConfig, editOpts, editStore, tooltipStore } = this
const { actived } = editStore
const { row, column } = params
@@ -1805,7 +1793,26 @@ const Methods = {
}
}
if (tooltipStore.column !== column || tooltipStore.row !== row || !tooltipStore.visible) {
- this.handleTooltip(evnt, cell, column.treeNode ? cell.querySelector('.vxe-tree-cell') : cell.children[0], params)
+ let overflowElem
+ let tipElem
+ if (column.treeNode) {
+ overflowElem = cell.querySelector('.vxe-tree-cell')
+ } else {
+ tipElem = cell.querySelector(column.type === 'html' ? '.vxe-cell--html' : '.vxe-cell--label')
+ }
+ this.handleTooltip(evnt, cell, overflowElem || cell.children[0], tipElem, params)
+ }
+ },
+ /**
+ * 触发表尾 tooltip 事件
+ */
+ triggerFooterTooltipEvent (evnt, params) {
+ const { column } = params
+ const { tooltipStore } = this
+ const cell = evnt.currentTarget
+ this.handleTargetEnterEvent()
+ if (tooltipStore.column !== column || !tooltipStore.visible) {
+ this.handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--item') || cell.children[0], null, params)
}
},
/**
@@ -1814,7 +1821,7 @@ const Methods = {
* @param {ColumnConfig} column 列配置
* @param {Row} row 行对象
*/
- handleTooltip (evnt, cell, overflowElem, params) {
+ handleTooltip (evnt, cell, overflowElem, tipElem, params) {
params.cell = cell
const { $refs, tooltipOpts, tooltipStore } = this
const { column, row } = params
@@ -1823,14 +1830,15 @@ const Methods = {
const customContent = contentMethod ? contentMethod(params) : null
const useCustom = contentMethod && !XEUtils.eqNull(customContent)
const content = useCustom ? customContent : (column.type === 'html' ? overflowElem.innerText : overflowElem.textContent).trim()
- if (content && (enabled || useCustom || overflowElem.scrollWidth > overflowElem.clientWidth)) {
+ const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth
+ if (content && (enabled || useCustom || isCellOverflow)) {
Object.assign(tooltipStore, {
row,
column,
visible: true
})
if (tooltip) {
- tooltip.toVisible(overflowElem, UtilTools.formatText(content))
+ tooltip.toVisible(isCellOverflow ? overflowElem : (tipElem || overflowElem), UtilTools.formatText(content))
}
}
return this.$nextTick()
diff --git a/packages/table/src/table.js b/packages/table/src/table.js
index 3c11cf9c1..5be9d34dd 100644
--- a/packages/table/src/table.js
+++ b/packages/table/src/table.js
@@ -2,6 +2,7 @@ import XEUtils from 'xe-utils/methods/xe-utils'
import GlobalConfig from '../../conf'
import VXETable from '../../v-x-e-table'
import VxeTableBody from '../../body'
+import vSize from '../../mixins/size'
import { UtilTools, DomTools, GlobalEvent, ResizeEvent } from '../../tools'
import methods from './methods'
@@ -64,6 +65,7 @@ function renderFixed (h, $xetable, fixedType) {
export default {
name: 'VxeTable',
+ mixins: [vSize],
props: {
/** 基本属性 */
id: String,
@@ -221,7 +223,6 @@ export default {
default: null
}
},
- mixins: [],
data () {
return {
tId: `${XEUtils.uniqueId()}`,
@@ -399,9 +400,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
validOpts () {
return Object.assign({ message: 'default' }, GlobalConfig.table.validConfig, this.validConfig)
},
@@ -742,7 +740,6 @@ export default {
this.preventEvent(null, 'activated')
},
deactivated () {
- this.elemStore = {}
this.preventEvent(null, 'deactivated')
},
beforeDestroy () {
diff --git a/packages/textarea/src/textarea.js b/packages/textarea/src/textarea.js
index 0f5230f67..b2c594815 100644
--- a/packages/textarea/src/textarea.js
+++ b/packages/textarea/src/textarea.js
@@ -1,11 +1,13 @@
import XEUtils from 'xe-utils/methods/xe-utils'
import GlobalConfig from '../../conf'
+import vSize from '../../mixins/size'
import { UtilTools } from '../../tools'
let autoTxtElem
export default {
name: 'VxeTextarea',
+ mixins: [vSize],
props: {
value: [String, Number],
name: String,
@@ -21,9 +23,6 @@ export default {
size: { type: String, default: () => GlobalConfig.textarea.size || GlobalConfig.size }
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
inputCount () {
return XEUtils.getSize(this.value)
},
diff --git a/packages/toolbar/src/toolbar.js b/packages/toolbar/src/toolbar.js
index 98992e054..77e57b053 100644
--- a/packages/toolbar/src/toolbar.js
+++ b/packages/toolbar/src/toolbar.js
@@ -1,6 +1,7 @@
import XEUtils from 'xe-utils/methods/xe-utils'
import GlobalConfig from '../../conf'
import VXETable from '../../v-x-e-table'
+import vSize from '../../mixins/size'
import { UtilTools, DomTools, GlobalEvent } from '../../tools'
/**
@@ -200,6 +201,7 @@ function renderCustoms (h, _vm) {
export default {
name: 'VxeToolbar',
+ mixins: [vSize],
props: {
loading: Boolean,
refresh: [Boolean, Object],
@@ -230,9 +232,6 @@ export default {
}
},
computed: {
- vSize () {
- return this.size || this.$parent.size || this.$parent.vSize
- },
refreshOpts () {
return Object.assign({}, GlobalConfig.toolbar.refresh, this.refresh)
},
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index f3da1c964..0f9d36edd 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -2,6 +2,28 @@ import XEUtils from 'xe-utils/methods/xe-utils'
import GlobalConfig from '../../conf'
import { UtilTools, DomTools } from '../../tools'
+function updateTipStyle (_vm) {
+ const { $el: wrapperElem, tipTarget, tipStore } = _vm
+ const { scrollTop, scrollLeft, visibleWidth } = DomTools.getDomNode()
+ const { top, left } = DomTools.getAbsolutePos(tipTarget)
+ const marginSize = 6
+ const offsetHeight = wrapperElem.offsetHeight
+ const offsetWidth = wrapperElem.offsetWidth
+ let tipLeft = left
+ let tipTop = top - offsetHeight - marginSize
+ tipLeft = Math.max(marginSize, left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2))
+ if (tipLeft + offsetWidth + marginSize > scrollLeft + visibleWidth) {
+ tipLeft = scrollLeft + visibleWidth - offsetWidth - marginSize
+ }
+ if (top - offsetHeight < scrollTop + marginSize) {
+ tipStore.placement = 'bottom'
+ tipTop = top + tipTarget.offsetHeight + marginSize
+ }
+ tipStore.style.top = `${tipTop}px`
+ tipStore.style.left = `${tipLeft}px`
+ tipStore.arrowStyle.left = `${left - tipLeft + tipTarget.offsetWidth / 2}px`
+}
+
export default {
name: 'VxeTooltip',
props: {
@@ -150,11 +172,8 @@ export default {
toVisible (target, message) {
this.targetActive = true
if (target) {
- const { $el, tipStore } = this
+ const { $el, tipStore, zIndex } = this
const parentNode = $el.parentNode
- tipStore.placement = 'top'
- tipStore.style = { width: 'auto' }
- tipStore.arrowStyle = { left: '50%' }
if (!parentNode) {
document.body.appendChild($el)
}
@@ -164,48 +183,19 @@ export default {
this.tipTarget = target
this.update(true)
this.updateZindex()
+ tipStore.placement = 'top'
+ tipStore.style = { width: 'auto', left: 0, top: 0, zIndex: zIndex || this.tipZindex }
+ tipStore.arrowStyle = { left: '50%' }
return this.updatePlacement()
}
return this.$nextTick()
},
updatePlacement () {
return this.$nextTick().then(() => {
- const { $el: wrapperElem, tipTarget, tipStore, zIndex } = this
+ const { $el: wrapperElem, tipTarget } = this
if (tipTarget && wrapperElem) {
- const { scrollTop, scrollLeft, visibleWidth } = DomTools.getDomNode()
- const { top, left } = DomTools.getAbsolutePos(tipTarget)
- let tipLeft = left
- const offsetHeight = wrapperElem.offsetHeight
- const offsetWidth = wrapperElem.offsetWidth
- tipLeft = left + Math.floor((tipTarget.offsetWidth - offsetWidth) / 2)
- tipStore.style = {
- zIndex: zIndex || this.tipZindex,
- top: `${top - offsetHeight - 6}px`,
- left: `${tipLeft}px`
- }
- return this.$nextTick().then(() => {
- const offsetHeight = wrapperElem.offsetHeight
- const offsetWidth = wrapperElem.offsetWidth
- Object.assign(tipStore.style, {
- top: `${top - offsetHeight - 6}px`,
- left: `${tipLeft}px`
- })
- if (top - offsetHeight < scrollTop + 6) {
- tipStore.placement = 'bottom'
- tipStore.style.top = `${top + tipTarget.offsetHeight + 6}px`
- }
- if (tipLeft < scrollLeft + 6) {
- // 超出左边界
- tipLeft = scrollLeft + 6
- tipStore.arrowStyle.left = `${left > tipLeft + 16 ? left - tipLeft + 16 : 16}px`
- tipStore.style.left = `${tipLeft}px`
- } else if (tipLeft + offsetWidth > scrollLeft + visibleWidth) {
- // 超出右边界
- tipLeft = scrollLeft + visibleWidth - offsetWidth - 6
- tipStore.arrowStyle.left = `${offsetWidth - Math.max(Math.floor((tipLeft + offsetWidth - left) / 2), 22)}px`
- tipStore.style.left = `${tipLeft}px`
- }
- })
+ updateTipStyle(this)
+ return this.$nextTick().then(() => updateTipStyle(this))
}
})
},
diff --git a/styles/button.scss b/styles/button.scss
index 24daa3c0f..28dd6c0f8 100644
--- a/styles/button.scss
+++ b/styles/button.scss
@@ -347,6 +347,8 @@ $btnThemeList: (
transform: scaleY(0.5);
transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
transform-origin: center top;
+ backface-visibility: hidden;
+ transform-style: preserve-3d;
&[data-placement="top"] {
transform-origin: center bottom;
}
diff --git a/styles/footer.scss b/styles/footer.scss
index 19003138b..285823aef 100644
--- a/styles/footer.scss
+++ b/styles/footer.scss
@@ -6,4 +6,18 @@
&.body--wrapper{
overflow-x: auto;
}
-}
\ No newline at end of file
+}
+
+.vxe-footer--column {
+ &.col--ellipsis {
+ & > .vxe-cell {
+ display: flex;
+ align-items: center;
+ .vxe-cell--item {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+ }
+}
diff --git a/styles/input.scss b/styles/input.scss
index bbf2a4092..d0a25808f 100644
--- a/styles/input.scss
+++ b/styles/input.scss
@@ -102,6 +102,21 @@ $iconWidth: 1.6em;
padding-right: #{$iconWidth + 0.2em};
}
}
+ &.is--left {
+ .vxe-input--inner {
+ text-align: left;
+ }
+ }
+ &.is--center {
+ .vxe-input--inner {
+ text-align: center;
+ }
+ }
+ &.is--right {
+ .vxe-input--inner {
+ text-align: right;
+ }
+ }
&.is--controls {
&.type--search,
&.type--password,
@@ -250,6 +265,8 @@ $iconWidth: 1.6em;
transform: scaleY(0.5);
transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
transform-origin: center top;
+ backface-visibility: hidden;
+ transform-style: preserve-3d;
&[data-placement="top"] {
transform-origin: center bottom;
}
@@ -271,8 +288,6 @@ $iconWidth: 1.6em;
.vxe-input--panel-wrapper {
overflow-x: hidden;
overflow-y: auto;
- padding: 0.2em 0;
- max-height: 26em;
}
.vxe-input--panel-layout-wrapper {
@@ -286,31 +301,11 @@ $iconWidth: 1.6em;
&.type--month,
&.type--year {
user-select: none;
- .vxe-input--panel-wrapper {
- padding: 0.8em;
- }
- }
- &.type--date,
- &.type--month,
- &.type--year {
- .vxe-input--panel-wrapper {
- width: 24em;
- }
- }
- &.type--week {
- .vxe-input--panel-wrapper {
- width: 27.2em;
- }
}
&.type--datetime {
- .vxe-input--panel-left-wrapper {
- width: 24em;
- padding: 0.8em;
- }
.vxe-input--panel-right-wrapper {
display: flex;
flex-direction: column;
- padding: 0.8em;
border-left: 1px solid $vxe-input-border-color;
}
}
@@ -346,10 +341,7 @@ $iconWidth: 1.6em;
.vxe-input--time-picker-title {
display: inline-block;
- height: 2.2em;
- line-height: 2.2em;
text-align: center;
- padding: 0 0.8em;
border: 1px solid $vxe-input-border-color;
border-radius: $vxe-border-radius;
}
@@ -357,9 +349,7 @@ $iconWidth: 1.6em;
position: absolute;
right: 0;
top: 0;
- height: 2.2em;
outline: 0;
- padding: 0 0.6em;
border: 1px solid $vxe-input-border-color;
border-radius: $vxe-border-radius;
cursor: pointer;
@@ -381,11 +371,6 @@ $iconWidth: 1.6em;
flex-shrink: 0;
}
-.vxe-input--time-picker-header,
-.vxe-input--date-picker-header {
- padding-bottom: 0.5em;
-}
-
.vxe-input--date-picker-header {
display: flex;
flex-direction: row;
@@ -401,23 +386,16 @@ $iconWidth: 1.6em;
.vxe-input--date-picker-type-wrapper {
.vxe-input--date-picker-label,
.vxe-input--date-picker-btn {
- padding: 0 0.6em;
display: inline-block;
}
}
.vxe-input--date-picker-btn-wrapper {
display: flex;
flex-direction: row;
- .vxe-input--date-picker-btn {
- width: 2.2em;
- margin-left: 0.5em;
- }
}
.vxe-input--date-picker-label,
.vxe-input--date-picker-btn {
display: inline-block;
- height: 2.2em;
- line-height: 2.2em;
display: flex;
border-radius: $vxe-border-radius;
border: 1px solid $vxe-input-border-color;
@@ -450,6 +428,7 @@ $iconWidth: 1.6em;
border-spacing: 0;
border-collapse: separate;
text-align: center;
+ table-layout: fixed
}
th,
td {
@@ -533,7 +512,6 @@ $iconWidth: 1.6em;
.vxe-input--date-label {
position: relative;
- line-height: 1;
padding-top: 8%;
&.is-notice {
&:before {
@@ -625,7 +603,6 @@ $iconWidth: 1.6em;
& > ul {
height: 100%;
overflow: hidden;
- width: 3.4em;
margin: 0;
padding: 0;
background-color: #fff;
@@ -633,15 +610,12 @@ $iconWidth: 1.6em;
&:after {
content: " ";
display: block;
- height: 8.7em;
}
&:hover {
overflow-y: auto;
}
& > li {
display: block;
- height: 22px;
- padding-left: 0.6em;
&:hover {
background-color: $vxe-input-date-picker-hover-background-color;
cursor: pointer;
@@ -653,11 +627,9 @@ $iconWidth: 1.6em;
}
}
.vxe-input--time-picker-minute-list {
- left: 1.95em;
border-left: 1px solid $vxe-table-popup-border-color;
}
.vxe-input--time-picker-second-list {
- left: 3.9em;
border-left: 1px solid $vxe-table-popup-border-color;
}
}
@@ -713,99 +685,135 @@ $iconWidth: 1.6em;
}
}
-.vxe-input--panel {
- font-size: $vxe-font-size;
+@mixin getPanelStyle ($sizeIndex) {
+ $fontSizeList: $vxe-font-size, $vxe-font-size-medium, $vxe-font-size-small, $vxe-font-size-mini;
+ $timeWeekRowHeightList: $vxe-input-date-time-week-row-height-default, $vxe-input-date-time-week-row-height-medium, $vxe-input-date-time-week-row-height-small, $vxe-input-date-time-week-row-height-mini;
+ $monthYearRowHeightList: $vxe-input-date-month-year-row-height-default, $vxe-input-date-month-year-row-height-medium, $vxe-input-date-month-year-row-height-small, $vxe-input-date-month-year-row-height-mini;
+ $titleRowHeightList: $vxe-input-date-title-height-default, $vxe-input-date-title-height-medium, $vxe-input-date-title-height-small, $vxe-input-date-title-height-mini;
+
+ font-size: nth($fontSizeList, $sizeIndex);
+ .vxe-input--panel-wrapper {
+ max-height: 400px - $sizeIndex * 20;
+ }
+ &.type--date,
+ &.type--week,
+ &.type--month,
+ &.type--year {
+ .vxe-input--panel-wrapper {
+ padding: 12px - $sizeIndex;
+ }
+ }
+ &.type--date,
+ &.type--month,
+ &.type--year {
+ .vxe-input--panel-wrapper {
+ $widthList: 336px, 336px, 312px, 288px;
+ width: nth($widthList, $sizeIndex);
+ }
+ }
+ &.type--week {
+ .vxe-input--panel-wrapper {
+ $widthList: 380px, 380px, 354px, 326px;
+ width: nth($widthList, $sizeIndex);
+ }
+ }
+ &.type--datetime {
+ .vxe-input--panel-left-wrapper {
+ $widthList: 336px, 336px, 312px, 288px;
+ width: nth($widthList, $sizeIndex);
+ }
+ .vxe-input--panel-left-wrapper,
+ .vxe-input--panel-right-wrapper {
+ padding: 12px - $sizeIndex;
+ }
+ }
+ .vxe-input--time-picker-title {
+ height: 31px - $sizeIndex;
+ line-height: 31px - $sizeIndex;
+ padding: 0 12px - $sizeIndex;
+ }
+ .vxe-input--date-picker-label,
+ .vxe-input--date-picker-btn {
+ height: 31px - $sizeIndex;
+ line-height: 31px - $sizeIndex;
+ }
+ .vxe-input--date-picker-btn-wrapper {
+ .vxe-input--date-picker-btn {
+ width: 31px - $sizeIndex;
+ margin-left: 9px - $sizeIndex;
+ }
+ }
+ .vxe-input--date-picker-type-wrapper {
+ .vxe-input--date-picker-label,
+ .vxe-input--date-picker-btn {
+ padding: 0 10px - $sizeIndex;
+ }
+ }
+ .vxe-input--time-picker-header,
+ .vxe-input--date-picker-header {
+ $paddingBottomList: 8px, 7px, 6px, 5px;
+ padding-bottom: nth($paddingBottomList, $sizeIndex);
+ }
.vxe-input--date-picker-body table,
.vxe-input--time-picker-body {
- height: $vxe-input-date-time-week-row-height-default * 6 + $vxe-input-date-title-height-default;
+ height: nth($timeWeekRowHeightList, $sizeIndex) * 6 + nth($titleRowHeightList, $sizeIndex);
+ }
+ .vxe-input--time-picker-body {
+ $ulWidthList: 48px, 48px, 44px, 42px;
+ & > ul {
+ width: nth($ulWidthList, $sizeIndex);
+ &:before,
+ &:after {
+ $heightList: 120px, 120px, 110px, 100px;
+ height: nth($heightList, $sizeIndex);
+ }
+ & > li {
+ height: 22px;
+ padding-left: 10px - $sizeIndex;
+ }
+ }
+ .vxe-input--time-picker-minute-list {
+ left: nth($ulWidthList, $sizeIndex);
+ }
+ .vxe-input--time-picker-second-list {
+ left: nth($ulWidthList, $sizeIndex) * 2;
+ }
}
.vxe-input--date-day-view,
.vxe-input--date-week-view {
td {
- height: $vxe-input-date-time-week-row-height-default;
+ height: nth($timeWeekRowHeightList, $sizeIndex);
}
}
.vxe-input--date-month-view,
.vxe-input--date-year-view {
td {
- height: $vxe-input-date-month-year-row-height-default;
+ height: nth($monthYearRowHeightList, $sizeIndex);
}
}
.vxe-input--date-picker-body {
th {
- height: $vxe-input-date-title-height-default;
+ height: nth($titleRowHeightList, $sizeIndex);
}
}
- &.size--medium {
- font-size: $vxe-font-size-medium;
- .vxe-input--date-picker-body table,
- .vxe-input--time-picker-body {
- height: $vxe-input-date-time-week-row-height-medium * 6 + $vxe-input-date-title-height-medium;
- }
- .vxe-input--date-day-view,
- .vxe-input--date-week-view {
- td {
- height: $vxe-input-date-time-week-row-height-medium;
- }
- }
- .vxe-input--date-month-view,
- .vxe-input--date-year-view {
- td {
- height: $vxe-input-date-month-year-row-height-medium;
- }
- }
- .vxe-input--date-picker-body {
- th {
- height: $vxe-input-date-title-height-medium;
- }
- }
+ .vxe-input--time-picker-confirm {
+ height: 31px - $sizeIndex;
+ padding: 0 10px - $sizeIndex;
}
- &.size--small {
- font-size: $vxe-font-size-small;
- .vxe-input--date-picker-body table,
- .vxe-input--time-picker-body {
- height: $vxe-input-date-time-week-row-height-small * 6 + $vxe-input-date-title-height-small;
- }
- .vxe-input--date-day-view,
- .vxe-input--date-week-view {
- td {
- height: $vxe-input-date-time-week-row-height-small;
- }
- }
- .vxe-input--date-month-view,
- .vxe-input--date-year-view {
- td {
- height: $vxe-input-date-month-year-row-height-small;
- }
- }
- .vxe-input--date-picker-body {
- th {
- height: $vxe-input-date-title-height-small;
- }
- }
- }
- &.size--mini {
- font-size: $vxe-font-size-mini;
- .vxe-input--date-picker-body table,
- .vxe-input--time-picker-body {
- height: $vxe-input-date-time-week-row-height-mini * 6 + $vxe-input-date-title-height-mini;
- }
- .vxe-input--date-day-view,
- .vxe-input--date-week-view {
- td {
- height: $vxe-input-date-time-week-row-height-mini;
- }
- }
- .vxe-input--date-month-view,
- .vxe-input--date-year-view {
- td {
- height: $vxe-input-date-month-year-row-height-mini;
- }
- }
- .vxe-input--date-picker-body {
- th {
- height: $vxe-input-date-title-height-mini;
- }
- }
+ .vxe-input--date-label {
+ line-height: nth($fontSizeList, $sizeIndex) + 1;
+ }
+}
+
+.vxe-input--panel {
+ @include getPanelStyle(1);
+ &.size--medium {
+ @include getPanelStyle(2);
+ }
+ &.size--small {
+ @include getPanelStyle(3);
+ }
+ &.size--mini {
+ @include getPanelStyle(4);
}
}
diff --git a/styles/pulldown.scss b/styles/pulldown.scss
index b66dcd57a..0e1e65972 100644
--- a/styles/pulldown.scss
+++ b/styles/pulldown.scss
@@ -28,6 +28,8 @@
transform: scaleY(0.5);
transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
transform-origin: center top;
+ backface-visibility: hidden;
+ transform-style: preserve-3d;
&[data-placement="top"] {
transform-origin: center bottom;
}
diff --git a/styles/select.scss b/styles/select.scss
index 7af855b4d..b24e71713 100644
--- a/styles/select.scss
+++ b/styles/select.scss
@@ -52,6 +52,8 @@
transform: scaleY(0.5);
transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
transform-origin: center top;
+ backface-visibility: hidden;
+ transform-style: preserve-3d;
&[data-placement="top"] {
transform-origin: center bottom;
}
diff --git a/styles/table.scss b/styles/table.scss
index 7f3e7306e..af1650ccc 100644
--- a/styles/table.scss
+++ b/styles/table.scss
@@ -365,7 +365,8 @@
}
}
}
- .vxe-header--column {
+ .vxe-header--column,
+ .vxe-footer--column {
&.col--ellipsis {
&.col--center {
.vxe-cell{
diff --git a/vue.config.js b/vue.config.js
index 38b123e40..1bac59d13 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -29,8 +29,8 @@ module.exports = {
config.output
.set('libraryExport', 'default')
.set('library', 'VXETable')
- if (process.env.npm_lifecycle_event.indexOf('lib') === 0) {
- let XEUtils = {
+ if (process.env.npm_lifecycle_event && process.env.npm_lifecycle_event.indexOf('lib') === 0) {
+ const XEUtils = {
root: 'XEUtils',
commonjs: 'xe-utils/methods/xe-utils',
commonjs2: 'xe-utils/methods/xe-utils',