VantUI Tab标签页 里使用 DropdownMenu下拉菜单的 bug

日常踩坑笔记

如果你的van-tabs有animated属性，并且里面有使用van-dropdown-menu下拉菜单组件，你会发现，我的下拉菜单去哪了？

<van-tabs v-model="active" animated> 
	<van-tab title="标签 1">
		<van-dropdown-menu>
			<van-dropdown-item v-model="value1" :options="option1" />
		van-dropdown-menu>
	van-tab>
	<van-tab title="标签 2">内容 2van-tab>
	<van-tab title="标签 3">内容 3van-tab>
van-tabs>

export default {
    name: 'Demo',
    data () {
        return {
            active: 0,
            value1: 0,
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 }
            ]
        }
    }
}

下拉菜单消失？

• 解决方法1
  是因为下拉菜单里面的定位被动画属性transform影响到了，直接去掉van-tabs的animated属性。

<van-tabs v-model="active"> 
	<van-tab title="标签 1">
		<van-dropdown-menu>
			<van-dropdown-item v-model="value1" :options="option1" />
		van-dropdown-menu>
	van-tab>
	<van-tab title="标签 2">内容 2van-tab>
	<van-tab title="标签 3">内容 3van-tab>
van-tabs>

这样做会关闭切换标签内容时的转场动画

• 解决方法2
  在van-dropdown-item上添加get-container="body"属性。

<van-tabs v-model="active"> 
	<van-tab title="标签 1">
		<van-dropdown-menu>
			<van-dropdown-item get-container="body" v-model="value1" :options="option1" />
		van-dropdown-menu>
	van-tab>
	<van-tab title="标签 2">内容 2van-tab>
	<van-tab title="标签 3">内容 3van-tab>
van-tabs>

这种方法在宽度不是100%的情况下不太友好，需要自行修改下拉菜单样式

• 解决方法3
  添加以下样式，这样下拉显示的覆盖层宽度不是100%

.van-tab__pane {
	height: calc(100vh - 44px); /* 这里减去了tab的高度，为页面剩余高度 */
}
.van-dropdown-item {
    position: absolute !important;
    height: 100vh;
    top: 100% !important;
}