test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-04 12:17:37 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(tabs): optimize code

Browse Source
This commit is contained in:
bastarder 2020-08-21 21:10:19 +08:00 committed by jeremywu
parent a2f03be92a
commit 72daa4359d
4 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tabs/src/tab-bar.vue
View File

@ -24,7 +24,7 @@ export default defineComponent({
const instance = getCurrentInstance() const instance = getCurrentInstance()
const getBarStyle = () => { const getBarStyle = () => {
let style: CSSStyleDeclaration = {} as CSSStyleDeclaration let style = {} as CSSStyleDeclaration
let offset = 0 let offset = 0
let tabSize = 0 let tabSize = 0

24
packages/tabs/src/tab-nav.vue
View File

@ -1,6 +1,8 @@
<script lang='ts'> <script lang='ts'>
import { h, defineComponent, ref, inject, computed, onUpdated, onMounted, onBeforeUnmount } from 'vue' import { h, defineComponent, ref, inject, computed, onUpdated, onMounted, onBeforeUnmount } from 'vue'
import { addResizeListener, removeResizeListener } from '@element-plus/utils/resize-event' import { addResizeListener, removeResizeListener } from '@element-plus/utils/resize-event'
import { eventKeys } from '@element-plus/utils/aria'
import { on, off } from '@element-plus/utils/dom'
import TabBar from './tab-bar.vue' import TabBar from './tab-bar.vue'
import { NOOP, capitalize } from '@vue/shared' import { NOOP, capitalize } from '@vue/shared'
@ -22,11 +24,11 @@ export default defineComponent({
}, },
editable: Boolean, editable: Boolean,
onTabClick: { onTabClick: {
type: Function, type: Function as PropType<(tab: ComponentInternalInstance, tabName: string, ev: Event) => void>,
default: NOOP, default: NOOP,
}, },
onTabRemove: { onTabRemove: {
type: Function, type: Function as PropType<(tab: ComponentInternalInstance, ev: Event) => void>,
default: NOOP, default: NOOP,
}, },
type: { type: {
@ -147,13 +149,15 @@ export default defineComponent({
const keyCode = e.keyCode const keyCode = e.keyCode
let nextIndex let nextIndex
let currentIndex, tabList let currentIndex, tabList
if ([37, 38, 39, 40].indexOf(keyCode) !== -1) { // 左右上下键更换tab
const { up, down, left, right } = eventKeys
if ([up, down, left, right].indexOf(keyCode) !== -1) { // 左右上下键更换tab
tabList = e.currentTarget.querySelectorAll('[role=tab]') tabList = e.currentTarget.querySelectorAll('[role=tab]')
currentIndex = Array.prototype.indexOf.call(tabList, e.target) currentIndex = Array.prototype.indexOf.call(tabList, e.target)
} else { } else {
return return
} }
if (keyCode === 37 || keyCode === 38) { // left if (keyCode === left || keyCode === up) { // left
if (currentIndex === 0) { // first if (currentIndex === 0) { // first
nextIndex = tabList.length - 1 nextIndex = tabList.length - 1
} else { } else {
@ -208,9 +212,9 @@ export default defineComponent({
onMounted(() => { onMounted(() => {
addResizeListener(el$.value, update) addResizeListener(el$.value, update)
document.addEventListener('visibilitychange', visibilityChangeHandler) on(document, 'visibilitychange', visibilityChangeHandler)
window.addEventListener('blur', windowBlurHandler) on(window, 'blur', windowBlurHandler)
window.addEventListener('focus', windowFocusHandler) on(window, 'focus', windowFocusHandler)
setTimeout(() => { setTimeout(() => {
scrollToActiveTab() scrollToActiveTab()
}, 0) }, 0)
@ -220,9 +224,9 @@ export default defineComponent({
if(el$.value) { if(el$.value) {
removeResizeListener(el$.value, update) removeResizeListener(el$.value, update)
} }
document.removeEventListener('visibilitychange', visibilityChangeHandler) off(document, 'visibilitychange', visibilityChangeHandler)
window.removeEventListener('blur', windowBlurHandler) off(window, 'blur', windowBlurHandler)
window.removeEventListener('focus', windowFocusHandler) off(window, 'focus', windowFocusHandler)
}) })
return { return {

4
packages/tabs/src/tab-pane.vue
View File

@ -20,10 +20,6 @@ export default defineComponent({
type: String, type: String,
default: '', default: '',
}, },
labelContent: {
type: Function,
default: null,
},
name: { name: {
type: String, type: String,
default: '', default: '',

7
packages/tabs/src/tabs.vue
View File

@ -29,7 +29,7 @@ export default defineComponent({
default: 'top', default: 'top',
}, },
beforeLeave: { beforeLeave: {
type: Function, type: Function as PropType<(newTabName: string, oldTabName: string) => void>,
default: null, default: null,
}, },
stretch: Boolean, stretch: Boolean,
@ -61,7 +61,8 @@ export default defineComponent({
}) })
const getPaneInstanceFromSlot = (vnode, paneInstanceList = []) => { const getPaneInstanceFromSlot = (vnode, paneInstanceList = []) => {
[...(vnode.children || [])].forEach(node => {
Array.from(vnode.children || []).forEach(node => {
let type = node.type let type = node.type
type = type.name || type type = type.name || type
if (type === 'ElTabPane' && node.component) { if (type === 'ElTabPane' && node.component) {
@ -77,7 +78,7 @@ export default defineComponent({
if(ctx.slots.default) { if(ctx.slots.default) {
const children = instance.subTree.children const children = instance.subTree.children
const content = [...children].find(({ props }) => { const content = Array.from(children).find(({ props }) => {
return props.class === 'el-tabs__content' return props.class === 'el-tabs__content'
}) })