diff --git a/examples/plugins/xtable/index.js b/examples/plugins/xtable/index.js
index 6fd592669..7f2f09b76 100644
--- a/examples/plugins/xtable/index.js
+++ b/examples/plugins/xtable/index.js
@@ -39,6 +39,7 @@ import VXETablePluginMenus from 'vxe-table-plugin-menus'
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
import VXETablePluginExportPDF from 'vxe-table-plugin-export-pdf'
import VXETablePluginRenderer from 'vxe-table-plugin-renderer'
+// import VXETablePluginShortcutKey from 'vxe-table-plugin-shortcut-key'
import 'vxe-table-plugin-element/dist/style.css'
import 'vxe-table-plugin-iview/dist/style.css'
import 'vxe-table-plugin-antd/dist/style.css'
@@ -103,3 +104,4 @@ VXETable.use(VXETablePluginMenus)
VXETable.use(VXETablePluginExportXLSX)
VXETable.use(VXETablePluginExportPDF)
VXETable.use(VXETablePluginRenderer)
+// VXETable.use(VXETablePluginShortcutKey)
diff --git a/examples/views/button/Button.vue b/examples/views/button/Button.vue
index fc29f5e47..65392722b 100644
--- a/examples/views/button/Button.vue
+++ b/examples/views/button/Button.vue
@@ -214,7 +214,7 @@
| Tab | 切换到上一个 |
- | Shift Tab | 切换到下一个 |
+ | Shift + Tab | 切换到下一个 |
| Spacebar | 按下点击 |
| Enter | 点击 |
diff --git a/examples/views/checkbox/Checkbox.vue b/examples/views/checkbox/Checkbox.vue
index 7f9211d2d..5c830f7e2 100644
--- a/examples/views/checkbox/Checkbox.vue
+++ b/examples/views/checkbox/Checkbox.vue
@@ -33,7 +33,7 @@
| Tab | 切换到上一个 |
- | Shift Tab | 切换到下一个 |
+ | Shift + Tab | 切换到下一个 |
| Spacebar | 按下勾选 |
diff --git a/examples/views/pager/Pager.vue b/examples/views/pager/Pager.vue
index 8d37d021f..34275cffa 100644
--- a/examples/views/pager/Pager.vue
+++ b/examples/views/pager/Pager.vue
@@ -90,6 +90,10 @@
| Arrow Up ↑ | 如果在当前页输入框内则向上翻页 |
| Arrow Down ↓ | 如果在当前页输入框内则向下翻页 |
+ | Tab | 切换到上一个 |
+ | Shift + Tab | 切换到下一个 |
+ | Spacebar | 按下点击 |
+ | Enter | 点击 |
diff --git a/examples/views/radio/Radio.vue b/examples/views/radio/Radio.vue
index d9a75e545..dea979768 100644
--- a/examples/views/radio/Radio.vue
+++ b/examples/views/radio/Radio.vue
@@ -52,7 +52,7 @@
| Tab | 切换到上一个 |
- | Shift Tab | 切换到下一个 |
+ | Shift + Tab | 切换到下一个 |
| Arrow Up ↑ | 如果在分组内则移动到上一个选项 |
| Arrow Left ← | 如果在分组内则移动到上一个选项 |
| Arrow Down ↓ | 如果在分组内则移动到下一个选项 |
diff --git a/package.json b/package.json
index 124aa1251..f0509fa14 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vxe-table",
- "version": "3.0.8",
+ "version": "3.0.9",
"description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
"scripts": {
"serve": "vue-cli-service serve",
@@ -84,7 +84,7 @@
"vxe-table-plugin-iview": "^1.10.0",
"vxe-table-plugin-menus": "^1.5.2",
"vxe-table-plugin-renderer": "^1.3.0",
- "vxe-table-plugin-shortcut-key": "^1.4.0",
+ "vxe-table-plugin-shortcut-key": "^1.4.2",
"vxe-table-plugin-virtual-tree": "0.5.6",
"xe-ajax": "^4.0.5",
"xe-ajax-mock": "^1.12.0",
diff --git a/packages/pager/src/pager.js b/packages/pager/src/pager.js
index 9df91bc6b..d24585e32 100644
--- a/packages/pager/src/pager.js
+++ b/packages/pager/src/pager.js
@@ -113,7 +113,7 @@ export default {
methods: {
// 上一页
renderPrevPage (h) {
- return h('span', {
+ return h('button', {
class: ['vxe-pager--prev-btn', {
'is--disabled': this.currentPage <= 1
}],
@@ -131,7 +131,7 @@ export default {
},
// 向上翻页
renderPrevJump (h, tagName) {
- return h(tagName || 'span', {
+ return h(tagName || 'button', {
class: ['vxe-pager--jump-prev', {
'is--fixed': !tagName,
'is--disabled': this.currentPage <= 1
@@ -153,19 +153,19 @@ export default {
},
// number
renderNumber (h) {
- return h('ul', {
+ return h('span', {
class: 'vxe-pager--btn-wrapper'
}, this.renderPageBtn(h))
},
// jumpNumber
renderJumpNumber (h) {
- return h('ul', {
+ return h('span', {
class: 'vxe-pager--btn-wrapper'
}, this.renderPageBtn(h, true))
},
// 向下翻页
renderNextJump (h, tagName) {
- return h(tagName || 'span', {
+ return h(tagName || 'button', {
class: ['vxe-pager--jump-next', {
'is--fixed': !tagName,
'is--disabled': this.currentPage >= this.pageCount
@@ -187,7 +187,7 @@ export default {
},
// 下一页
renderNextPage (h) {
- return h('span', {
+ return h('button', {
class: ['vxe-pager--next-btn', {
'is--disabled': this.currentPage >= this.pageCount
}],
@@ -285,20 +285,20 @@ export default {
}
if (showJump && isLt) {
nums.push(
- h('li', {
+ h('button', {
class: 'vxe-pager--num-btn',
on: {
click: () => this.jumpPage(1)
}
}, 1),
- this.renderPrevJump(h, 'li')
+ this.renderPrevJump(h, 'span')
)
}
numList.forEach((item, index) => {
const number = startNumber + index
if (number <= pageCount) {
nums.push(
- h('li', {
+ h('button', {
class: ['vxe-pager--num-btn', {
'is--active': currentPage === number
}],
@@ -312,8 +312,8 @@ export default {
})
if (showJump && isGt) {
nums.push(
- this.renderNextJump(h, 'li'),
- h('li', {
+ this.renderNextJump(h, 'button'),
+ h('button', {
class: 'vxe-pager--num-btn',
on: {
click: () => this.jumpPage(pageCount)
diff --git a/packages/table/src/methods.js b/packages/table/src/methods.js
index f54056c89..eaf8643ae 100644
--- a/packages/table/src/methods.js
+++ b/packages/table/src/methods.js
@@ -1877,7 +1877,7 @@ const Methods = {
// 该行为只对当前激活的表格有效
if (this.isActivated) {
this.preventEvent(evnt, 'event.keydown', null, () => {
- const { isCtxMenu, ctxMenuStore, editStore, editOpts, editConfig, mouseConfig = {}, keyboardConfig = {}, treeConfig, treeOpts, highlightCurrentRow, currentRow, bodyCtxMenu } = this
+ const { isCtxMenu, ctxMenuStore, editStore, editOpts, editConfig, mouseConfig, mouseOpts, keyboardConfig, keyboardOpts, treeConfig, treeOpts, highlightCurrentRow, currentRow, bodyCtxMenu } = this
const { selected, actived } = editStore
const { keyCode } = evnt
const isBack = keyCode === 8
@@ -1908,9 +1908,9 @@ const Methods = {
} else {
this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selected', 39, true, this.ctxMenuList)
}
- } else if (keyboardConfig && this.mouseConfig && this.mouseOpts.area && this.handleKeyboardEvent) {
+ } else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
this.handleKeyboardEvent(evnt)
- } else if (isSpacebar && (keyboardConfig.isArrow || keyboardConfig.isTab) && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
+ } else if (keyboardConfig && isSpacebar && (keyboardOpts.isArrow || keyboardOpts.isTab) && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
// 空格键支持选中复选框
evnt.preventDefault()
if (selected.column.type === 'checkbox') {
@@ -1927,7 +1927,7 @@ const Methods = {
params = actived.args
this.clearActived(evnt)
// 如果配置了选中功能，则为选中状态
- if (mouseConfig.selected) {
+ if (mouseConfig && mouseOpts.selected) {
this.$nextTick(() => this.handleSelected(params, evnt))
}
}
@@ -1946,7 +1946,7 @@ const Methods = {
this.keyCtxTimeout = setTimeout(() => {
this._keyCtx = false
}, 1000)
- } else if (isEnter && !hasAltKey && keyboardConfig.isEnter && (selected.row || actived.row || (treeConfig && highlightCurrentRow && currentRow))) {
+ } else if (isEnter && !hasAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && highlightCurrentRow && currentRow))) {
// 退出选中
if (hasCtrlKey) {
// 如果是激活编辑状态，则取消编辑
@@ -1954,7 +1954,7 @@ const Methods = {
params = actived.args
this.clearActived(evnt)
// 如果配置了选中功能，则为选中状态
- if (mouseConfig.selected) {
+ if (mouseConfig && mouseOpts.selected) {
this.$nextTick(() => this.handleSelected(params, evnt))
}
}
@@ -1963,13 +1963,13 @@ const Methods = {
if (selected.row || actived.row) {
const targetArgs = selected.row ? selected.args : actived.args
if (hasShiftKey) {
- if (keyboardConfig.enterToTab) {
+ if (keyboardOpts.enterToTab) {
this.moveTabSelected(targetArgs, hasShiftKey, evnt)
} else {
this.moveSelected(targetArgs, isLeftArrow, true, isRightArrow, false, evnt)
}
} else {
- if (keyboardConfig.enterToTab) {
+ if (keyboardOpts.enterToTab) {
this.moveTabSelected(targetArgs, hasShiftKey, evnt)
} else {
this.moveSelected(targetArgs, isLeftArrow, false, isRightArrow, true, evnt)
@@ -1988,7 +1988,7 @@ const Methods = {
}
}
}
- } else if (operArrow && keyboardConfig.isArrow) {
+ } else if (operArrow && keyboardConfig && keyboardOpts.isArrow) {
if (!isEditStatus) {
// 如果按下了方向键
if (selected.row && selected.column) {
@@ -1998,22 +1998,22 @@ const Methods = {
this.moveCurrentRow(isUpArrow, isDwArrow, evnt)
}
}
- } else if (isTab && keyboardConfig.isTab) {
+ } else if (isTab && keyboardConfig && keyboardOpts.isTab) {
// 如果按下了 Tab 键切换
if (selected.row || selected.column) {
this.moveTabSelected(selected.args, hasShiftKey, evnt)
} else if (actived.row || actived.column) {
this.moveTabSelected(actived.args, hasShiftKey, evnt)
}
- } else if (isDel || (treeConfig && highlightCurrentRow && currentRow ? isBack && keyboardConfig.isArrow : isBack)) {
+ } else if (keyboardConfig && (isDel || (treeConfig && highlightCurrentRow && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
if (!isEditStatus) {
// 如果是删除键
- if (keyboardConfig.isDel && (selected.row || selected.column)) {
+ if (keyboardOpts.isDel && (selected.row || selected.column)) {
setCellValue(selected.row, selected.column, null)
if (isBack) {
this.handleActived(selected.args, evnt)
}
- } else if (isBack && keyboardConfig.isArrow && treeConfig && highlightCurrentRow && currentRow) {
+ } else if (isBack && keyboardOpts.isArrow && treeConfig && highlightCurrentRow && currentRow) {
// 如果树形表格回退键关闭当前行返回父节点
const { parent: parentRow } = XEUtils.findTree(this.afterFullData, item => item === currentRow, treeOpts)
if (parentRow) {
@@ -2025,14 +2025,14 @@ const Methods = {
}
}
}
- } else if (keyboardConfig.isEdit && !hasCtrlKey && !hasMetaKey && (isSpacebar || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
+ } else if (keyboardConfig && keyboardOpts.isEdit && !hasCtrlKey && !hasMetaKey && (isSpacebar || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
// 启用编辑后，空格键功能将失效
// if (isSpacebar) {
// evnt.preventDefault()
// }
// 如果是按下非功能键之外允许直接编辑
if (selected.column && selected.row && selected.column.editRender) {
- if (!keyboardConfig.editMethod || !(keyboardConfig.editMethod(selected.args) === false)) {
+ if (!keyboardOpts.editMethod || !(keyboardOpts.editMethod(selected.args) === false)) {
if (!editOpts.activeMethod || editOpts.activeMethod(selected.args)) {
setCellValue(selected.row, selected.column, null)
this.handleActived(selected.args, evnt)
@@ -2045,11 +2045,11 @@ const Methods = {
}
},
handleGlobalPasteEvent (evnt) {
- const { isActivated, keyboardConfig, mouseConfig, mouseOpts, editStore } = this
+ const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore } = this
const { actived } = editStore
if (isActivated) {
if (!(actived.row || actived.column)) {
- if (keyboardConfig && keyboardConfig.isClip && mouseConfig && mouseOpts.area && this.handlePasteCellAreaEvent) {
+ if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handlePasteCellAreaEvent) {
this.handlePasteCellAreaEvent(evnt)
}
}
@@ -2057,11 +2057,11 @@ const Methods = {
}
},
handleGlobalCopyEvent (evnt) {
- const { isActivated, keyboardConfig, mouseConfig, mouseOpts, editStore } = this
+ const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore } = this
const { actived } = editStore
if (isActivated) {
if (!(actived.row || actived.column)) {
- if (keyboardConfig && keyboardConfig.isClip && mouseConfig && mouseOpts.area && this.handleCopyCellAreaEvent) {
+ if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handleCopyCellAreaEvent) {
this.handleCopyCellAreaEvent(evnt)
}
}
@@ -2069,11 +2069,11 @@ const Methods = {
}
},
handleGlobalCutEvent (evnt) {
- const { isActivated, keyboardConfig, mouseConfig, mouseOpts, editStore } = this
+ const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore } = this
const { actived } = editStore
if (isActivated) {
if (!(actived.row || actived.column)) {
- if (keyboardConfig && keyboardConfig.isClip && mouseConfig && mouseOpts.area && this.handleCutCellAreaEvent) {
+ if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && this.handleCutCellAreaEvent) {
this.handleCutCellAreaEvent(evnt)
}
}
diff --git a/styles/pager.scss b/styles/pager.scss
index 5359ad88a..2e4110288 100644
--- a/styles/pager.scss
+++ b/styles/pager.scss
@@ -37,7 +37,20 @@
.vxe-pager--num-btn,
.vxe-pager--jump-prev,
.vxe-pager--jump-next {
+ color: inherit;
+ outline: 0;
border: 1px solid transparent;
+ &:not(.is--disabled) {
+ &:focus {
+ box-shadow: 0 0 0.25em 0 $vxe-primary-color;
+ }
+ &:hover {
+ color: lighten($vxe-primary-color, 6%);
+ }
+ &:active {
+ background-color: darken($vxe-button-default-background-color, 3%);
+ }
+ }
}
&.is--border,
&.is--perfect {
@@ -54,24 +67,27 @@
&.is--background,
&.is--perfect {
.vxe-pager--prev-btn,
- .vxe-pager--next-btn {
- background-color: #f4f4f5;
+ .vxe-pager--next-btn,
+ .vxe-pager--jump-prev,
+ .vxe-pager--num-btn,
+ .vxe-pager--jump-next {
+ background-color: $vxe-pager-perfect-button-background-color;
}
.vxe-pager--jump-prev,
.vxe-pager--num-btn,
.vxe-pager--jump-next {
- background-color: #f4f4f5;
&:not(.is--disabled) {
- &:hover {
- color: $vxe-primary-color;
- }
&.is--active {
color: #fff;
background-color: $vxe-primary-color;
&:hover {
background-color: lighten($vxe-primary-color, 6%);
}
+ &:focus {
+ border-color: $vxe-primary-color;
+ }
&:active {
+ border-color: darken($vxe-primary-color, 3%);
background-color: darken($vxe-primary-color, 3%);
}
}
@@ -157,7 +173,6 @@
min-width: 2.15em;
}
.vxe-pager--btn-wrapper {
- list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
diff --git a/styles/variable.scss b/styles/variable.scss
index 076a932b2..340c79701 100644
--- a/styles/variable.scss
+++ b/styles/variable.scss
@@ -124,6 +124,7 @@ $vxe-tooltip-validate-error-background-color: #f56c6c;
/*pager*/
$vxe-pager-background-color: #fff;
+$vxe-pager-perfect-button-background-color: #f4f4f5;
/*modal*/
$vxe-modal-header-background-color: #F8F8F8;