mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-24 23:49:14 +08:00
fix tabs
This commit is contained in:
parent
a11ccb635b
commit
3017419c8e
@ -24,15 +24,19 @@
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block="">normal</zan-button>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="normal">normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block="">small</zan-button>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block="">mini</zan-button>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
@ -53,6 +57,21 @@
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" bottom-action="">立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="12">
|
||||
<zan-button bottom-action="">加入购物车</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="12">
|
||||
<zan-button type="primary" bottom-action="">立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@ -63,10 +82,6 @@
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -8,7 +8,7 @@
|
||||
<zan-icon name="check"></zan-icon>
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
<zan-icon name="like"></zan-icon>
|
||||
<zan-icon name="like" :style="{ color: '#f44' }"></zan-icon>
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
|
@ -36,6 +36,17 @@
|
||||
</zan-tabs>
|
||||
|
||||
|
||||
</example-block><example-block title="click事件">
|
||||
<zan-tabs @click="handleTabClick">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@ -81,6 +92,10 @@ export default {
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -141,6 +141,8 @@ export default {
|
||||
|
||||
### click事件
|
||||
|
||||
可以在`zan-tabs`上绑定一个`click`事件,事件处理函数有一个参数,参数为对应`tab`在`tabs`中的索引。
|
||||
|
||||
:::demo click事件
|
||||
```html
|
||||
<zan-tabs @click="handleTabClick">
|
||||
@ -173,6 +175,7 @@ export default {
|
||||
|
||||
|
||||
### zan-tab API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `string` | | |
|
||||
|
Loading…
x
Reference in New Issue
Block a user