Mint-ui的複選框列表Checklist和Radioui
因爲我在main.js裏已經引用了所有的組件了,這裏就再也不按需引入了。this
一直想着如何將本身的數據添加到 label 和 value裏面,後面發現能夠用push的方式,以下圖:spa
<mt-checklist
title="" align="right"
v-model="bankList"
:options="bankoptions">
</mt-checklist>
<!-- {{bankList}} 對應value值-->code
export default { name: 'DeleteBank', data () { return { bankList:[], showcards:[], bankoptions:[ // { // label: '中國銀行:9555 **** **** 3269', // value: '3' // }, // { // label: '中國銀行:9555 **** **** 3269', // value: '2' // } ] } }, created(){ this.del(); }, methods:{ del(){ this.$http.get(this._getUrl()+"User/show_card").then((response) => { let showcard = response.body if(showcard.error_code==200){ this.showcards=showcard.data for(var i=0;i<this.showcards.length;i++){ let card={label:this.showcards[i].bank_name+' : '+this.showcards[i].cardnum,value:String(this.showcards[i].id)} this.bankoptions.push(card) } } }); },
}
}
Mint-ui的日期時間選擇器Datetime pickerblog
我設置了當前時間爲默認時間,但是不知道怎麼將過時的時間設置爲不可選。事件
<!-- 日期修改 --> <div class="time-date"> <mt-datetime-picker ref="pickerstart" type="datetime" v-model="pickerValuestart"></mt-datetime-picker> <mt-datetime-picker ref="pickerend" type="datetime" v-model="pickerValueend"></mt-datetime-picker> <div class="starttime" @click="openPickerstart()"><span>開始時間</span>{{getLocalTime(new Date(pickerValuestart).getTime()/1000)}}</div> <div class="endtime" @click="openPickerend()"><span>結束時間</span>{{getLocalTime(new Date(pickerValueend).getTime()/1000)}}</div> </div>
data() { return { pickerValuestart:this.getLocalTime(Date.parse(new Date())/1000), pickerValueend:this.getLocalTime(Date.parse(new Date())/1000) } }
openPickerstart() { this.$refs.pickerstart.open(); }, openPickerend() { this.$refs.pickerend.open(); },
這2個事件openPickerstart,openPickerend起到綁定數據值的變化,但取出來的時間戳格式不對,因此我進行了轉換。get
後來發現一個問題,日期窗口滾動選擇日期時,底下頁面的滾動條也會觸發滾動,這致使選擇日期時遲鈍或失效,後面用下面的方法解決了it
//這個是監聽事件,監聽類型touchmove觸摸移動事件 .preventDefault()不要執行與事件關聯的默認動做 禁止了默認滾動事件了
created() { this.$nextTick(() => { document.querySelectorAll(".mint-datetime").forEach(el => { el.addEventListener('touchmove',function(e) { e.preventDefault() }, false); }) }) },