diff --git a/docs/demos/views/tab.vue b/docs/demos/views/tab.vue index 9585a7efc..63b120025 100644 --- a/docs/demos/views/tab.vue +++ b/docs/demos/views/tab.vue @@ -47,6 +47,17 @@ + + + + + + {{ $t('tab') }} + + {{ $t('content') }} {{ index }} + + + @@ -59,7 +70,8 @@ export default { title3: '禁用标签', title4: '样式风格', title5: '点击事件', - title6: '粘性布局' + title6: '粘性布局', + title7: '自定义标签' }, 'en-US': { tab: 'Tab ', @@ -68,7 +80,8 @@ export default { title3: 'Disabled Tab', title4: 'Card Style', title5: 'Click Event', - title6: 'Sticky' + title6: 'Sticky', + title7: 'Custom Tab' } }, @@ -79,12 +92,6 @@ export default { }; }, - mounted() { - setTimeout(() => { - this.active = 3; - }, 1000); - }, - methods: { onClickDisabled() { Toast('Disabled!'); @@ -101,6 +108,11 @@ export default { .demo-tab { margin-bottom: 700px; + .van-tab .van-icon { + margin-right: 5px; + vertical-align: -2px; + } + .van-tab__pane { background-color: #fff; padding: 20px; diff --git a/docs/markdown/en-US/tab.md b/docs/markdown/en-US/tab.md index 5958eb59a..dbacb5bd5 100644 --- a/docs/markdown/en-US/tab.md +++ b/docs/markdown/en-US/tab.md @@ -105,8 +105,22 @@ In sticky mode, the tab will be fixed to top when scroll to top ```html - - 内容 {{ index }} + + content {{ index }} + + +``` + +#### Custom title +Use title slot to custom tab title + +```html + + + + tab + + content {{ index }} ``` @@ -127,6 +141,13 @@ In sticky mode, the tab will be fixed to top when scroll to top | title | Tab title | `String` | - | - | | disabled | Whether disabled current tab | `Boolean` | `false` | - | +### Tab Slot + +| name | Description | +|-----------|-----------| +| - | Content | +| title | Custom tab | + ### Tabs Event | Event | Description | Arguments | diff --git a/docs/markdown/zh-CN/tab.md b/docs/markdown/zh-CN/tab.md index bd154372c..b02118591 100644 --- a/docs/markdown/zh-CN/tab.md +++ b/docs/markdown/zh-CN/tab.md @@ -111,6 +111,20 @@ export default { ``` +#### 自定义标签 +通过 title slot 可以自定义标签内容 + +```html + + + + 选项 + + 内容 {{ index }} + + +``` + ### Tabs API | 参数 | 说明 | 类型 | 默认值 | 可选 | @@ -128,6 +142,13 @@ export default { | title | tab的标题 | `String` | - | - | | disabled | 是否禁用这个tab | `Boolean` | `false` | - | +### Tab Slot + +| 名称 | 说明 | +|-----------|-----------| +| - | 标签页内容 | +| title | 自定义标签 | + ### Tabs Event | 事件名 | 说明 | 参数 | diff --git a/packages/tab/index.vue b/packages/tab/index.vue index 92887be1a..0902398d7 100644 --- a/packages/tab/index.vue +++ b/packages/tab/index.vue @@ -14,10 +14,7 @@ export default create({ mixins: [findParent], props: { - title: { - type: String, - required: true - }, + title: String, disabled: Boolean }, diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue index ecf715702..11eb46034 100644 --- a/packages/tabs/index.vue +++ b/packages/tabs/index.vue @@ -1,5 +1,5 @@ - + - {{ tab.title }} + + {{ tab.title }} @@ -35,11 +36,16 @@ import { create } from '../utils'; import { raf } from '../utils/raf'; import { on, off } from '../utils/event'; +import VanNode from '../utils/node'; import scrollUtils from '../utils/scroll'; export default create({ name: 'van-tabs', + components: { + VanNode + }, + props: { sticky: Boolean, active: { @@ -69,6 +75,13 @@ export default create({ }; }, + computed: { + // whether the nav is scrollable + scrollable() { + return this.tabs.length > this.swipeThreshold; + } + }, + watch: { active(val) { this.correctActive(val); @@ -113,13 +126,6 @@ export default create({ } }, - computed: { - // whether the nav is scrollable - scrollable() { - return this.tabs.length > this.swipeThreshold; - } - }, - methods: { // whether to bind sticky listener scrollHandler(init) { diff --git a/packages/utils/node.js b/packages/utils/node.js new file mode 100644 index 000000000..929c056ce --- /dev/null +++ b/packages/utils/node.js @@ -0,0 +1,10 @@ +export default { + name: 'van-node', + functional: true, + props: { + node: Array + }, + render(h, ctx) { + return ctx.props.node; + } +};