效果图:
<div id="select">
<div class="divInput">
<div class="input" @click="openValue">
<input v-model="value" type="text" placeholder="选择喜欢的水果" disabled="true">
<!-- <div class="input-box" v-model="value">
</div> -->
<!-- <img src="../assets/arrow.png" alt=""> -->
<div class="triangle" :class="openSelect ? 'isSelect':''">
</div>
</div>
<div class="list" v-show="show">
<ul>
<li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.index" :class="item.checked ? 'checked':''">{{ item.name }}</li>
</ul>
</div>
</div>
</div>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.divInput {
margin: 200px;
}
ul li {
list-style: none;
}
.input {
width: 140px;
height: 40px;
line-height: 40px;
padding-left: 10px;
border: 1px solid #cccccc;
position: relative;
}
.input input {
border: none;
outline: none;
width: 90%;
background-color: transparent;
font-size: 15px;
}
/* .input::after {
content: '';
position: absolute;
right: 10px;
top: 43%;
width: 0px;
height: 0px;
border-top: 7px solid green;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
} */
.triangle {
/* content: ''; */
position: absolute;
right: 10px;
top: 35%;
width: 0px;
height: 0px;
border-top: 7px solid green;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid transparent;
transition: all .1s;
}
.list {
width: 150px;
border: 1px solid #cccccc;
overflow: hidden;
color: #999;
}
.list ul li {
width: 100%;
height: 30px;
cursor: pointer;
line-height: 30px;
padding-left: 15px;
}
.list ul li:hover {
background-color: #cccccc;
color: white;
}
.checked {
background-color: #cccccc;
color: white;
}
.isSelect {
transform: rotate(180deg);
}
</style>
<script type="text/javascript">
new Vue({
el: '#select',
data() {
return {
tableData: [{
'name': "苹果",
"checked": false
},
{
'name': '鸭梨',
"checked": false
},
{
'name': '香蕉',
"checked": false
}, {
'name': '菠萝蜜',
"checked": false
}
],
show: false,
value: '',
openSelect: false,
}
},
computed: {
gettableData: function() {
return this.tableData;
}
},
methods: {
openValue() {
this.show = !this.show;
this.openSelect = !this.openSelect;
},
getvalue(index, item) {
this.value = item.name;
this.tableData.forEach(item1 => {
if (item1.name == item.name) {
item1.checked = true;
} else {
item1.checked = false;
}
})
this.show = false;
this.openSelect = false;
},
}
})
</script>