mpvue項目中使用第三方UI組件庫的方法
說明
整理了一份簡單的源碼，放在github，有需要參考的同學自取~
簡介
微信小程序上線已有一年多時間啦，自美團的mpvue(基于 Vue.js 的小程序開發(fā)框架，從底層支持 Vue.js 語法和構建工具體系)問世也過去了好幾個月。
前端技術日新月異，小程序的UI框架也層出不窮。
例如：
WeUI: 一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網(wǎng)頁和微信小程序量身設計，令用戶的使用感知更加統(tǒng)一。(github)
ZanUI: 有贊移動 Web UI 規(guī)范 ZanUI 的小程序現(xiàn)實版本。(github)
iView Weapp: 與iView（基于 Vue.js 的開源 UI 組件庫）同一組織產出的微信小程序UI組件庫。(github)
前言
項目使用的插件：
mpvue-entry: 集中式頁面配置，自動生成各頁面的入口文件，優(yōu)化目錄結構，支持新增頁面熱更新。(github)
mpvue-router-patch: 在 mpvue 中使用 vue-router 兼容的路由寫法。(github)
如何在mpvue中配置使用第三方的UI組件庫呢？
（PS：本文使用iView Weapp示例）
1. 將第三方組件庫從github克隆到本地；
2. 將iview-weapp中的dist文件夾(此處我重命名為iView,以便區(qū)分)復制到mpvue項目的輸出目錄中(默認是dist，編譯后的vue代碼在此)；
iView目錄中，全都是組件
3. 打開mpvue項目中的router/routes.js,在需要使用組件的地方，寫入相應的配置
4. 在vue頁面中使用組件
5. 效果如下
具體示例：
使用：search這部分是利用小程序input組件實現(xiàn)，在下面的示例中主要使用了focus和bindinput兩個屬性，由于mpvue從底層支持 Vue.js 語法和構建工具體系，因此可以用vue的v-model進行雙向數(shù)據(jù)綁定，示例如下：
<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>
效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vuex的使用和簡易實現(xiàn)，幫助大家更好的理解和使用vuex，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細介紹了Vue3頁面如何自適應表格滾動高度,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
這篇文章主要介紹了vue activated在子組件中的使用，文章圍繞vue activated的xingu你資料講解展開內容并附上具體代碼,需要的朋友可以參考一下2021-11-11
這篇文章主要為大家詳細介紹了基于vue、react實現(xiàn)倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
vue3使用threejs實現(xiàn)3D卡片水平旋轉效果的示例代碼
這篇文章主要介紹了在vue3中使用threejs實現(xiàn)3D卡片水平旋轉效果,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-04-04
vuex是vue的狀態(tài)管理模式，主要可以解決父子組件嵌套層數(shù)較多，或者兄弟組件之間需要維護同一個狀態(tài)的情況。下面這篇文章主要給大家介紹了關于學習vuex的相關資料，需要的朋友可以參考學習，下面來一起看看吧。2017-04-04
這篇文章主要介紹了詳解vue-cli3多頁應用改造，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
vite+vue3搭建的工程實現(xiàn)批量導入store的module
這篇文章主要介紹了vite+vue3搭建的工程實現(xiàn)批量導入store的module方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用reactive導致數(shù)據(jù)失去響應式的原因和解決方案
在 Vue 的響應式系統(tǒng)中,reactive 對象是一個深度代理,它會追蹤對象屬性的變更,但如果你將整個對象重新賦值,那么 Vue 無法繼續(xù)追蹤新的對象,本文給大家介紹了使用reactive導致數(shù)據(jù)失去響應式的原因和解決方案,需要的朋友可以參考下2024-09-09
在實際開發(fā)中,多屏切換是常見的需求,尤其是在需要展示大量內容或信息時,下面我將向大家展示我是如何實現(xiàn)三屏,并通過動態(tài)按鈕控制切換屏幕的,感興趣的小伙伴跟著小編一起來看看吧2024-09-09