針對PC端,element-ui可謂是首選了,UI體驗效果很好。前端
element-ui 框架官網: http://element.eleme.io/#/zh-CN/component/installationvue
mint-ui 也是餓了麼出品的UI框架(主要是針對移動端),其框架官網: http://mint-ui.github.io/docs/#/en2/quickstartgit
針對移動端項目,有些爲了偷工減料,能夠選擇性的利用現成的UI框架。可是用了以後遇到了一些坑。github
1.按需加載:按需引入的方式,咱們沒必要要引入所有的UI組件,須要用什麼就選擇性的用什麼,這樣能夠減少咱們項目的體積,加快加載速度。element-ui
可是按照官網提示來操做,發現會報錯。babel
正確的作法是:框架
修改 .babelrc文件配置ui
主要是 在 plugins 後添加spa
["component", [ { "libraryName": "mint-ui", "style": true } ]]
完整的 .babelrc文件代碼爲:插件
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": [ "transform-vue-jsx", "transform-runtime", ["component", [ { "libraryName": "mint-ui", "style": true } ]] ], }
在入口文件引入須要用到的UI組件
import { DatetimePicker, Toast, Indicator, Picker, Popup } from 'mint-ui' Vue.component(DatetimePicker.name, DatetimePicker) Vue.component(Toast) Vue.component(Indicator) Vue.component(Picker.name, Picker) Vue.component(Popup.name, Popup);
好比如今我只須要用mint-ui 框架中的 DatetimePicker , Toast , Indicator , Picker , Popup
這樣就能夠全局引入這些UI組件了。
官網提示說
Vue.component(Button.name, Button) Vue.component(Cell.name, Cell) /* 或寫爲 * Vue.use(Button) * Vue.use(Cell) */
可是發現寫成 Vue.use(Toast) 在頁面初始化時會出現一個小黑點後消失,其實這是Toast樣式裏面的padding 起的做用。也就是 Vue.use(Toast) 會在頁面加載時初始化。
因此爲了不出現這個問題,採用 Vue.component 引入方式比較好。
2.使用了Toast 或者 Indicator等組件時,按照官方文檔,這樣寫就會出現「Uncaught ReferenceError: Toast is not defined」的錯誤
錯誤截圖爲
Toast 被當作是未知的變量,
此時的作法是 引入了Toast 就須要把該變量暴露到全局對象裏面
window.Toast= Toast window.Indicator= Indicator ...
3.Toast等組件避免重複彈出,按需關閉
好比 在作表單驗證時,表單輸入不能爲空,一直點 提交按鈕,會一直出現Toast 組件,而這時以前的Toast並無徹底消息,這裏前端處理的時候須要設置下標記,判斷Toast是否存在
另外 有這樣的需求,好比在 登陸頁面,用戶提交表單後,登陸成功,會跳轉到新的頁面。而這時 Toast須要過2秒才消失,在進入另一個頁面咱們會發現 此時的Toast 仍然存在。
此時的作法是:
var toastFlag = '' //把Toast賦值給一個新的變量 toastFlag = Toast("登錄成功") //beforeDestroy生命週期關閉Toast beforeDestroy:function(){ toastFlag && toastFlag.close() }
4. 引入 Datetime picker 組件,時間選擇數據少,當前時間的10年前和將來的10年
可是某些項目中,須要更多選擇年份的需求。該插件提供了 startDate 和 endDate 屬性
:startDate="new Date('1970/12/31 12:00:00')"
:endDate="new Date('2100/12/31 12:00:00')"
上面例子 意思是選擇 1970 ~ 2100 年份的數據