vxe-table 3.5.0-beta.0 → 3.5.0-beta.3

package/packages/table/src/methods.js

@@ -2,13 +2,13 @@ import XEUtils from 'xe-utils'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import Cell from './cell'
 import VXETable from '../../v-x-e-table'
-import { clearTableAllStatus, handleFieldOrColumn, restoreScrollLocation, restoreScrollListener, toTreePathSeq } from './util'
+import { getRowid, getRowkey, clearTableAllStatus, handleFieldOrColumn, restoreScrollLocation, restoreScrollListener, toTreePathSeq } from './util'
 import UtilTools, { eqEmptyValue, isEnableConf, getFuncText } from '../../tools/utils'
 import DomTools, { browse, getPaddingTopBottomSize, setScrollTop, setScrollLeft } from '../../tools/dom'
 import { formats } from '../../v-x-e-table/src/formats'
 import { warnLog, errLog } from '../../tools/log'
 
-const { getRowid, getRowkey, setCellValue, hasChildrenList, getColumnList } = UtilTools
+const { setCellValue, hasChildrenList, getColumnList } = UtilTools
 const { calcHeight, hasClass, addClass, removeClass, getEventTargetNode, isNodeElement } = DomTools
 
 const isWebkit = browse['-webkit'] && !browse.edge
@@ -1902,10 +1902,6 @@ const Methods = {
       footerSpanMethod,
       isAllOverflow,
       visibleColumn
-      // isMergeLeftFixedExceeded,
-      // isMergeRightFixedExceeded,
-      // isMergeFooterLeftFixedExceeded,
-      // isMergeFooterRightFixedExceeded
     } = this
     const containerList = ['main', 'left', 'right']
     const emptyPlaceholderElem = $refs.emptyPlaceholder
@@ -2023,14 +2019,6 @@ const Methods = {
                 tableColumn = fixedColumn
               } else {
                 tableColumn = visibleColumn
-                // 检查固定列是否被合并，合并范围是否超出固定列
-                // if (mergeList.length && !isMergeLeftFixedExceeded && fixedType === 'left') {
-                //   tableColumn = fixedColumn
-                // } else if (mergeList.length && !isMergeRightFixedExceeded && fixedType === 'right') {
-                //   tableColumn = fixedColumn
-                // } else {
-                //   tableColumn = visibleColumn
-                // }
               }
             } else {
               tableColumn = visibleColumn
@@ -2056,14 +2044,6 @@ const Methods = {
                 tableColumn = fixedColumn
               } else {
                 tableColumn = visibleColumn
-                // 检查固定列是否被合并，合并范围是否超出固定列
-                // if (mergeFooterList.length && !isMergeFooterLeftFixedExceeded && fixedType === 'left') {
-                //   tableColumn = fixedColumn
-                // } else if (mergeFooterList.length && !isMergeFooterRightFixedExceeded && fixedType === 'right') {
-                //   tableColumn = fixedColumn
-                // } else {
-                //   tableColumn = visibleColumn
-                // }
               }
             } else {
               tableColumn = visibleColumn
@@ -2284,6 +2264,7 @@ const Methods = {
     const isEsc = keyCode === 27
     if (isEsc) {
       this.preventEvent(evnt, 'event.keydown', null, () => {
+        this.emitEvent('keydown-start', {}, evnt)
         if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
           this.handleKeyboardEvent(evnt)
         } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
@@ -2304,6 +2285,7 @@ const Methods = {
           }
         }
         this.emitEvent('keydown', {}, evnt)
+        this.emitEvent('keydown-end', {}, evnt)
       })
     }
   },
@@ -2549,19 +2531,9 @@ const Methods = {
     this.updateCellAreas()
     this.recalculate(true)
   },
