checkBox筛选条件多选（类似淘宝多条件筛选） css js html vue

需求：要素多选，未选进行提示，选中--样式变化进行标注 ，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