小程序开发之模态框组件封装


Posted in Javascript onApril 23, 2020

本文实例为大家分享了小程序模态框组件的封装具体代码,供大家参考,具体内容如下

一、前言

对于模态框肯定大家都知道,诸如:Bootstartp、element-ui、layui等等都有自己的弹出层,并可以之定义内容,但是小程序的弹出层原生的太简单,那么我们如果自定义呢?

其实很简单,就是一个遮罩、一个view内容区就搞定了!接下来看一下我自己封装后的模态框效果:

小程序开发之模态框组件封装

感觉还可以哈!

二、模态框组件的使用

1.先在使用页面的json注册该组件

{
 "navigationBarTitleText": "XXXX",
 "usingComponents": {
 "print-popups": "/components/popups/popups"
 }
}

2.使用组件

<view>
 <print-popups ifOpen='{{modelStatus}}' bind:ifClose='closeModel'>
 <view slot='popups_main' class='popups_main'>
 <view class='popups_item'>添加新设备</view>
 <view class='popups_item print_name'>
 <input class='print_input' value='设备1' auto-focus />
 <view class='print_tip'>(点击设备可编辑)</view>
 </view>
 <view class='popups_item print_id'>
 <input placeholder="请输入新添设备ID" />
 <view class='print_id_check'>可用</view>
 </view>
 <button class='popups_item print_btn' type='primary' size='mini'>添加</button>
 </view>
 </print-popups> 
</view>

3.添加隐藏/显示方法

Page({
 /**
 * 页面的初始数据
 */
 data: {
 modelStatus: false
 },
 /**
 * 点击按钮打开模态框
 */
 openModel () {
 const modelStatus = !this.modelStatus
 this.setData({ modelStatus})
 },
 /**
 * 子组件触发的事件
 */ 
 closeModel (event) {
 console.log(event.detail.value)
 this.setData({
 modelStatus: event.detail.value
 })
 }
})

三、模态框组件源码

1.Json文件

{
 "component": true,
 "usingComponents": {}
}

2.wxml文件

需要在阿里图标库找一张close.png的图片。

<!--components/popups/popups.wxml-->
<view wx:if="{{ifOpen}}">
 <view class='popups_shade' bindtap='popupsClose'></view>
 <view class='popups_content'>
 <image src='./images/close.png' class='popups_close' bindtap='popupsClose'></image>
 <slot name='popups_main'/>
 </view>
</view>

3.wxss文件

/* components/popups/popups.wxss */
/* 遮罩 */
.popups_shade {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 1000;
 background: #000;
 opacity: 0.7;
 overflow: hidden;
}
/* 弹出层内容 */
.popups_content {
 width: 500rpx;
 height: 350rpx;
 overflow: hidden;
 position: fixed;
 top: 0px;
 left: 0px;
 bottom: 0px;
 right: 0px;
 margin: auto;
 z-index: 1001;
 background: #FAFAFA;
 border-radius: 5px;
}
.popups_close {
 width: 30rpx;
 height: 30rpx;
 position: absolute;
 right: 3px;
 top: 3px;
}

4.js文件

// components/popups/popups.js
Component({
 options: {
 multipleSlots: true
 },
 /**
 * 组件的属性列表
 */
 properties: {
 ifOpen: Boolean
 },

 /**
 * 组件的初始数据
 */
 data: {
 
 },

 /**
 * 父子组件通信
 * 组件的方法列表
 */
 methods: {
 popupsClose () {
 console.log('关闭弹出层' + this.properties.ifOpen)
 this.triggerEvent('ifClose', { value: !this.properties.ifOpen})
 }
 }
})

四、思路

主要是使用slot插槽可以不需要定义内容,可以在使用组件的页面自定义,这样就可以很好提高扩展性!

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
详解Vue3中对VDOM的改进
Apr 23 #Javascript
微信小程序实现滑动操作代码
Apr 23 #Javascript
微信小程序图片右边加两行文字的代码
Apr 23 #Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 #Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 #Javascript
JS eval代码快速解密实例解析
Apr 23 #Javascript
浅谈vue权限管理实现及流程
Apr 23 #Javascript
You might like
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP的自定义模板引擎
2017/03/24 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
JS跨域代码片段
2012/08/30 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
python3实现短网址和数字相互转换的方法
2015/04/28 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python数据存储之 h5py详解
2019/12/26 Python
python在地图上画比例的实例详解
2020/11/13 Python
假日旅行社实习自我鉴定
2013/09/24 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
三字经教学反思
2014/04/26 职场文书
商家认证委托书格式
2014/10/16 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
实习感想范文
2015/08/10 职场文书
《七律·长征》教学反思
2016/02/16 职场文书