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 相关文章推荐
Bootstrap零基础入门教程(二)
Jul 18 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
浅谈javascript的闭包
Jan 23 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
express 项目分层实践详解
Dec 10 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
vue-router 路由传参用法实例分析
Mar 06 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php生成xml简单实例代码
2009/12/16 PHP
php include和require的区别深入解析
2013/06/17 PHP
php socket客户端及服务器端应用实例
2014/07/04 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python中的自定义函数学习笔记
2014/09/23 Python
python中列表元素连接方法join用法实例
2015/04/07 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python 回调函数和回调方法的实现分析
2016/03/23 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python之pymysql的使用小结
2019/07/01 Python
在keras中实现查看其训练loss值
2020/06/16 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
升职自荐书范文
2013/11/28 职场文书
天猫某品牌专卖店运营计划书
2014/03/21 职场文书
酒店节能降耗方案
2014/05/08 职场文书
湘江北去观后感
2015/06/15 职场文书
城南旧事电影观后感
2015/06/16 职场文书
高三物理教学反思
2016/02/20 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers