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 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
js实现网站首页图片滚动显示
Feb 04 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php 无限分类的树类代码
2009/12/03 PHP
php继承的一个应用
2011/09/06 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
JS与C#编码解码
2013/12/03 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
聊聊Python中的pypy
2018/01/12 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
Django CBV类的用法详解
2019/07/26 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Python库安装速度过慢解决方案
2020/07/14 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
ktv总经理岗位职责
2014/02/17 职场文书
大型会议接待方案
2014/03/01 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Python+Appium新手教程
2021/04/17 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
python三子棋游戏
2022/05/04 Python