<template>
    <van-dropdown-menu  :class="[true?'width'+option.width:'',option.isright?'isright':'']"  :direction="option.direction">
        <van-dropdown-item  :title="option.name"  @change="change"  :options="option.item" />
    </van-dropdown-menu>
</template>

<script>
export default {
    name:"myMoreBtn",
    props:{
        direction:{
            type:String,
            default(){
                return 'up'
            }
        },
        option:{
            type:Object,
            default(){
                return{
                    width:100,
                    item:[],
                    name:'按钮',
                    direction:'up'
                }
            }
        }
    },
    data(){
        return{
            value:'看房'
        }
    },
    methods:{
        change(e){
            this.$emit('change',e)
        }
    }

}
</script>

<style  lang="stylus">
.van-dropdown-menu.width50 .van-popup{
        width :50%;
}
.van-dropdown-menu.width40 .van-popup{
    width :40%;
}
.van-dropdown-menu.width60 .van-popup{
    width :60%;
}
.van-dropdown-menu.isright .van-popup{
    left:auto;right:0
}
.van-dropdown-menu__bar{   
    background-color:rgba(0,0,0,0)!important;
}
.van-dropdown-menu .van-dropdown-menu__title::after{
    display:none;
}
.van-dropdown-menu__title{
    color :#fff;
}
.van-dropdown-menu__title--active{
    color :#fff;
}
.van-dropdown-menu__item{
    height :40px;
    line-height :40px;
}
</style>