vue实现下拉选择框功能
.taskSort {width: 100%;justify-content: space-around;}.taskSort span:first-child{width: 4rem;}.zkicon {margin-left: 0.5rem;width: 0;height: 0;border-left: 0.45rem solid transparent;border-right: 0.45r
·
.taskSort {
width: 100%;
justify-content: space-around;
}
.taskSort span:first-child{
width: 4rem;
}
.zkicon {
margin-left: 0.5rem;
width: 0;
height: 0;
border-left: 0.45rem solid transparent;
border-right: 0.45rem solid transparent;
border-top: 0.6rem solid #666;
}
.sortSel {
position: relative;
height: 2rem;
}
.sortSel ul {
position: absolute;
width: 6rem;
top: 2rem;
left: 0;
z-index: 9;
background-color: #f6f6f6;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.sortSel ul li{
width: 100%;
height: 2rem;
padding-left: 0.5rem;
border-radius: 7px;
}
<div class="flex_row taskSort">
<div v-for="(item,index) in selectList" class="sortSel">
<div class="" @click="openSelect(index)">
<span>{{item.title}}</span><span class="zkicon"></span>
</div>
<ul class="" v-show="selectShow[index]">
<li v-for="(item2,index2) in item.list" @click="selectItem(index,index2)">{{item2.value}}</li>
</ul>
</div>
</div>
var vue = new Vue({
el: "#app",
data: {
selectList: [{
list: [],
title: "默认排序"
}, {
list: [],
title: "最新发布"
}, {
list: [],
title: "佣金最高"
}],
selectShow: [],
},
created: function() {
this.initSelect();
},
methods: {
initSelect: function() {
for (var i = 0; i < this.selectList.length; i += 1) {
this.selectShow[i] = false
for (var j = 0; j < 3; j += 1) {
this.selectList[i].list[j] = {}
this.selectList[i].list[j].name = "测试"
this.selectList[i].list[j].value = j
}
}
},
selectItem: function(i, j) {
this.selectList[i].title = this.selectList[i].list[j].value
this.openSelect(i);
},
openSelect: function(i) {
if (this.selectShow[i]) {
for (var i = 0; i < this.selectShow.length; i += 1) {
this.$set(this.selectShow, i, false)
}
} else {
this.$set(this.selectShow, i, true)
}
},
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)