iView框架問題整理小結(jié)

更新時間：2018年10月16日 11:17:59 作者：更好的自己520

這篇文章主要介紹了iView框架問題整理小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

總結(jié)1：**import Vue from ‘vue';什么意思？

在js中，是加載vue模塊并輸入變量Vue import后面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，如果是模塊名帶有路徑，那么必須有配置文件，告訴js引擎該模塊的位置

總結(jié)2：iView如何實現(xiàn)頁面跳轉(zhuǎn)？

使用vue-router實現(xiàn)單頁應用的跳轉(zhuǎn)

使用流程：

1：引入vue-router <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2：定義VueRouter對應的屬性例如：path和template

3：使用<router-link to="/login">登錄</router-link>

總結(jié)3：iview本地文件上傳？

視圖層：

<img :src="preview_pic_src" v-if="preview_pic_src!=''">
     <input type="file" @change="preview_pic()" ref="weibo_file" >

JS層：

   preview_pic:function () {
   // 預覽圖片
   var file = this.$refs.weibo_file.files[0]
    // 1、創(chuàng)建一個reader
    var fr = new FileReader()
    // 2、將圖片將轉(zhuǎn)成 base64 格式
    fr.readAsDataURL(file)
    // 3、讀取成功后的回調(diào)
    var self = this
    fr.onloadend = function() {
      self.preview_pic_src = this.result
    }
  },

總結(jié)4：iview自定義組件開發(fā)？

import sliderBox from '.slider.vue'
vue.compenent('組件名稱'sliderBox)

總結(jié)5 TimePicker 和 DatePicker 兩種日期選擇組件雖然方便，但使用時需要注意：使用DatePicker 綁定on-change事件，可以通過：

on-change:function(date) {
 console.log(date)
}

獲取到當前選擇的日期，但TimePicker 這樣做每次更改時、分、秒都會觸發(fā)此事件，建議給TimePicker 加上confirm 選項，并用on-ok事件獲取當前選擇的時間（注意要進行Date的格式化）

總結(jié)6.對于一些組件如<Menu>,<Page>，如果需要手動控制打開的菜單，當前頁碼，需要給組件設置ref屬性，然后在方法中使用this.$refs.xxx = "xxx"進行控制

<Page ref="dataPage" :total="recordData.length" :page-size="recordPageCapacity" show-elevator class="fr" style="margin-top: 10px;" @on-change="recordChangePage"></Page>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: