mpvue項目中使用第三方UI組件庫的方法

標籤：def   方法   複製   net   簡介   detail   for   前端   基於   

簡介

小程式上線已有一年多時間啦，自美團的mpvue(基於 Vue.js 的小程式開發架構，從底層支援 Vue.js 文法和構建工具體系)問世也過去了好幾個月。

前端技術日新月異，小程式的UI架構也層出不窮。

例如： 

WeUI: 一套同原生視覺體驗一致的基礎樣式庫，由官方設計團隊為內網頁和小程式量身設計，令使用者的使用感知更加統一。(github)

ZanUI: 有贊移動 Web UI 規範 ZanUI 的小程式現實版本。(github)

iView  Weapp:  與iView（基於 Vue.js 的開源 UI 組件庫）同一組織產出的小程式UI組件庫。(github)

前言

項目使用的外掛程式：

mpvue-entry: 集中式頁面配置，自動產生各頁面的入口檔案，最佳化目錄結構，支援新增頁面熱更新。(github)

mpvue-router-patch: 在 mpvue 中使用 vue-router 相容的路由寫法。(github)

如何在mpvue中配置使用第三方的UI組件庫呢？

（PS：本文使用iView  Weapp樣本）

1. 將第三方組件庫從github複製到本地；

2. 將iview-weapp中的dist檔案夾(此處我重新命名為iView,以便區分)複製到mpvue項目的輸出目錄中(預設是dist，編譯後的vue代碼在此)；

iView目錄中，全都是組件

3. 開啟mpvue項目中的router/routes.js,在需要使用組件的地方，寫入相應的配置

4. 在vue頁面中使用組件

5. 效果如下

具體樣本：

使用：search這部分是利用小程式input組件實現，在下面的樣本中主要使用了focus和bindinput兩個屬性，由於mpvue從底層支援 Vue.js 文法和構建工具體系，因此可以用vue的v-model進行雙向資料繫結，樣本如下：

?

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788

<template> <div class="page"> <div class="page__hd">  <div class="page__title">SearchBar</div>  <div class="page__desc">搜尋欄</div> </div> <div class="page__bd">  <div class="weui-search-bar">  <div class="weui-search-bar__form">   <div class="weui-search-bar__box">   <icon class="weui-icon-search_in-box" type="search" size="14"></icon>   <input type="text" class="weui-search-bar__input" placeholder="搜尋" v-model="inputVal" :focus="inputShowed" @input="inputTyping" />   <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">    <icon type="clear" size="14"></icon>   </div>   </div>   <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">   <icon class="weui-icon-search" type="search" size="14"></icon>   <div class="weui-search-bar__text">搜尋</div>   </label>  </div>  <div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">取消</div>  </div>  <div class="weui-cells searchbar-result" v-if="inputVal.length > 0">  <navigator url="" class="weui-cell" hover-class="weui-cell_active">   <div class="weui-cell__bd">   <div>即時搜尋文本</div>   </div>  </navigator>  <navigator url="" class="weui-cell" hover-class="weui-cell_active">   <div class="weui-cell__bd">   <div>即時搜尋文本</div>   </div>  </navigator>  <navigator url="" class="weui-cell" hover-class="weui-cell_active">   <div class="weui-cell__bd">   <div>即時搜尋文本</div>   </div>  </navigator>  <navigator url="" class="weui-cell" hover-class="weui-cell_active">   <div class="weui-cell__bd">   <div>即時搜尋文本</div>   </div>  </navigator>  </div> </div> </div></template> <script>export default { data() { return {  inputShowed: false,  inputVal: "" } }, methods: { showInput() {  this.inputShowed = true; }, hideInput() {  this.inputVal = ‘‘;  this.inputShowed = false }, clearInput() {  this.inputVal = ‘‘; }, inputTyping(e) {  console.log(e);  this.inputVal = e.mp.detail.value } }}</script> <style scoped>.searchbar-result { margin-top: 0; font-size: 14px;}.searchbar-result:before { display: none;}.weui-cell { padding: 12px 15px 12px 35px;}</style>

效果：

mpvue項目中使用第三方UI組件庫的方法