vue移动端列表筛选功能实现

最近兴趣所致，打算使⽤vant搭建⼀个webapp，由于需要使⽤列表筛选，没有找到合适组件，于是写了⼀个简单的功能，权当记录。效果如下：

HTML:

CSS:

.filterbar {

position: fixed; z-index: 2;

left: 0;

top: 3.1em; width: 100%;

background-color: #fff; height: 2em;

.bg-filterbar { position: fixed; width: 100%; height: 100%;

background-color: black; opacity: 0.2; z-index: 1; left: 0;

top: 4.2em; }

.filterbar-title { width: 100%; .title-ul {

height: 1.4em;

margin-bottom: 0.5em;

border-bottom: 1px solid #eee; }

ul .title-li { width: 24%; float: left;

text-align: center; font-size: 0.9em; .filterbar-content { position: absolute; left: 0;

width: 100%; padding: 0.5em;

background-color: #fff; z-index: 2; top: 1.24em; }

.content-ul li { text-align: left; color: #111;

font-weight: 400; padding-left: 1.5em; padding-top: 0.7em; }

.content-ul .current { color: #1989fa; } }

ul .current {

color: #1989fa; font-weight: 600; }

ul:after { content: \"\"; display: block; clear: both; }

.content-ul .van-icon { float: right;

margin-right: 2.5em; }

ul .van-icon {

vertical-align: middle; } }

.button-div {

margin-top: 1.5em; text-align: center; button {

width: 48%; float: left; }

.van-button { height: 3em; line-height: 3em; font-size: 1em; font-weight: 400; } } }

JS:

参数说明：

name：筛选项显⽰名称value：筛选项codeisShow：是否显⽰

multiple: 是否多选，为true时会有清空和确定功能按钮data： 筛选列表项