<template>
|
<div>
|
<div class="current-select" @click="listFlag = !listFlag">
|
<div class="title">{{ currentTitle }}</div>
|
<i class="el-icon-caret-bottom"></i>
|
</div>
|
|
<div class="list-box" v-show="listFlag">
|
<ul>
|
<li v-for="(item, index) in selectList"
|
:key="index"
|
@click="currentClick(item, index)"
|
>{{item.name}}</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'selectName',
|
props: ['selectList', 'value'],
|
data () {
|
return {
|
listFlag: false,
|
currentTitle: null,
|
currentIndex: null
|
}
|
},
|
created () {
|
this.currentTitle = this.value
|
},
|
watch:{
|
value: {
|
handler (newName, oldName) {
|
this.currentTitle = newName
|
}
|
}
|
},
|
methods: {
|
|
currentClick (item, index) {
|
this.$emit('selectItem', item, index)
|
if (this.currentIndex == index) {
|
this.listFlag = false
|
return
|
}
|
this.currentTitle = item.name
|
this.currentIndex = index
|
|
this.listFlag = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.current-select {
|
padding: 0 15px;
|
width: 166px;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #ffffff;
|
border-radius: 4px 4px 4px 4px;
|
box-sizing: border-box;
|
font-size: 12px;
|
color: #717171;
|
cursor: pointer;
|
}
|
|
.list-box {
|
position: absolute;
|
top: 32px;
|
width: 166px;
|
height: 240px;
|
overflow-y: auto;
|
background: #ffffff;
|
border-radius: 4px 4px 4px 4px;
|
box-sizing: border-box;
|
font-size: 12px;
|
color: #717171;
|
|
li {
|
line-height: 30px;
|
text-align: center;
|
cursor: pointer;
|
}
|
}
|
</style>
|
