mirror of
https://github.com/youzan/vant.git
synced 2025-10-19 10:07:07 +00:00
fix tabs
This commit is contained in:
@@ -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` | | |
|
||||
|
Reference in New Issue
Block a user