mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-04 21:18:14 +08:00
51 lines
1.1 KiB
Vue
51 lines
1.1 KiB
Vue
import PropTypes from '../../_util/vue-types';
|
|
import KeyCode from '../../_util/KeyCode';
|
|
|
|
const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', position: 'absolute' };
|
|
export default {
|
|
name: 'Sentinel',
|
|
props: {
|
|
setRef: PropTypes.func,
|
|
prevElement: PropTypes.any,
|
|
nextElement: PropTypes.any,
|
|
},
|
|
methods: {
|
|
onKeyDown({ target, which, shiftKey }) {
|
|
const { nextElement, prevElement } = this.$props;
|
|
if (which !== KeyCode.TAB || document.activeElement !== target) return;
|
|
|
|
// Tab next
|
|
if (!shiftKey && nextElement) {
|
|
nextElement.focus();
|
|
}
|
|
|
|
// Tab prev
|
|
if (shiftKey && prevElement) {
|
|
prevElement.focus();
|
|
}
|
|
},
|
|
},
|
|
render() {
|
|
const { setRef } = this.$props;
|
|
|
|
return (
|
|
<div
|
|
tabIndex={0}
|
|
{...{
|
|
directives: [
|
|
{
|
|
name: 'ant-ref',
|
|
value: setRef,
|
|
},
|
|
],
|
|
}}
|
|
style={sentinelStyle}
|
|
onKeydown={this.onKeyDown}
|
|
role="presentation"
|
|
>
|
|
{this.$slots.default}
|
|
</div>
|
|
);
|
|
},
|
|
};
|