ant-design-vue/components/vc-tabs/src/Sentinel.jsx
2019-01-12 12:46:29 +08:00

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>
);
},
};