checkBox篩選條件多選（類似淘寶多條件篩選） css js html vue
阿新 • • 發佈：2018-12-18
需求：糾紛要素多選，選中--樣式變化進行標註，若未選要素，點選計算，提示使用者---請選擇要素(類似淘寶，京東的多條件篩選)
如圖：
html程式碼：
引用了vue，使用vue的v-for遍歷
css程式碼：
/*display: inline div邊框隨文字的長度而變化*/
.fd-checkBox-div{
display: inline;
border-radius: 15px;
padding: 4px 27px;
margin-right: 10px;
border: 1px solid #eceff2;
font-size: 14px;
color: #6a788d;
cursor: pointer;
font-family: 'microsoft yahei';
}
.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");
/*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