css類比下拉框，vue擷取雙向繫結的值

標籤：for迴圈   size   擷取值   mod   下拉   block   lis   put   round   

原生的下拉框用vue擷取值雙向繫結簡直不要太好用，Duang的一下就行了

<div id="datePrice"><select v-model="selected" id="dataSel" class="dataSel" v-on:change="change"><option v-for="item in dateList" v-bind:value="item.date" v-text="item.date"></option></select></div>

js:

var VMdate=new Vue({    el:‘#datePrice‘,    data:{        selected:‘請選擇日期‘,        serviceType:0,        dateList:[{‘date‘:‘2016-11‘},{‘date‘:‘2016-10‘},{‘date‘:‘2016-09‘},//這裡可以用ajax回調設定，做到動態擷取],        Apptype:0,        num:true,        input_disabled:true    },    methods:{     change:function(){  console.log(this.selected);}        }    },    watch:{}});

 

下面是類比下拉框框

<div class="dataSelD fleft" id="datePrice"><i class="icon-date-picker-green"></i><input v-model="selected" type="text" v-bind:readonly="input_disabled" id="dataSel" class="dataSel" v-on:click.stop="setselUl"><ul ><li class="selLI" v-for="item in dateList" v-bind:data-val="item.date" v-text="item.date" v-on:click.stop="setSelectVal(item.date)"></li></ul></div>

但是原生的樣子特別不好看 修改樣式的時候幾乎不可修改，所以大部分都是用其他標籤類比這個效果。但是在擷取值 設定值的時候就多了許多js 不知道瀏覽器為什麼不能用css修改這個下拉框框 感覺和奇怪估計以後會出現css可以修改吧；

下面是類比下拉框框

<div class="dataSelD fleft" id="datePrice">   <i class="icon-date-picker-green"></i>   <input v-model="selected" type="text" v-bind:readonly="input_disabled" id="dataSel" class="dataSel" v-on:click.stop="setselUl">   <ul >      <li class="selLI" v-for="item in dateList" v-bind:data-val="item.date"  v-text="item.date" v-on:click.stop="setSelectVal(item.date)"></li>   </ul></div>

用input代替seclet 下面東西用ui li 標籤來類比
css

.bill .detailMain .serviceCon1 .dataSelD{margin-top: 30px;position: relative;}.bill .detailMain .serviceCon1 .dataSelD ul{    display:none;    left:37px;top:34px;    position: absolute;    width:165px;    border: 1px solid #8aac20;border-top: none;z-index: 999;}.bill .detailMain .serviceCon1 .dataSelD ul li{    font-size:12px;height:28px;    line-height: 20px;cursor: pointer;    padding: 5px 0 5px 19px;    background-color:#ffffff;}.bill .detailMain .serviceCon1 .dataSelD ul li:hover{    color:#ffffff;background-color:#8aac20;}.bill .detailMain .serviceCon1 .dataSelD .dataSel{width: 164px;height:34px;    margin-left:38px;font-size: 14px;outline: none;cursor: pointer;    background-image:url("/img/bill/icon-input-sel-bg.png");    background-position:147px 14px;    background-repeat: no-repeat;    background-size:10px 6px;    padding: 0 70px 0 15px;border-radius: 0;border:1px solid #ababab;border-left:none;}.bill .detailMain .serviceCon1 .dataSelD .dataSel[disabled]{background-color:#ffffff;}.bill .detailMain .serviceCon1 .dataSelD .dataSel:focus,.bill .detailMain .serviceCon1 .dataSelD .dataSel:hover{    border-top: 0.5px solid #8aac20;border-bottom: 0.5px solid #8aac20;border-right: 0.5px solid #8aac20;}

 

css比較多 是個綠的主題 這個可以任意修改樣式了 變成你想要的
js：

//日期下拉框var VMdate=new Vue({    el:‘#datePrice‘,    data:{        selected:‘請選擇日期‘,        serviceType:0,        dateList:[],//這裡是回調設定的數組        num:true,        input_disabled:true    },    methods:{        setSelectVal:function(val){            $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘none‘);            this.num=true;            this.selected=val;            getBillByDate(val,this.Apptype);//項目裡面是請求了另一個介面        },        setselUl:function(){            if(this.num){                $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘block‘);                this.num=false;            }else{                $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘none‘);                this.num=true;            }        }    },    watch:{}});

//類比的下拉框框，首先解決就是框框的失去焦點的問題 這裡用jq//類比框框的失去焦時間點事件 關閉框框下面的li標籤的東西$(document).on(‘click‘,function(e){    if(e.target.className==‘selLI‘){        $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘none‘);       var $data_val= $(e.target).attr("data-val");        VMdate.selected=$data_val;    }    else{        $(‘.serviceCon1 .dataSelD ul‘).css(‘display‘,‘none‘);        VMdate.num=true;    }})

 

整體的大致思路
頁面第一次載入 類比的下拉框框 v-for迴圈一個數組，產生多個li標籤，但是一開始是沒有值的，什麼也不會顯示。
然後js運行到請求使用者賬單的介面，回調裡面用設定vue執行個體裡面的數組，觸發視圖更新。頁面出現下拉框框的選擇。
v-mode雙向繫結一個變數到input框框上面 點擊li標籤的出現的值擷取到 設定到vue執行個體裡面的v-model的變數 實現雙向繫結 視圖更新，js也拿到了值 然後用這個值去請求。
因為是用input框框類比的下拉框 所以需要jq額外設定失去焦點關閉下面出來li標籤的選項，這裡用的是綁定document一個點擊事件，判斷事件的event對象，框框是不是選項li，如果不是 統統執行隱藏ul的方法 如果點擊的對象是下面的li標籤 就設定vue執行個體的v-model的變數為li的值。

 

css類比下拉框，vue擷取雙向繫結的值