因为要将选择的数据传回父组件,所以要传一个对象过去。
<template>
<!--下拉单选框-->
<div class="base-select" @click="showDataList" v-bind:style="{width: widthData}">
<div class="sub-selected-value">
{{selectedValue.value}}<!--显示选择的值-->
<div class="sub-select-list" v-bind:style="{width: widthData}" v-if="showData">
<div class="sub-select-item" v-for="(item, index) in dataList" @click.stop="select(item, index)">
{{item.value}}
</div>
</div>
</div>
</div>
</template>
<style lang="scss">
.base-select {
position: relative;
top: 0px;
float: right;
border: 1px solid;
height: 25px;
//width: 160px;
&:after { position: absolute;
top: 50%;
right: 2px;
transform: translateY(-50%);
content: '';
width: 0;
border-top: 5px solid black;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
height: 0;
}
.sub-selected-value {
position: absolute;
top: -7px;
.sub-select-list { position: absolute;
top: 33px;
background: white;
//width: 160px;
box-shadow: 1px 1px 1px 1px #D9D9D9;
z-index: 9;
.sub-select-item { width: auto;
min-width: 7.25rem;
height: 2.5rem;
line-height: 2.5rem;
position: relative;
text-align: left;
img { position: absolute;
top: 50%;
right: 0;
transform: translate(-0.1rem, -50%);
width: .8125rem;
height: .625rem;
}
}
}
}
}
</style>
<script type="text/ecmascript-6">
export default{
data(){
return{
showData: false
}
},
props: {
dataList:Array,
selectedValue: Object,//传回父组件的选择值
widthData:{
type: String,
default: "160px"
}
},
methods: {
showDataList(){
this.showData=!this.showData
},
select(item,index){
this.showData=false;
console.log("选择");
console.log(item);
console.log(index);
//this.selectedValue=item;
//赋值的时候要分开写
this.selectedValue.key=item.key;
this.selectedValue.value=item.value;
this.$emit('select');
console.log("0"+this.selectedValue.value);
},
},
mounted(){
}
}
</script>
父组件中调用
html代码:
<BaseSelect v-on:select="showProject"
:selectedValue="projectName"
:dataList="list"
:widthData="widthData"></BaseSelect>
js代码
data() {
return {
list:[
{key:"gd",value:"卫我好交换空间"},
{key:"gx",value:"我去而且翁群无"},
{key:"gx",value:"王企鹅群无科技二号"}
],
projectName:{//岁子组件的选择值改变而改变的值
key:"",
value:""
},
widthData:"180px",
}
}
showProject (){
console.log("下拉列表的值改变了");
console.log("213122"+this.projectName.value);
console.log("213122"+this.projectName.key);
},