1. 程式人生 > 其它 >vscode vant 樣式覆蓋、自定義樣式 dropdown-menu-content-max-height

vscode vant 樣式覆蓋、自定義樣式 dropdown-menu-content-max-height

@dropdown-menu-content-max-height 預設是80%,想改成100%

官方文件太複雜,不太懂:https://vant-contrib.gitee.io/vant/#/zh-CN/dropdown-menu

僅改css怎麼弄?

加scoped則失效

<style scoped>

 .my-dropdown-menu .van-dropdown-item__content {
    position: absolute;
    max-height: 100% !important;
 }
 

</style>

去掉scoped,會影響全域性頁面。需要加上class類名稱,控制作用域。

<style>

 .my-dropdown-menu .van-dropdown-item__content {
    position: absolute;
    max-height: 100% !important;
 }
 

</style>

  應用:

    <van-dropdown-menu active-color="rgb(4,190,2)" duration="0" class="my-dropdown-menu" >
        <van-dropdown-item v-model="stationType" :options="stationTypeList2" />
        <van-dropdown-item v-model="displayType" :options="displayTypeList2" />
        <van-dropdown-item title="篩選" ref="item"  >   
            <div>
               
                    <div style="padding: 5px 16px 10px 16px">
                        <van-button type="primary" block round @click="searchClick">
                            確認
                        </van-button>
                    </div>
              
            </div>
        </van-dropdown-item>      
    </van-dropdown-menu>

  

樹立目標,保持活力,gogogo!