[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 |
|-----------|-----------|-----------|-------------|
| v-model | Index of current tab | `Number` | - |
| fixed | Whether to fixed bottom | `Boolean` | `true` |
| z-index | Z-index | `Number` | `1` |
### Tabbar Event

View File

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

View File

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = `
<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__icon">
<i class="van-icon van-icon-shop" style="color:undefined;">
@ -43,7 +43,7 @@ exports[`renders demo correctly 1`] = `
</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__icon">
<img src="https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png">

View File

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

View File

@ -2,7 +2,7 @@
<demo-section>
<demo-block :title="$t('basicUsage')">
<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-uploader>
</div>
@ -32,6 +32,12 @@ export default {
methods: {
logContent(file) {
console.log(file);
},
beforeRead(index) {
return file => {
console.log(index, file);
};
}
}
};