-  handleTooltipLeaveMethod () {
-    const tooltipOpts = this.tooltipOpts
-    setTimeout(() => {
-      if (!this.tooltipActive) {
-        this.closeTooltip()
-      }
-    }, tooltipOpts.leaveDelay)
-    return false
-  },
   handleTargetEnterEvent (isClear) {
     const $tooltip = this.$refs.tooltip
     clearTimeout(this.tooltipTimeout)
-    this.tooltipActive = true
     if (isClear) {
       this.closeTooltip()
     } else {
@@ -2573,7 +2545,6 @@ const Methods = {
   handleTargetLeaveEvent () {
     const tooltipOpts = this.tooltipOpts
     let $tooltip = this.$refs.tooltip
-    this.tooltipActive = false
     if ($tooltip) {
       $tooltip.setActived(false)
     }
@@ -2590,16 +2561,19 @@ const Methods = {
   },
   triggerHeaderHelpEvent (evnt, params) {
     const { column } = params
-    const { titleHelp } = column
-    if (titleHelp.content || titleHelp.message) {
+    const titlePrefix = column.titlePrefix || column.titleHelp
+    if (titlePrefix.content || titlePrefix.message) {
       const { $refs, tooltipStore } = this
-      const $tooltip = $refs.tooltip
-      const content = getFuncText(titleHelp.content || titleHelp.message)
+      const content = getFuncText(titlePrefix.content || titlePrefix.message)
       this.handleTargetEnterEvent(true)
       tooltipStore.visible = true
-      if ($tooltip) {
-        $tooltip.open(evnt.currentTarget, content)
-      }
+      tooltipStore.currOpts = { ...titlePrefix, content: null }
+      this.$nextTick(() => {
+        const $tooltip = $refs.tooltip
+        if ($tooltip) {
+          $tooltip.open(evnt.currentTarget, content)
+        }
+      })
     }
   },
   /**
@@ -2665,7 +2639,6 @@ const Methods = {
     const { $refs, tooltipOpts, tooltipStore } = this
     const { column, row } = params
     const { showAll, enabled, contentMethod } = tooltipOpts
-    const tooltip = $refs.tooltip
     const customContent = contentMethod ? contentMethod(params) : null
     const useCustom = contentMethod && !XEUtils.eqNull(customContent)
     const content = useCustom ? customContent : (column.type === 'html' ? overflowElem.innerText : overflowElem.textContent).trim()
@@ -2674,11 +2647,15 @@ const Methods = {
       Object.assign(tooltipStore, {
         row,
         column,
-        visible: true
+        visible: true,
+        currOpts: null
+      })
+      this.$nextTick(() => {
+        const $tooltip = $refs.tooltip
+        if ($tooltip) {
+          $tooltip.open(isCellOverflow ? overflowElem : (tipElem || overflowElem), UtilTools.formatText(content))
+        }
       })
-      if (tooltip) {
-        tooltip.open(isCellOverflow ? overflowElem : (tipElem || overflowElem), UtilTools.formatText(content))
-      }
     }
     return this.$nextTick()
   },
@@ -2702,7 +2679,8 @@ const Methods = {
         row: null,
         column: null,
         content: null,
-        visible: false
+        visible: false,
+        currOpts: null
       })
       if (tooltip) {
         tooltip.close()
@@ -4268,8 +4246,11 @@ const Methods = {
     this.tableColumn = scrollXLoad ? visibleColumn.slice(scrollXStore.startIndex, scrollXStore.endIndex) : visibleColumn.slice(0)
   },
   updateScrollXData () {
-    this.handleTableColumn()
-    this.updateScrollXSpace()
+    this.tableColumn = []
+    this.$nextTick(() => {
+      this.handleTableColumn()
+      this.updateScrollXSpace()
+    })
   },
   // 更新横向 X 可视渲染上下剩余空间大小
   updateScrollXSpace () {
@@ -4308,8 +4289,11 @@ const Methods = {
     }
   },
   updateScrollYData () {
-    this.handleTableData()
-    this.updateScrollYSpace()
+    this.tableData = []
+    this.$nextTick(() => {
+      this.handleTableData()
+      this.updateScrollYSpace()
+    })
   },
   // 更新纵向 Y 可视渲染上下剩余空间大小
   updateScrollYSpace () {

package/packages/table/src/table.js

@@ -95,7 +95,7 @@ export default {
     height: [Number, String],
     // 表格的最大高度
     maxHeight: [Number, String],
-    // （即将废弃）所有列是否允许拖动列宽调整大小
+    // 已废弃，被 column-config.resizable 替换
     resizable: { type: Boolean, default: () => GlobalConfig.table.resizable },
     // 是否带有斑马纹
     stripe: { type: Boolean, default: () => GlobalConfig.table.stripe },
@@ -117,15 +117,15 @@ export default {
     footerAlign: { type: String, default: () => GlobalConfig.table.footerAlign },
     // 是否显示表头
     showHeader: { type: Boolean, default: () => GlobalConfig.table.showHeader },
-    // （即将废弃）是否要高亮当前选中行
+    // 已废弃，被 row-config.isCurrent 替换
     highlightCurrentRow: { type: Boolean, default: () => GlobalConfig.table.highlightCurrentRow },
-    // （即将废弃）鼠标移到行是否要高亮显示
+    // 已废弃，被 row-config.isHover 替换
     highlightHoverRow: { type: Boolean, default: () => GlobalConfig.table.highlightHoverRow },
-    // （即将废弃）是否要高亮当前选中列
+    // 已废弃，被 column-config.isCurrent 替换
     highlightCurrentColumn: { type: Boolean, default: () => GlobalConfig.table.highlightCurrentColumn },
-    // （即将废弃）鼠标移到列是否要高亮显示
+    // 已废弃，被 column-config.isHover 替换
     highlightHoverColumn: { type: Boolean, default: () => GlobalConfig.table.highlightHoverColumn },
-    // （即将废弃）激活单元格编辑时是否高亮显示
+    // 已废弃，直接删除
     highlightCell: Boolean,
     // 是否显示表尾合计
     showFooter: Boolean,
@@ -389,6 +389,13 @@ export default {
         insertList: [],
         removeList: []
       },
+      // 存放 tooltip 相关信息
+      tooltipStore: {
+        row: null,
+        column: null,
+        visible: false,
+        currOpts: null
+      },
       // 存放数据校验相关信息
       validStore: {
         visible: false,
@@ -480,11 +487,10 @@ export default {
       return Object.assign({}, GlobalConfig.table.checkboxConfig, this.checkboxConfig)
     },
     tooltipOpts () {
-      const opts = Object.assign({ leaveDelay: 300 }, GlobalConfig.table.tooltipConfig, this.tooltipConfig)
-      if (opts.enterable) {
-        opts.leaveMethod = this.handleTooltipLeaveMethod
-      }
-      return opts
+      return Object.assign({}, GlobalConfig.tooltip, GlobalConfig.table.tooltipConfig, this.tooltipConfig)
+    },
+    tipConfig () {
+      return { ...this.tooltipOpts, ...this.tooltipStore.currOpts }
     },
     validTipOpts () {
       return Object.assign({ isArrow: false }, this.tooltipOpts)
@@ -598,54 +604,6 @@ export default {
       }
       return false
     }
-    // isMergeLeftFixedExceeded () {
-    //   const { mergeList, columnStore, visibleColumn } = this
-    //   const { leftList } = columnStore
-    //   const lastFCIndex = visibleColumn.indexOf(leftList[leftList.length - 1])
-    //   for (let i = 0, len = mergeList.length; i < len; i++) {
-    //     const item = mergeList[i]
-    //     if (item.col <= lastFCIndex && item.col + item.colspan > lastFCIndex) {
-    //       return true
-    //     }
-    //   }
-    //   return false
-    // },
-    // isMergeRightFixedExceeded () {
-    //   const { mergeList, columnStore, visibleColumn } = this
-    //   const { rightList } = columnStore
-    //   const firstFCIndex = visibleColumn.indexOf(rightList[0])
-    //   for (let i = 0, len = mergeList.length; i < len; i++) {
-    //     const item = mergeList[i]
-    //     if (item.col < firstFCIndex && item.col + item.colspan >= firstFCIndex) {
-    //       return true
-    //     }
-    //   }
-    //   return false
-    // },
-    // isMergeFooterLeftFixedExceeded () {
-    //   const { mergeFooterList, columnStore, visibleColumn } = this
-    //   const { leftList } = columnStore
-    //   const lastFCIndex = visibleColumn.indexOf(leftList[leftList.length - 1])
-    //   for (let i = 0, len = mergeFooterList.length; i < len; i++) {
-    //     const item = mergeFooterList[i]
-    //     if (item.col <= lastFCIndex && item.col + item.colspan > lastFCIndex) {
-    //       return true
-    //     }
-    //   }
-    //   return false
-    // },
-    // isMergeFooterRightFixedExceeded () {
-    //   const { mergeFooterList, columnStore, visibleColumn } = this
-    //   const { rightList } = columnStore
-    //   const firstFCIndex = visibleColumn.indexOf(rightList[0])
-    //   for (let i = 0, len = mergeFooterList.length; i < len; i++) {
-    //     const item = mergeFooterList[i]
-    //     if (item.col < firstFCIndex && item.col + item.colspan >= firstFCIndex) {
-    //       return true
-    //     }
-    //   }
-    //   return false
-    // }
   },
   watch: {
     data (value) {
@@ -713,8 +671,6 @@ export default {
       scrollXStore: {},
       // 存放纵向 Y 虚拟滚动相关信息
       scrollYStore: {},
-      // 存放 tooltip 相关信息
-      tooltipStore: {},
       // 表格宽度
       tableWidth: 0,
       // 表格高度
@@ -757,13 +713,13 @@ export default {
 
     if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
       // if (this.rowId) {
-      //   warnLog('vxe.error.delProp', ['rowId', 'row-config.keyField'])
+      //   warnLog('vxe.error.delProp', ['row-id', 'row-config.keyField'])
       // }
       // if (this.rowKey) {
-      //   warnLog('vxe.error.delProp', ['rowId', 'row-config.useKey'])
+      //   warnLog('vxe.error.delProp', ['row-id', 'row-config.useKey'])
       // }
       // if (this.columnKey) {
-      //   warnLog('vxe.error.delProp', ['rowId', 'column-config.useKey'])
+      //   warnLog('vxe.error.delProp', ['row-id', 'column-config.useKey'])
       // }
       if (!(this.rowId || rowOpts.keyField) && (this.checkboxOpts.reserve || this.checkboxOpts.checkRowKeys || this.radioOpts.reserve || this.radioOpts.checkRowKey || this.expandOpts.expandRowKeys || this.treeOpts.expandRowKeys)) {
         warnLog('vxe.error.reqProp', ['row-config.keyField'])
@@ -771,7 +727,7 @@ export default {
       if (this.editConfig && editOpts.showStatus && !this.keepSource) {
         warnLog('vxe.error.reqProp', ['keep-source'])
       }
-      if (treeConfig && treeOpts.line && (!this.rowKey || !rowOpts.useKey || !showOverflow)) {
+      if (treeConfig && treeOpts.line && (!(this.rowKey || rowOpts.useKey) || !showOverflow)) {
         warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow'])
       }
       if (this.showFooter && !this.footerMethod) {
@@ -783,6 +739,18 @@ export default {
       if (this.tooltipOpts.enabled) {
         warnLog('vxe.error.delProp', ['tooltip-config.enabled', 'tooltip-config.showAll'])
       }
+      // if (this.highlightCurrentRow) {
+      //   warnLog('vxe.error.delProp', ['highlight-current-row', 'row-config.isCurrent'])
+      // }
+      // if (this.highlightHoverRow) {
+      //   warnLog('vxe.error.delProp', ['highlight-hover-row', 'row-config.isHover'])
+      // }
+      // if (this.highlightCurrentColumn) {
+      //   warnLog('vxe.error.delProp', ['highlight-current-column', 'column-config.isCurrent'])
+      // }
+      // if (this.highlightHoverColumn) {
+      //   warnLog('vxe.error.delProp', ['highlight-hover-column', 'column-config.isHover'])
+      // }
       // 检查导入导出类型，如果自定义导入导出方法，则不校验类型
       const { exportConfig, exportOpts, importConfig, importOpts } = this
       if (importConfig && importOpts.types && !importOpts.importMethod && !XEUtils.includeArrays(VXETable.config.importTypes, importOpts.types)) {
@@ -984,7 +952,6 @@ export default {
       highlightHoverColumn,
       editConfig,
       validTipOpts,
-      tooltipOpts,
       initStore,
       columnStore,
       filterStore,
@@ -1176,7 +1143,7 @@ export default {
        */
       hasTip ? h('vxe-tooltip', {
         ref: 'tooltip',
-        props: tooltipOpts
+        props: this.tipConfig
       }) : _e(),
       /**
        * 校验提示

package/packages/table/src/util.js

@@ -37,6 +37,17 @@ export function restoreScrollListener (scrollElem) {
   }
 }
 
+// 行主键 key
+export function getRowkey ($xetable) {
+  return $xetable.rowOpts.keyField || $xetable.rowId || '_X_ROW_KEY'
+}
+
+// 行主键 value
+export function getRowid ($xetable, row) {
+  const rowid = XEUtils.get(row, getRowkey($xetable))
+  return XEUtils.eqNull(rowid) ? '' : encodeURIComponent(rowid)
+}
+
 function getPaddingLeftRightSize (elem) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)

package/packages/tools/utils.js

@@ -20,11 +20,6 @@ export function getFuncText (content) {
   return XEUtils.isFunction(content) ? content() : (GlobalConfig.translate ? GlobalConfig.translate(content) : content)
 }
 
-// 行主键 key
-export function getRowkey ($xetable) {
-  return $xetable.rowOpts.keyField || $xetable.rowId || '_X_ID'
-}
-
 // 获取所有的列，排除分组
 export function getColumnList (columns) {
   const result = []
@@ -42,12 +37,6 @@ export const UtilTools = {
   getLastZIndex () {
     return lastZindex
   },
-  getRowkey,
-  // 行主键 value
-  getRowid ($xetable, row) {
-    const rowid = XEUtils.get(row, getRowkey($xetable))
-    return XEUtils.eqNull(rowid) ? '' : encodeURIComponent(rowid)
-  },
   getColumnList,
   getClass (property, params) {
     return property ? XEUtils.isFunction(property) ? property(params) : property : ''

package/packages/tooltip/src/tooltip.js

@@ -41,6 +41,29 @@ function showTip (_vm) {
   return _vm.updatePlacement()
 }
 
+function renderContent (h, _vm) {
+  const { $scopedSlots, useHTML, tipContent } = _vm
+  if ($scopedSlots.content) {
+    return h('div', {
+      key: 1,
+      class: 'vxe-table--tooltip-content'
+    }, $scopedSlots.content.call(this, {}))
+  }
+  if (useHTML) {
+    return h('div', {
+      key: 2,
+      class: 'vxe-table--tooltip-content',
+      domProps: {
+        innerHTML: tipContent
+      }
+    })
+  }
+  return h('div', {
+    key: 3,
+    class: 'vxe-table--tooltip-content'
+  }, UtilTools.formatText(tipContent))
+}
+
 export default {
   name: 'VxeTooltip',
   mixins: [vSize],
@@ -49,19 +72,19 @@ export default {
     size: { type: String, default: () => GlobalConfig.tooltip.size || GlobalConfig.size },
     trigger: { type: String, default: () => GlobalConfig.tooltip.trigger },
     theme: { type: String, default: () => GlobalConfig.tooltip.theme },
-    content: [String, Number],
+    content: { type: [String, Number], default: null },
+    useHTML: Boolean,
     zIndex: [String, Number],
     isArrow: { type: Boolean, default: true },
     enterable: Boolean,
     enterDelay: { type: Number, default: () => GlobalConfig.tooltip.enterDelay },
-    leaveDelay: { type: Number, default: () => GlobalConfig.tooltip.leaveDelay },
-    leaveMethod: Function
+    leaveDelay: { type: Number, default: () => GlobalConfig.tooltip.leaveDelay }
   },
   data () {
     return {
       isUpdate: false,
       visible: false,
-      message: '',
+      tipContent: '',
       tipActive: false,
       tipTarget: null,
       tipZindex: 0,
@@ -74,7 +97,7 @@ export default {
   },
   watch: {
     content (value) {
-      this.message = value
+      this.tipContent = value
     },
     value (value) {
       if (!this.isUpdate) {
@@ -94,7 +117,7 @@ export default {
     const { $el, trigger, content, value } = this
     const parentNode = $el.parentNode
     let target
-    this.message = content
+    this.tipContent = content
     this.tipZindex = UtilTools.nextZIndex()
     XEUtils.arrayEach($el.children, (elem, index) => {
       if (index > 1) {
@@ -134,7 +157,7 @@ export default {
     }
   },
   render (h) {
-    const { $scopedSlots, vSize, theme, message, tipActive, isArrow, visible, tipStore, enterable } = this
+    const { $scopedSlots, vSize, theme, tipActive, isArrow, visible, tipStore, enterable } = this
     let on
     if (enterable) {
       on = {
@@ -155,9 +178,7 @@ export default {
       ref: 'tipWrapper',
       on
     }, [
-      h('div', {
-        class: 'vxe-table--tooltip-content'
-      }, $scopedSlots.content ? $scopedSlots.content.call(this, {}) : message),
+      renderContent(h, this),
       h('div', {
         class: 'vxe-table--tooltip-arrow',
         style: tipStore.arrowStyle
@@ -165,8 +186,8 @@ export default {
     ].concat($scopedSlots.default ? $scopedSlots.default.call(this, {}) : []))
   },
   methods: {
-    open (target, message) {
-      return this.toVisible(target || this.target, message)
+    open (target, content) {
+      return this.toVisible(target || this.target, content)
     },
     close () {
       this.tipTarget = null
@@ -193,13 +214,13 @@ export default {
         this.tipZindex = UtilTools.nextZIndex()
       }
     },
-    toVisible (target, message) {
+    toVisible (target, content) {
       if (target) {
         const { trigger, enterDelay } = this
         this.tipActive = true
         this.tipTarget = target
-        if (message) {
-          this.message = message
+        if (content) {
+          this.tipContent = content
         }
         if (enterDelay && trigger === 'hover') {
           this.showDelayTip()
@@ -246,17 +267,15 @@ export default {
     wrapperMouseenterEvent () {
       this.tipActive = true
     },
-    wrapperMouseleaveEvent (evnt) {
-      const { leaveMethod, trigger, enterable, leaveDelay } = this
+    wrapperMouseleaveEvent () {
+      const { trigger, enterable, leaveDelay } = this
       this.tipActive = false
-      if (!leaveMethod || leaveMethod({ $event: evnt }) !== false) {
-        if (enterable && trigger === 'hover') {
-          setTimeout(() => {
-            if (!this.tipActive) {
-              this.close()
-            }
-          }, leaveDelay)
-        }
+      if (enterable && trigger === 'hover') {
+        setTimeout(() => {
+          if (!this.tipActive) {
+            this.close()
+          }
+        }, leaveDelay)
       }
     }
   }

package/packages/v-x-e-table/src/conf.js

@@ -27,7 +27,7 @@ export default {
     //   name: ''
     // },
     // rowConfig: {
-    //   keyField: '_X_ID' // 行数据的唯一主键字段名
+    //   keyField: '_X_ROW_KEY' // 行数据的唯一主键字段名
     // },
     radioConfig: {
       // trigger: 'default'
@@ -37,10 +37,9 @@ export default {
       // trigger: 'default',
       strict: true
     },
-    // tooltipConfig: {
-    //   theme: 'dark',
-    //   enterable: false
-    // },
+    tooltipConfig: {
+      enterable: true
+    },
     validConfig: {
       showMessage: true,
       message: 'default'
@@ -69,7 +68,7 @@ export default {
       parentField: 'parentId',
       children: 'children',
       hasChild: 'hasChild',
-      mapChildren: '_X_CHILD',
+      mapChildren: '_X_ROW_CHILD',
       indent: 20,
       showIcon: true
     },
@@ -244,12 +243,15 @@ export default {
   },
   form: {
     // preventSubmit: false,
+    // size: null,
+    // colon: false,
     validConfig: {
       showMessage: true,
       autoPos: true
     },
-    // size: null,
-    // colon: false,
+    tooltipConfig: {
+      enterable: true
+    },
     titleAsterisk: true
   },
   input: {
@@ -275,6 +277,9 @@ export default {
   select: {
     // size: null,
     // transfer: false,
+    // optionConfig: {
+    //   keyField: '_X_OPTION_KEY'
+    // },
     multiCharOverflow: 8
   },
   toolbar: {

package/styles/select.scss

@@ -104,7 +104,7 @@
 
 .vxe-select-option {
   padding: 0 10px;
-  max-width: 400px;
+  max-width: 600px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

package/styles/tooltip.scss

@@ -7,7 +7,7 @@
   top: -100%;
   left: -100%;
   font-size: 12px;
-  max-width: 500px;
+  max-width: 600px;
   border-radius: $vxe-border-radius;
   padding: 8px 12px;
   white-space: normal;