blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

done

Browse Source
This commit is contained in:
zhuxiang 2017-03-07 16:40:06 +08:00
parent fdf2868cc7
commit 14110f6c90
4 changed files with 113 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
docs/examples-docs/tab.md
View File

@ -2,25 +2,90 @@
### 基础用法 ### 基础用法
:::demo 基础用法
```html ```html
<zan-tabs> <zan-tabs>
<zan-tab tab-key="0" title="选项一">内容一</zan-tab> <zan-tab title="选项一">内容一</zan-tab>
<zan-tab tab-key="1" title="选项二">内容二</zan-tab> <zan-tab title="选项二">内容二</zan-tab>
<zan-tab tab-key="2" title="选项三">内容三</zan-tab> <zan-tab title="选项三">内容三</zan-tab>
<zan-tab tab-key="3" title="选项四">内容四</zan-tab> <zan-tab title="选项四">内容四</zan-tab>
<zan-tab tab-key="4" title="选项五">内容五</zan-tab> <zan-tab title="选项五">内容五</zan-tab>
</zan-tabs> </zan-tabs>
``` ```
### 自定义样式用法 <script>
export default {
methods: {
popalert() {
alert('haha')
}
}
};
</script>
:::
### 禁用用法
:::demo 禁用用法
```html ```html
<zan-tabs active-tab-key="2" tabs-class-name="custom-tabwrap" tab-class-name="custom-tab"> <zan-tabs>
<zan-tab tab-key="0" title="选项一" tab-pane-class-name="custom-pane">内容一</zan-tab> <zan-tab title="选项一">内容一</zan-tab>
<zan-tab tab-key="1" title="选项二" tab-pane-class-name="custom-pane">内容二</zan-tab> <zan-tab disable title="选项二" @ondisable="popalert">内容二</zan-tab>
<zan-tab tab-key="2" title="选项三" tab-pane-class-name="custom-pane">内容三</zan-tab> <zan-tab title="选项三">内容三</zan-tab>
<zan-tab tab-key="3" title="选项四" tab-pane-class-name="custom-pane">内容四</zan-tab> <zan-tab title="选项四">内容四</zan-tab>
<zan-tab tab-key="4" title="选项五" tab-pane-class-name="custom-pane">内容五</zan-tab> <zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
<script>
export default {
methods: {
popalert() {
alert('haha')
}
}
};
</script>
```
:::
### card样式用法
:::demo card样式用法
```html
<zan-tabs classtype="card">
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>
<zan-tab title="选项三">内容三</zan-tab>
<zan-tab title="选项四">内容四</zan-tab>
<zan-tab title="选项五">内容五</zan-tab>
</zan-tabs>
```
:::
<style>
.page-tab {
padding: 0 15px;
}
.custom-tabwrap .zan-tab-active{
color: #20a0ff;
}
.custom-tabwrap .zan-tabs-nav-bar{
background: #20a0ff;
}
.custom-tab {
font-weight: bold;
}
.custom-pane {
text-align: center;
height: 50px;
line-height: 50px;
}
</style>
### 自定义样式用法
:::demo 自定义样式用法
```html
<zan-tabs active="2" classname="custom-tabwrap">
<zan-tab title="选项一" paneclass="custom-pane">内容一</zan-tab>
<zan-tab title="选项二" paneclass="custom-pane">内容二</zan-tab>
<zan-tab title="选项三" paneclass="custom-pane">内容三</zan-tab>
<zan-tab title="选项四" paneclass="custom-pane">内容四</zan-tab>
<zan-tab title="选项五" paneclass="custom-pane">内容五</zan-tab>
</zan-tabs> </zan-tabs>
<style> <style>
.page-tab { .page-tab {
@ -42,19 +107,21 @@
} }
</style> </style>
``` ```
:::
### zan-tabs API ### zan-tabs API
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | | | classtype | 两种UI | string | line | card |
| active | 默认激活的tab | string || number | 0 | |
| classname | tabs自定义classname | string | '' | |
### z-badge API ### zan-tab API
| 参数 | 说明 | 类型 | 默认值 | 必须 | | 参数 | 说明 | 类型 | 默认值 | 必须 |
|-----------|-----------|-----------|-------------|-------------| |-----------|-----------|-----------|-------------|-------------|
| mark | badge的唯一key值 | string | '' | required | | title | tab的标题 | string | '' | required |
| title | badge的文案标题 | string | '' | required | | paneclass | 底部内容区的classname | string | '' | |
| info | 当前badge的提示消息数量 | string | '' | | | disable | 是否禁用这个tab | Boolean | false | |
| url | 跳转链接 | string | 全连接直接跳转或者hash | |

16
packages/tab/src/tab.vue
View File

