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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
js实现图片360度旋转
Jan 22 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
js实现计时器秒表功能
Dec 16 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 Javascript
Javascript如何实现扩充基本类型
Aug 26 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递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
Javascript 对象的解释
2008/11/24 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JS的replace方法介绍
2012/10/20 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
Python类中方法getitem和getattr详解
2019/08/30 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python requests模块session代码实例
2020/04/14 Python
python属于解释型语言么
2020/06/15 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
出国导师推荐信
2014/01/16 职场文书
测试工程师职业规划书
2014/02/06 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
质量安全标语
2014/06/07 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL