blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore(Tabbar): improve isUnfit (#8356)

Browse Source
This commit is contained in:
neverland 2021-03-15 20:35:14 +08:00 committed by GitHub
parent b119d4ad41
commit d9ed5b9fb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/tabbar/README.md
View File

@ -171,9 +171,9 @@ export default {
### Tabbar Events ### Tabbar Events
| Event | Description | Arguments | | Event | Description | Arguments |
| ------ | -------------------------------- | ---------------------------- | | ------ | -------------------------------- | -------------------------- |
| change | Emitted when changing active tab | active: index of current tab | | change | Emitted when changing active tab | _active: number \| string_ |
### TabbarItem Props ### TabbarItem Props
@ -190,9 +190,9 @@ export default {
### TabbarItem Slots ### TabbarItem Slots
| Name | Description | SlotProps | | Name | Description | SlotProps |
| ---- | ----------- | --------- | | ---- | ----------- | -------------------------- |
| icon | Custom icon | active | | icon | Custom icon | _active: boolean_ |
### Less Variables ### Less Variables

8
src/tabbar/README.zh-CN.md
View File

@ -115,6 +115,8 @@ export default {
### 自定义颜色 ### 自定义颜色
通过 `active-color` 属性设置选中标签的颜色，通过 `inactive-color` 属性设置未选中标签的颜色。
```html ```html
<van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000"> <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
<van-tabbar-item icon="home-o">标签</van-tabbar-item> <van-tabbar-item icon="home-o">标签</van-tabbar-item>
@ -126,6 +128,8 @@ export default {
### 监听切换事件 ### 监听切换事件
通过 `change` 事件来监听选中标签的变化。
```html ```html
<van-tabbar v-model="active" @change="onChange"> <van-tabbar v-model="active" @change="onChange">
<van-tabbar-item icon="home-o">标签 1</van-tabbar-item> <van-tabbar-item icon="home-o">标签 1</van-tabbar-item>
@ -185,7 +189,7 @@ export default {
| 事件名 | 说明 | 回调参数 | | 事件名 | 说明 | 回调参数 |
| ------ | -------------- | ---------------------------------- | | ------ | -------------- | ---------------------------------- |
| change | 切换标签时触发 | active: 当前选中标签的名称或索引值 | | change | 切换标签时触发 | _active: number \| string_ |
### TabbarItem Props ### TabbarItem Props
@ -204,7 +208,7 @@ export default {
| 名称 | 说明 | 参数 | | 名称 | 说明 | 参数 |
| ---- | ---------- | ---------------------- | | ---- | ---------- | ---------------------- |
| icon | 自定义图标 | active: 是否为选中标签 | | icon | 自定义图标 | _active: boolean_ |
### 样式变量 ### 样式变量

9
src/tabbar/Tabbar.tsx
View File

@ -55,13 +55,8 @@ export default defineComponent({
const { linkChildren } = useChildren(TABBAR_KEY); const { linkChildren } = useChildren(TABBAR_KEY);
const renderPlaceholder = usePlaceholder(root, bem); const renderPlaceholder = usePlaceholder(root, bem);
const isUnfit = () => { // enable safe-area-inset-bottom by default when fixed
if (props.safeAreaInsetBottom !== null) { const isUnfit = () => !(props.safeAreaInsetBottom ?? props.fixed);
return !props.safeAreaInsetBottom;
}
// enable safe-area-inset-bottom by default when fixed
return !props.fixed;
};
const renderTabbar = () => { const renderTabbar = () => {
const { fixed, zIndex, border } = props; const { fixed, zIndex, border } = props;