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


Posted in Javascript onSeptember 30, 2018

说明

整理了一份简单的源码,放在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克隆到本地;

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

2. 将iview-weapp中的dist文件夹(此处我重命名为iView,以便区分)复制到mpvue项目的输出目录中(默认是dist,编译后的vue代码在此);

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

iView目录中,全都是组件

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

3. 打开mpvue项目中的router/routes.js,在需要使用组件的地方,写入相应的配置

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

4. 在vue页面中使用组件

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

5. 效果如下

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

具体示例:

使用: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>

效果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
mpvue将vue项目转换为小程序
Sep 30 #Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 #Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 #Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 #Javascript
使用angularjs.foreach时return的问题解决
Sep 30 #Javascript
angular将html代码输出为内容的实例
Sep 30 #Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 #Javascript
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
代码生成器 document.write()
2007/04/15 Javascript
javascript 多浏览器 事件大全
2010/03/23 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
python类继承用法实例分析
2014/10/10 Python
利用python发送和接收邮件
2016/09/27 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
如何理解transaction事务的概念
2015/05/27 面试题
新年爱情寄语
2014/04/08 职场文书
公司合作协议书范本
2014/04/18 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL