alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: migrate Tab component

Browse Source
This commit is contained in:
chenjiahan
2020-07-26 15:29:52 +08:00
parent 4ad0c396ef
commit d2291f3710
10 changed files with 97 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/tab/README.md
+9 -9
View File
@@ -14,10 +14,10 @@ Vue.use(Tabs);
### Basic Usage
The first tab is actived by default, you can set `v-model` to active specified tab.
The first tab is actived by default, you can set `v-model:active` to active specified tab.
```html
<van-tabs v-model="active">
<van-tabs v-model:active="active">
<van-tab v-for="index in 4" :title="'tab' + index">
content of tab {{ index }}
</van-tab>
@@ -37,7 +37,7 @@ export default {
### Match By Name
```html
<van-tabs v-model="activeName">
<van-tabs v-model:active="activeName">
<van-tab title="tab 1" name="a">content of tab 1</van-tab>
<van-tab title="tab 2" name="b">content of tab 2</van-tab>
<van-tab title="tab 3" name="c">content of tab 3</van-tab>
@@ -129,7 +129,7 @@ export default {
In sticky mode, the tab will be fixed to top when scroll to top.
```html
<van-tabs v-model="active" sticky>
<van-tabs v-model:active="active" sticky>
<van-tab v-for="index in 4" :title="'tab ' + index">
content {{ index }}
</van-tab>
@@ -141,7 +141,7 @@ In sticky mode, the tab will be fixed to top when scroll to top.
Use title slot to custom tab title.
```html
<van-tabs v-model="active">
<van-tabs v-model:active="active">
<van-tab v-for="index in 2" :key="index">
<template #title> <van-icon name="more-o" />tab </template>
content {{ index }}
@@ -154,7 +154,7 @@ Use title slot to custom tab title.
Use `animated` props to change tabs with animation.
```html
<van-tabs v-model="active" animated>
<van-tabs v-model:active="active" animated>
<van-tab v-for="index in 4" :title="'tab ' + index">
content {{ index }}
</van-tab>
@@ -166,7 +166,7 @@ Use `animated` props to change tabs with animation.
In swipeable mode, you can switch tabs with swipe gestrue in the content.
```html
<van-tabs v-model="active" swipeable>
<van-tabs v-model:active="active" swipeable>
<van-tab v-for="index in 4" :title="'tab ' + index">
content {{ index }}
</van-tab>
@@ -178,7 +178,7 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content.
In scrollspy mode, the list of content will be tiled.
```html
<van-tabs v-model="active" scrollspy sticky>
<van-tabs v-model:active="active" scrollspy sticky>
<van-tab v-for="index in 8" :title="'tab ' + index">
content {{ index }}
</van-tab>
@@ -219,7 +219,7 @@ export default {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Index of active tab | _number \| string_ | `0` |
| v-model:active | Index of active tab | _number \| string_ | `0` |
| type | Can be set to `line` `card` | _string_ | `line` |
| color | Tab color | _string_ | `#ee0a24` |
| background | Background color | _string_ | `white` |
src/tab/README.zh-CN.md
+10 -10
View File
@@ -14,10 +14,10 @@ Vue.use(Tabs);
### 基础用法
通过 `v-model` 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。
通过 `v-model:active` 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。
```html
<van-tabs v-model="active">
<van-tabs v-model:active="active">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
@@ -37,10 +37,10 @@ export default {
### 通过名称匹配
在标签指定 `name` 属性的情况下，`v-model` 的值为当前标签的 `name`（此时无法通过索引值来匹配标签）。
在标签指定 `name` 属性的情况下，`v-model:active` 的值为当前标签的 `name`（此时无法通过索引值来匹配标签）。
```html
<van-tabs v-model="activeName">
<van-tabs v-model:active="activeName">
<van-tab title="标签 1" name="a">内容 1</van-tab>
<van-tab title="标签 2" name="b">内容 2</van-tab>
<van-tab title="标签 3" name="c">内容 3</van-tab>
@@ -133,7 +133,7 @@ export default {
通过 `sticky` 属性可以开启粘性布局，粘性布局下，标签页滚动到顶部时会自动吸顶。
```html
<van-tabs v-model="active" sticky>
<van-tabs v-model:active="active" sticky>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
@@ -145,7 +145,7 @@ export default {
通过 `title` 插槽可以自定义标签内容。
```html
<van-tabs v-model="active">
<van-tabs v-model:active="active">
<van-tab v-for="index in 2" :key="index">
<template #title> <van-icon name="more-o" />选项 </template>
内容 {{ index }}
@@ -158,7 +158,7 @@ export default {
通过 `animated` 属性可以开启切换标签内容时的转场动画。
```html
<van-tabs v-model="active" animated>
<van-tabs v-model:active="active" animated>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
@@ -170,7 +170,7 @@ export default {
通过 `swipeable` 属性可以开启滑动切换标签页。
```html
<van-tabs v-model="active" swipeable>
<van-tabs v-model:active="active" swipeable>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
@@ -182,7 +182,7 @@ export default {
通过 `scrollspy` 属性可以开启滚动导航模式，该模式下，内容将会平铺展示。
```html
<van-tabs v-model="active" scrollspy sticky>
<van-tabs v-model:active="active" scrollspy sticky>
<van-tab v-for="index in 8" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
@@ -226,7 +226,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 绑定当前选中标签的标识符 | _number \| string_ | `0` |
| v-model:active | 绑定当前选中标签的标识符 | _number \| string_ | `0` |
| type | 样式风格类型，可选值为`card` | _string_ | `line` |
| color | 标签主题色 | _string_ | `#ee0a24` |
| background | 标签栏背景色 | _string_ | `white` |
src/tab/demo/index.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<demo-section>
<demo-block :title="t('basicUsage')">
<van-tabs v-model="active">
<van-tabs v-model:active="active">
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
{{ t('content') }} {{ index }}
</van-tab>
@@ -9,7 +9,7 @@
</demo-block>
<demo-block :title="t('matchByName')">
<van-tabs v-model="activeName">
<van-tabs v-model:active="activeName">
<van-tab name="a" :title="t('tab') + 1"> {{ t('content') }} 1 </van-tab>
<van-tab name="b" :title="t('tab') + 2"> {{ t('content') }} 2 </van-tab>
<van-tab name="c" :title="t('tab') + 3"> {{ t('content') }} 3 </van-tab>
src/tab/index.js
+3 -3
View File
@@ -53,11 +53,11 @@ export default createComponent({
},
},
render(h) {
const { slots, parent, isActive } = this;
render() {
const { parent, isActive } = this;
const shouldRender = this.inited || parent.scrollspy || !parent.lazyRender;
const show = parent.scrollspy || isActive;
const Content = shouldRender ? slots() : h();
const Content = shouldRender ? this.$slots.default?.() : null;
if (parent.animated) {
return (