详解钉钉小程序组件之自定义模态框(弹窗封装实现)


Posted in Javascript onMarch 07, 2020

背景

开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个…
效果大概长这个样

点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局。操作完点击取消或确定关闭。

开始封装

上图所示文件内容放入项目即可 (路径自己高兴着来)

modal.js
内容不多 但都是精华

/**
 * 自定义modal浮层
 * 使用方法:
 * <modal show="{{showModal}}" height='80%' onCancel="modalCancel" onSubmit='modalSubmit'>
 <view>你自己需要展示的内容</view>
 </modal>
 
 属性说明:
 show: 控制modal显示与隐藏
 height:modal的高度
 onCancel:点击取消按钮的回调函数
 onSubmit:点击确定按钮的回调函数
 
 */
 
 Component({
 
 /**
 * 组件的属性列表
 */
 props: {
 // modal的默认高度
 height: '60%',
 
 //是否显示modal
 show: false,
 
 // submit()
 onSubmit:(data) => console.log(data),
 
 // onCancel()
 onCancel:(data) => console.log(data),
 },
 
 /**
 * 组件的初始数据
 */
 data: {
 
 },
 
 /**
 * 组件的方法列表
 */
 methods: {
 clickMask() {
 // this.setData({show: false})
 },
 
 cancel(e) {
 // this.setData({ show: false });
 this.props.onCancel(e);
 },
 
 submit(e) {
 // this.setData({ show: false });
 this.props.onSubmit(e);
 }
 }
 })

代码使用 props 属性设置属性默认值, 调用的时候传递指定值即可

modal.json
这就是个申明 啥也不是

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

开发者需要在 .json 文件中指明自定义组件的依赖

modal.acss
这玩意我一个写后端的调了半天才勉强看得下去 求大佬改版发我

.mask{
 position: absolute;
 top: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgba(0,0,0,0.4);
 z-index: 9999;
}

.modal-content{
 flex-direction: column;
 width: 90%;
 /* height: 80%; */
 position: fixed;
 top: 10%;
 left: 5%;
 background-color: #fff;
 border-radius: 10rpx;
}

.modal-btn-wrapper{
 display: flex;
 flex-direction: row;
 height: 100rpx;
 line-height: 100rpx;
 background-color: #fff;
 border-radius: 10rpx;
 border-top: 2rpx solid rgba(7,17,27,0.1);
}

.cancel-btn, .confirm-btn{
 flex: 1;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 font-size: 32rpx;
}

.cancel-btn{
 border-right: 2rpx solid rgba(7,17,27,0.1);
}

.main-content{
 flex: 1;
 height: 100%;
 overflow-y: hidden; 
}

modal.axml
敲重点 slot 标签

可以将 slot 理解为槽位,default slot就是默认槽位,如果调用者在组件标签之间不传递 axml,则最终会将默认槽位渲染出来。而如果调用者在组件标签之间传递有 axml,则使用其替代默认槽位,进而组装出最终的 axml 以供渲染。

简而言之 你在调用的时候所编辑的axml都被塞进slot里面了

<view class='mask' a:if='{{show}}' onTap='clickMask'>
 <view class='modal-content' style='height:{{height}}'>
 <scroll-view scroll-y class='main-content'>
 <slot></slot>
 </scroll-view>
 <view class='modal-btn-wrapper'>
 <view class='cancel-btn' style='color:rgba(7,17,27,0.6)' onTap='cancel'>取消</view>
 <view class='confirm-btn' style='color:#13b5f5' onTap='submit'>确定</view>
 </view>
 </view>
</view>

使用
这个相对简单鸟

page/xx/page.json
首先申明我要调用这个组件 标签名我就叫modal 路径自己别搞错就好

{
 "usingComponents": {
 "modal": "/page/components/modal/modal"
 }
}

page/xx/page.axml
就是这样 喵~

<modal show="{{showSearchModal}}" height='80%' onCancel="searchModalCancel" onSubmit='searchModalSubmit'>
 <view>你自己的布局</view>
</modal>

page/xx/page.js
这个你就写你自己的逻辑就没毛病了

let app = getApp();
Page({
 data: {
 showSearchModal: false,
 },
 
 onLoad() {
 },

 searchModalCancel(){
 this.setData({
 showSearchModal: false,
 });
 dd.alert({
 title: '提示',
 content: '用户点击了取消',
 });
 },

 searchModalSubmit(){
 this.setData({
 showSearchModal: false,
 });
 dd.alert({
 title: '提示',
 content: '用户点击了提交',
 buttonText: '我知道了',
 });
 },
});

小结
激动的心,颤抖的手。。。
总之先阅读官方文档
钉钉开放平台 => 前端API => 小程序 => 框架 => 自定义组件
https://ding-doc.dingtalk.com/doc#/dev/develop-custom-component

本案例相对简单,业务复杂的需求看看文档基本都能实现。

关于微信小程序实现自定义modal弹窗封装的方法 ,可以点击查看。

总结

到此这篇关于钉钉小程序组件之自定义模态框(弹窗封装实现)的文章就介绍到这了,更多相关小程序组件自定义模态框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
Vue快速实现通用表单验证的方法
Feb 24 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 #Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 #Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 #Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 #Javascript
js实现选项卡效果
Mar 07 #Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 #Javascript
js实现简单放大镜效果
Mar 07 #Javascript
You might like
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python获取目录下所有文件的方法
2015/06/01 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
微信公众号token验证失败解决方案
2019/07/22 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
html5与css3小应用
2013/04/03 HTML / CSS
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
档案接收函范文
2014/01/10 职场文书
企业项目策划书
2014/01/11 职场文书
先进党支部事迹材料
2014/01/13 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
服务质量承诺书
2014/03/27 职场文书
化学专业自荐信
2014/05/28 职场文书
护士求职信
2014/07/05 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
升学宴家长答谢词
2015/09/29 职场文书