VUE下拉菜单组件

下拉菜单组件：

export default{
    props:{
        modelValue:{
            default:''
        },
        title:{
            default:'名称'
        },
        focus_field:{
            default:false
        },
        dataList:{
            default:[]
        }
    },
    data(){
        return{
            showMenu:false,
            select_title:'请选择',
            inputvalue:''
        }
    },
    methods:{
        changeevent(obj){
            this.select_title=obj.title
            this.$emit('update:modelValue', obj.value)
            this.showMenu=false

        }
    },
    mounted() {
        this.$nextTick(()=>{
            let h=this.$refs.selectBox.offsetHeight
            this.$refs.selectMenu.style.top=h+4+'px'
        })
    },
    template:`
    <div :class="{'yp-input':!focus_field,'yp-input-on':focus_field}" @click.stop="showMenu=true">
        <div class="w-24 text-right"><span class="text-red-500 px-1" v-if="must">*</span>{{title}}</div>
        <div class="inputbox py-2 relative" ref="selectBox">
            <div class="flex-1">{{select_title}}</div>
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 duration-300" :class="{'rotate-180':showMenu}"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z" fill="currentColor"></path></svg>
            </div>
            <div class="absolute left-0 w-full bg-white max-h-52 overflow-y-auto" ref="selectMenu" :class="{'hidden':!showMenu}">
                <div class="hover:bg-gray-3.5 p-2" v-for="(item,index) in dataList" @click.stop="changeevent(item)" v-html="item.title"></div>
            </div>
        </div>
    </div>
    `
}