<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>Vue模拟select</title>
<script src="https://denghao.me/js/vue.min.js"></script>
<style>
h3{
text-align: center;
}
#app{
margin: 20px auto;
250px;
position: relative;
background-color: #f5f5f5;
}
#app:after{
content: "";
position: absolute;
top: 14px;
right: 6px;
0;
height: 0;
border:8px solid transparent;
border-top-color: #666;
}
#app>input{
100%;
height: 30px;
text-indent: 6px;
}
#app>div{
position: absolute;
100%;
top: 36px;
left: 0;
background-color: #f5f5f5;
z-index: 2;
}
#app>div>label{
display: block;
cursor: pointer;
text-indent: 10px;
padding: 8px 0;
margin:0;
}
</style>
</head>
<body>
<h3>模拟select</h3>
<div id="app">
<input class="tar" type="text" :value="vals" readonly placeholder="下拉选择 ">
<div v-if="flag">
<label v-for="item in list" class="tar"><input class="tar" type="radio" v-model="vals" :value="item.name">{{item.name}}</label>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
list: {}, //初始列表数据
vals: [], //选择的数据
flag: false //toggle标记
},
ready() {
var _this = this;
_this.initData();
//下拉toggle效果
document.addEventListener("click", function(e) {
var c = e.target.className;
_this.flag = c == "tar" ? true : false;
});
},
methods: {
//渲染列表数据
initData() {
var data = [{
id: 1,
name: "张一"
}, {
id: 2,
name: "李二"
}, {
id: 3,
name: "邓三"
}];
//赋值
this.list = data;
}
}
})
</script>
</body>
</html>