[Improvement] Tabbar: add z-index prop (#1310)

This commit is contained in:
neverland 2018-06-20 23:01:12 +08:00 committed by GitHub
parent 0a99da352e
commit 3c48de191d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 30 additions and 4 deletions

View File

@ -65,6 +65,8 @@ export default {
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| v-model | Index of current tab | `Number` | - | | v-model | Index of current tab | `Number` | - |
| fixed | Whether to fixed bottom | `Boolean` | `true` |
| z-index | Z-index | `Number` | `1` |
### Tabbar Event ### Tabbar Event

View File

@ -1,5 +1,9 @@
<template> <template>
<div class="van-hairline--top-bottom" :class="b({ fixed })"> <div
class="van-hairline--top-bottom"
:class="b({ fixed })"
:style="style"
>
<slot /> <slot />
</div> </div>
</template> </template>
@ -21,6 +25,18 @@ export default create({
fixed: { fixed: {
type: Boolean, type: Boolean,
default: true default: true
},
zIndex: {
type: Number,
default: 1
}
},
computed: {
style() {
return {
zIndex: this.zIndex
};
} }
}, },

View File

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"> <div class="van-tabbar-item__icon">
<i class="van-icon van-icon-shop" style="color:undefined;"> <i class="van-icon van-icon-shop" style="color:undefined;">
@ -43,7 +43,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed"> <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
<div class="van-tabbar-item"> <div class="van-tabbar-item">
<div class="van-tabbar-item__icon"> <div class="van-tabbar-item__icon">
<img src="https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png"> <img src="https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png">

View File

@ -69,6 +69,8 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| v-model | 当前选中标签的索引 | `Number` | - | | v-model | 当前选中标签的索引 | `Number` | - |
| fixed | 是否固定在底部 | `Boolean` | `true` |
| z-index | 元素 z-index | `Number` | `1` |
### Tabbar Event ### Tabbar Event

View File

@ -2,7 +2,7 @@
<demo-section> <demo-section>
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<div class="demo-uploader-container"> <div class="demo-uploader-container">
<van-uploader :max-size="102400" @oversize="logContent('oversize')"> <van-uploader :max-size="102400" @oversize="logContent('oversize')" :before-read="beforeRead(1)">
<van-icon name="photograph" /> <van-icon name="photograph" />
</van-uploader> </van-uploader>
</div> </div>
@ -32,6 +32,12 @@ export default {
methods: { methods: {
logContent(file) { logContent(file) {
console.log(file); console.log(file);
},
beforeRead(index) {
return file => {
console.log(index, file);
};
} }
} }
}; };