@ -8,30 +8,26 @@
export default { export default {
name: 'zan-tab', name: 'zan-tab',
props: { props: {
// 对应 Tabs 组件的 activeKey
tabKey: {
type: [Number, String],
required: true
},
// 选项卡头显示文字 // 选项卡头显示文字
title: { title: {
type: String, type: String,
required: true required: true
}, },
tabPaneClassName: { paneclass: {
type: String type: String
} },
disable: Boolean
}, },
computed: { computed: {
classNames() { classNames() {
return [ return [
{'is-select': this.tabKey == this.$parent.switchActiveTabKey}, {'is-select': this.$parent.tabs.indexOf(this) == this.$parent.switchActiveTabKey },
this.tabPaneClassName this.paneclass
]; ];
} }
}, },
created () { created () {
this.$parent.tabCreate(this.tabKey, this.title); this.$parent.tabs.push(this);
} }
}; };
</script> </script>

41
packages/tab/src/tabs.vue
View File

@ -3,11 +3,11 @@
<div class="zan-tabs-nav" :class="classNames"> <div class="zan-tabs-nav" :class="classNames">
<div class="zan-tabs-nav-bar" :style="navBarStyle"></div> <div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
<div <div
v-for="tab in tabs" v-for="(tab, index) in tabs"
class="zan-tab J-tab-key" class="zan-tab"
:class="[{'zan-tab-active': tab.tabKey == switchActiveTabKey}, tabClassName]" :class="{'zan-tab-active': index == switchActiveTabKey}"
:data-key="tab.tabKey" ref="tabkey"
@click="handleTabClick(tab.tabKey)" @click="handleTabClick(index,tab)"
> >
{{ tab.title }} {{ tab.title }}
</div> </div>
@ -21,41 +21,36 @@
name: 'zan-tabs', name: 'zan-tabs',
props: { props: {
// 外部传入的激活的tab标签 // 外部传入的激活的tab标签
activeTabKey: { active: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
}, },
// 是默认的line还是card // 是默认的line还是card
classType: { classtype: {
type: String, type: String,
default: 'line' default: 'line'
}, },
// nav的wrap的样式 // nav的wrap的样式
tabsClassName: { classname: {
type: String, type: String,
default: '' default: ''
},
// 每个nav里tab的样式
tabClassName: {
type: String
} }
}, },
data() { data() {
return { return {
tabs: [], tabs: [],
isReady: false, isReady: false,
switchActiveTabKey: this.activeTabKey switchActiveTabKey: this.active
}; };
}, },
computed: { computed: {
classNames () { classNames () {
return [ `zan-tabs-${this.classType}`, this.tabsClassName ] return [ `zan-tabs-${this.classtype}`, this.classname ]
}, },
navBarStyle () { navBarStyle () {
if(!this.isReady) return; if(!this.isReady) return;
let tabKey = this.switchActiveTabKey; let tabKey = this.switchActiveTabKey;
let selectors = `.J-tab-key[data-key="${tabKey}"]`; let elem = this.$refs.tabkey[tabKey];
let elem = this.$el.querySelector(selectors) || {};
let w = `${elem.offsetWidth || 0}px`; let w = `${elem.offsetWidth || 0}px`;
let x = `${elem.offsetLeft || 0}px`; let x = `${elem.offsetLeft || 0}px`;
return { return {
@ -65,14 +60,12 @@
} }
}, },
methods: { methods: {
tabCreate (tabKey, title) { handleTabClick(index, el) {
this.tabs.push({ if(el.disable) {
tabKey: tabKey, el.$emit('ondisable');
title: title return
}); }
}, this.switchActiveTabKey = index;
handleTabClick(tabKey) {
this.switchActiveTabKey = tabKey;
} }
}, },
mounted () { mounted () {

2
src/index.js
View File

@ -23,6 +23,7 @@ import Search from '../packages/search/index.js';
import Step from '../packages/step/index.js'; import Step from '../packages/step/index.js';
import Tabs from '../packages/tabs/index.js'; import Tabs from '../packages/tabs/index.js';
import Tab from '../packages/tab/index.js'; import Tab from '../packages/tab/index.js';
import Lazyload from '../packages/lazyload/index.js';
import ImagePreview from '../packages/image-preview/index.js'; import ImagePreview from '../packages/image-preview/index.js';
import Col from '../packages/col/index.js'; import Col from '../packages/col/index.js';
import Row from '../packages/row/index.js'; import Row from '../packages/row/index.js';
@ -92,6 +93,7 @@ module.exports = {
Step, Step,
Tabs, Tabs,
Tab, Tab,
Lazyload,
ImagePreview, ImagePreview,
Col, Col,
Row, Row,