<div class="selects" id="selects">
<h4 class="label" id="label" @click = showData()>请选择适配器</h4>
<ul id="ul-option" style="display: none">
<li v-for="adapter in adapters" v-model="adapterSelected">
<span style="float: left;margin:0px 4px;"><img v-if="!adapter.val" src="../../static/images/grey.png"><img v-if="adapter.val" src="../../static/images/green.png"></span>
<span>{{adapter.ip}}</span>
</li>
</ul>
</div>
<script>
selectEvent(lis,num){var self = this;
var oneli = lis[num];
oneli.onmouseenter = function () {
oneli.style.backgroundColor = '#3398FE';
oneli.style.color = '#fff';
}
oneli.onmouseleave = function () {
oneli.style.backgroundColor = '';
oneli.style.color = '';
}
oneli.onclick = function () {
document.getElementById('label').innerHTML = oneli.innerText;
self.adapterSelected = oneli.innerText;
oneli.parentNode.setAttribute('style',"display:none;");
}
num++;
if(lis[num] != null || lis[num] != undefined){
self.selectEvent(lis,num);
}
},
showData(){
var uls = document.getElementById('ul-option');
uls.style.display = '';
var lis = uls.getElementsByTagName('li');
var num = 0;
this.selectEvent(lis,num);
},
</script>
<style>
.selects{
display: inline-block;
}
.label{
color:#000;
border: solid 1px #0eb1d7;
background: url("../../static/images/select_icon.png") no-repeat scroll right center transparent;
padding-right: 14px;
height: 30px;
line-height:30px;
width: 121px;
}
#ul-option{
color:#000;
position:absolute;
border:1px solid #51a4f7;
}
#ul-option li {
background-color: #fff;
width:135px;
height: 20px;
line-height: 20px;
}
</style>