mpvue项目中使用第三方UI组件库的方法

更新时间：2018年09月30日 14:55:35 作者：車句

这篇文章主要介绍了mpvue项目中使用第三方UI组件库的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

说明

整理了一份简单的源码，放在github，有需要参考的同学自取~

简介

微信小程序上线已有一年多时间啦，自美团的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进行双向数据绑定，示例如下：

 <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>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue3.0 上手体验
vue3.0 beta 版本已经发布有一段时间了，今天这篇文章就带大家体验一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vue中el-table实现无限向下滚动懒加载数据
一次性的加载全部的数据,并且将其渲染到页面上,就会导致页面卡顿,往往采用分页和无限滚动的方式来展示,本文主要介绍了vue中el-table实现无限向下滚动懒加载数据,感兴趣的可以了解一下
2023-12-12
web前端vue filter 过滤器
vue的过滤器通常用在一些常见的文本格式化，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。本文给大家介绍了web前端vue filter 过滤器的相关知识，感兴趣的朋友一起看看吧
2018-01-01
vue3时间插件之Moment.js使用教程
这篇文章主要给大家介绍了关于vue3时间插件之Moment.js使用的相关资料,需要的朋友可以参考下
2023-09-09
vue3 组件与API直接使用的方法详解(无需import)
这篇文章主要介绍了vue3 组件与API直接使用的方法(无需import)，主要包括vue3自动导入和API的自动引入问题，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-09-09
Spring Boot/VUE中路由传递参数的实现代码
在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。这篇文章主要介绍了Spring Boot/VUE中路由传递参数,需要的朋友可以参考下
2018-03-03
Vue2 中自定义图片懒加载指令 v-lazy实例详解
这篇文章主要为大家介绍了Vue2 中自定义图片懒加载指令 v-lazy实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
vue3无法显示element-plus问题及解决
这篇文章主要介绍了vue3无法显示element-plus问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
vue element封装form表单的实现
本文主要介绍了vue element封装form表单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-06-06
Vue.js 2.0窥探之Virtual DOM到底是什么？
大家可能听说Vue.js 2.0已经发布，并且在其中新添加如了一些新功能。其中一个功能就是“Virtual DOM”。那么下面这篇文章就来给大家详细介绍Vue.js 2.0中的Virtual DOM到底是什么？需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02