vue自定义图片下拉框组件

<template>
	<div style="position: relative;">

		<div style="display:flex;align-items:center;width:100px;height:20px;">
			<img :src="obj[selindex].imgurl" style="width:83px;display: block;">
			<img src="../img/arrow-down.png" style="margin-left:7px;display: block;" />
		</div>
		<div class="contentbox" v-bind:style="{'display':ishow ? 'flex':'none'}">
			<div class="itemdiv" v-for="(item,index) in obj" @click="changeselect(index)"><img :src="item.imgurl"  /></div>
		</div>
	
	</div>
</template>

<script>
	module.exports = {
	  name:"my-picselect",
	  props:{
		  ishow: Boolean
	  },
	  data(){
	    return{
	    	obj:[{
					imgurl:'../img/icon_vip_all.png',
			    	imgvalue: "0"
		        },
		        {
		        	imgurl:'../img/icon_vip_chuji.png',
			    	imgvalue: "4"
		        },
		        {
		        	imgurl:'../img/icon_vip_csr.png',
			    	imgvalue: "5"
		        },
		        {
		        	imgurl:'../img/icon_vip_gaoji.png',
			    	imgvalue: "6"
		        },
		        {
		        	imgurl:'../img/icon_vip_quji.png',
			    	imgvalue: "1"
		        },
		        {
		        	imgurl:'../img/icon_vip_shiji.png',
			    	imgvalue: "2"
		        },
		        {
		        	imgurl:'../img/icon_vip_shengji.png',
			    	imgvalue: "3"
		        }],
		     selindex:0
	    }
	  },
	  methods:{
	  	changeselect: function(index){
	  		this.selindex = index;
	  		console.info(this.obj[this.selindex].imgurl);
	  		this.$emit('imgselectchangeevent',this.obj[index].imgvalue);
	  	}
	  }
	}
</script>

<style scoped>
	#hidebg{
		position:absolute;left:0px;top:0px;
		background-color:#000;width:100%;height:100%;
		filter:alpha(opacity=60);opacity:0.6;
		z-Index:10;display:none;
	}
	.contentbox{
		width:100px;display:flex;flex-direction:column;z-index:99;position: absolute;top:20px;background-color:#fff;padding-bottom:5px;
	}
	.itemdiv{display:flex;align-items:center;width:100px;margin-top:3px;}
	.itemdiv img{width:83px;display:block;}
</style>

 

 

很久以前项目中自己封装使用过，又有需求差不多找出来