1. 程式人生 > >mint-ui vue雙向綁定

mint-ui vue雙向綁定

com put 真的 otto class min lac action node

由於最近項目需求,用上了mint-ui來重構移動端頁面,從框架本身來講我覺得很強大了,用起來也很不錯,但是文檔就真的是,,,,讓我無言以對,給的api對於我們這些小菜鳥來講真的是處處是坑呀(ps:用vue的主要目的是方便數據雙向綁定,所以並沒有配置vue的環境,webpack,node等)

mint-ui Toast

官網文檔示例:

1 Toast({
2   message: ‘Upload Complete‘,
3   position: ‘bottom‘,
4   duration: 5000
5 });

實際應用:

1 this.$toast({
2                    message: ‘提示信息‘,
3 position: ‘middle‘, 4 duration: 3000 5 });

mint-ui MessageBox

官網文檔示例:

1 MessageBox({
2   title: ‘Notice‘,
3   message: ‘Are you sure?‘,
4   showCancelButton: true
5 });

實際應用:

 this.$messagebox.confirm(‘確定執行此操作?‘)
                                .then(action 
=> { this.cancel = false; }) .catch(action => { this.cancel = true; });

mint-ui Field

mt-field type="date"初始化的時候預置值格式

 1 <
template> 2 <mt-field label="birthday" placeholder="Input birthday" type="date" v-model="birthday"></mt-field> 3 </tempalte> 4 <script> 5 export default{ 6 data(){ 7 return{ 8 birthday:2017-06-12 9 } 10 }, 11 methods:{} 12 } 13 </script>

mint-ui Switch

事件change ,API文檔裏面寫返回一個checked:boolen值,但是直接在change事件裏面取出來的checked值卻和mt-switch綁定的value相反,所以還是只能監聽value的變化

mint-ui vue雙向綁定