checkBox筛选条件多选(类似淘宝多条件筛选) css js html vue
编程语言
2018-11-02 13:01:11
阅读次数: 0
需求:要素多选,未选进行提示,选中--样式变化进行标注 ,div自动换行 (类似淘宝,京东的多条件筛选)
如图:
html代码:
引用了vue,使用vue的v-for遍历
css代码:
/*display: inline-block div边框随文字的长度而变化,且div不会换行*/
.fd-checkBox-div{
display: inline-block;
padding: 4px 14px;
margin-right: 10px;
border: 1px solid #eceff2;
line-height: 20px;
font-size: 14px;
color: #6a788d;
cursor: pointer;
font-family: 'microsoft yahei';
border-radius: 28px;
}
.fd-change-blue{
border: 1px solid #15a4fa;
color: #15a4fa;
}
/*position: absolute; visibility: hidden; 控制元素的显示隐藏,不影响排版*/
.fd-has-ysChecked{
font-size: 14px;
color: red;
cursor: pointer;
position: absolute;
visibility: hidden;
}
.fd-none-ysChecked{
visibility: inherit;
}
js代码:
(vue定义变量--略 直接上方法)
/* 选中样式 vue @click方法传dom元素 ($event)
target :你当前点击的元素
currentTarget :你当前事件绑定的元素 */
checkClick: function(ys,e) {
var _this = this;
var index = _this.ysCheckedName.indexOf(ys.value);
if(index == -1){
$(e.currentTarget).addClass("fd-change-blue");
_this.ysCheckedName.push(ys.value);
_this.ysCheckedCode.push(ys.key);
}else{
$(e.currentTarget).removeClass("fd-change-blue");
_this.ysCheckedName.splice(index,1);
_this.ysCheckedCode.splice(index,1);
}
}
/* 红色未选择提示 getElementsByClassName 获取的是一个数组,取[0],操作dom元素时,记得加$(...) */
calculate: function(jflb, zlAyName) {
var _this = this;
//判断是否选择要素
var tem = document.getElementsByClassName("fd-has-ysChecked")[0];
if(_this.ysCheckedName.length == 0){
$(tem).addClass("fd-none-ysChecked");
return;
}else{
$(tem).removeClass("fd-none-ysChecked")
}
.........接下来是各种dadadadadadad
}
-
enenenen......写笔记不如写博客。。。
-
《菜鸟开发笔记》 2018.10.31
转载自blog.csdn.net/weixin_37270353/article/details/83588432