From 5f7362f91861d844ff3f9a8d49701944d43d5e5a Mon Sep 17 00:00:00 2001 From: Guan9 Date: Tue, 14 Dec 2021 20:00:17 +0800 Subject: [PATCH] Tabs: v-model/tab-pane name support number type --- examples/docs/en-US/tabs.md | 6 +++--- examples/docs/es/tabs.md | 4 ++-- examples/docs/fr-FR/tabs.md | 4 ++-- examples/docs/zh-CN/tabs.md | 4 ++-- packages/tabs/src/tab-bar.vue | 2 +- packages/tabs/src/tab-nav.vue | 4 ++-- packages/tabs/src/tab-pane.vue | 10 +++++----- packages/tabs/src/tabs.vue | 6 +++--- types/tab-pane.d.ts | 2 +- types/tabs.d.ts | 4 ++-- 10 files changed, 23 insertions(+), 23 deletions(-) diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md index 6a3b07f67..07bca2809 100644 --- a/examples/docs/en-US/tabs.md +++ b/examples/docs/en-US/tabs.md @@ -278,7 +278,7 @@ Only card type Tabs support addable & closeable. ### Tabs Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------- |---------- |------------- |-------- | -| value / v-model | binding value, name of the selected tab | string | — | name of first tab | +| value / v-model | binding value, name of the selected tab | string/number | — | name of first tab | | type | type of Tab | string | card/border-card | — | | closable | whether Tab is closable | boolean | — | false | | addable | whether Tab is addable | boolean | — | false | @@ -300,6 +300,6 @@ Only card type Tabs support addable & closeable. |---------- |-------- |---------- |------------- |-------- | | label | title of the tab | string | — | — | | disabled | whether Tab is disabled | boolean | — | false | -| name | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' | +| name | identifier corresponding to the name of Tabs, representing the alias of the tab-pane | string/number | — | ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '1' | | closable | whether Tab is closable | boolean | — | false | -| lazy | whether Tab is lazily rendered | boolean | — | false | \ No newline at end of file +| lazy | whether Tab is lazily rendered | boolean | — | false | diff --git a/examples/docs/es/tabs.md b/examples/docs/es/tabs.md index 88d4a7765..f72a853c2 100644 --- a/examples/docs/es/tabs.md +++ b/examples/docs/es/tabs.md @@ -278,7 +278,7 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre. ### Atributos de Pestañas | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | -------------- | ------------------------------------ | ------- | --------------------- | --------------------------- | -| value / v-model | valor enlazado, nombre de la pestaña seleccionada | string | — | nombre de la primer pestaña | +| value / v-model | valor enlazado, nombre de la pestaña seleccionada | string/number | — | nombre de la primer pestaña | | type | tipo de Pestaña | string | card/border-card | — | | closable | si la Pestaña es cerrable | boolean | — | false | | addable | si la Pestaña es añadible | boolean | — | false | @@ -300,6 +300,6 @@ Solo las pestañas de tipo tarjeta soportan adición y cierre. | -------- | ------------------------------------------------------------ | ------- | ----------------- | ------------------------------------------------------------ | | label | título de la pestaña | string | — | — | | disabled | si la Tabulación está deshabilitada | boolean | — | false | -| name | identificador correspondiente al value de la Tabulación, representando el alias del tab-pane | string | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' | +| name | identificador correspondiente al value de la Tabulación, representando el alias del tab-pane | string/number | — | número ordinal del tab-pane en la secuencia, p.ej el primer tab-pane de pestañas es '1' | | closable | si el Tab es cerrable | boolean | — | false | | lazy | si Tab es renderizado con `lazy-load` | boolean | — | false | diff --git a/examples/docs/fr-FR/tabs.md b/examples/docs/fr-FR/tabs.md index 25477ec81..32b3a253e 100644 --- a/examples/docs/fr-FR/tabs.md +++ b/examples/docs/fr-FR/tabs.md @@ -279,7 +279,7 @@ Seuls les onglets de type carte supportent l'ajout et la suppression. | Attribut | Description | Type | Valeurs acceptées | Défaut | |---------- |-------- |---------- |------------- |-------- | -| value / v-model | La valeur liée, nom de l'onglet sélectionné. | string | — | Nom du premier onglet. | +| value / v-model | La valeur liée, nom de l'onglet sélectionné. | string/number | — | Nom du premier onglet. | | type | Type de l'onglet. | string | card/border-card | — | | closable | Si des onglets peuvent être supprimés. | boolean | — | false | | addable | Si des onglets peuvent être ajoutés. | boolean | — | false | @@ -303,6 +303,6 @@ Seuls les onglets de type carte supportent l'ajout et la suppression. |---------- |-------- |---------- |------------- |-------- | | label | Titre de l'onglet. | string | — | — | | disabled | Si l'onglet est désactivé. | boolean | — | false | -| name | Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. | +| name | Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif. | string/number | — | Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'. | | closable | Si l'onglet est supprimable. | boolean | — | false | | lazy | Si le contenu de l'onglet bénéficie du lazy-loading. | boolean | — | false | diff --git a/examples/docs/zh-CN/tabs.md b/examples/docs/zh-CN/tabs.md index 4d9074140..9bf0f5345 100644 --- a/examples/docs/zh-CN/tabs.md +++ b/examples/docs/zh-CN/tabs.md @@ -276,7 +276,7 @@ ### Tabs Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | -| value / v-model | 绑定值，选中选项卡的 name | string | — | 第一个选项卡的 name | +| value / v-model | 绑定值，选中选项卡的 name | string/number | — | 第一个选项卡的 name | | type | 风格类型 | string | card/border-card | — | | closable | 标签是否可关闭 | boolean | — | false | | addable | 标签是否可增加 | boolean | — | false | @@ -298,6 +298,6 @@ |---------- |-------- |---------- |------------- |-------- | | label | 选项卡标题 | string | — | — | | disabled | 是否禁用 | boolean | — | false | -| name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' | +| name | 与选项卡绑定值 value 对应的标识符，表示选项卡别名 | string/number | — | 该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1' | | closable | 标签是否可关闭 | boolean | — | false | | lazy | 标签是否延迟渲染 | boolean | — | false | diff --git a/packages/tabs/src/tab-bar.vue b/packages/tabs/src/tab-bar.vue index 39a106e7e..3ef87a80f 100644 --- a/packages/tabs/src/tab-bar.vue +++ b/packages/tabs/src/tab-bar.vue @@ -24,7 +24,7 @@ return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase()); }; this.tabs.every((tab, index) => { - let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName); + let $el = arrayFind(this.$parent.$refs.tabs || [], t => t.id.replace('tab-', '') === tab.paneName.toString()); if (!$el) { return false; } if (!tab.active) { diff --git a/packages/tabs/src/tab-nav.vue b/packages/tabs/src/tab-nav.vue index 19096f281..2e787e1cc 100644 --- a/packages/tabs/src/tab-nav.vue +++ b/packages/tabs/src/tab-nav.vue @@ -18,7 +18,7 @@ props: { panes: Array, - currentName: String, + currentName: [String, Number], editable: Boolean, onTabClick: { type: Function, @@ -216,7 +216,7 @@ ] : null; const tabs = this._l(panes, (pane, index) => { - let tabName = pane.name || pane.index || index; + let tabName = pane.name === 0 ? 0 : pane.name || pane.index || index; const closable = pane.isClosable || editable; pane.index = `${index}`; diff --git a/packages/tabs/src/tab-pane.vue b/packages/tabs/src/tab-pane.vue index 2e3ed7528..951c59659 100644 --- a/packages/tabs/src/tab-pane.vue +++ b/packages/tabs/src/tab-pane.vue @@ -20,7 +20,7 @@ props: { label: String, labelContent: Function, - name: String, + name: [String, Number], closable: Boolean, disabled: Boolean, lazy: Boolean @@ -37,15 +37,15 @@ isClosable() { return this.closable || this.$parent.closable; }, + paneName() { + return this.name === 0 ? 0 : this.name || this.index; + }, active() { - const active = this.$parent.currentName === (this.name || this.index); + const active = this.$parent.currentName === this.paneName; if (active) { this.loaded = true; } return active; - }, - paneName() { - return this.name || this.index; } }, diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue index 6d1b09329..568bd8a09 100644 --- a/packages/tabs/src/tabs.vue +++ b/packages/tabs/src/tabs.vue @@ -10,7 +10,7 @@ props: { type: String, - activeName: String, + activeName: [String, Number], closable: Boolean, addable: Boolean, value: {}, @@ -31,7 +31,7 @@ data() { return { - currentName: this.value || this.activeName, + currentName: this.value === 0 ? 0 : this.value || this.activeName, panes: [] }; }, @@ -173,7 +173,7 @@ }, created() { - if (!this.currentName) { + if (this.currentName !== 0 && !this.currentName) { this.setCurrentName('0'); } diff --git a/types/tab-pane.d.ts b/types/tab-pane.d.ts index b4f69990f..b6d1e26f8 100644 --- a/types/tab-pane.d.ts +++ b/types/tab-pane.d.ts @@ -9,7 +9,7 @@ export declare class ElTabPane extends ElementUIComponent { disabled: boolean /** Identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane */ - name: string + name: string | number /** Whether Tab is closable */ closable: boolean diff --git a/types/tabs.d.ts b/types/tabs.d.ts index fee7c1a8a..c49cd2f51 100644 --- a/types/tabs.d.ts +++ b/types/tabs.d.ts @@ -18,7 +18,7 @@ export declare class ElTabs extends ElementUIComponent { editable: boolean /** Name of the selected tab */ - value: string + value: string | number /** Position of tabs */ tabPosition: TabPosition @@ -27,5 +27,5 @@ export declare class ElTabs extends ElementUIComponent { stretch: Boolean /** Hook function before switching tab. If false or a Promise is returned and then is rejected, switching will be prevented */ - beforeLeave: (activeName: string, oldActiveName: string) => boolean | Promise + beforeLeave: (activeName: string | number, oldActiveName: string | number) => boolean | Promise }