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


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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
vue配置多页面的实现方法
May 22 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
小程序接口的promise化的实现方法
Dec 11 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
将二维数组转为一维数组的2种方法
2014/05/26 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python的argparse库使用详解
2018/10/09 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python制作抖音代码舞
2019/04/07 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
单位未婚证明范本
2014/01/18 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
业务总经理岗位职责
2014/02/03 职场文书
中学生自我评价范文
2014/02/08 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
工作简报怎么写
2015/07/21 职场文书
靠谱准确的求职信
2019/04/02 职场文书
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers