mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-23 18:00:27 +08:00
[Improvement] Tabbar: add z-index prop (#1310)
This commit is contained in:
parent
0a99da352e
commit
3c48de191d
@ -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
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -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">
|
||||||
|
@ -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
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
Loading…
x
Reference in New Issue
Block a user