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


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 相关文章推荐
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
20行JS代码实现网页刮刮乐效果
Jun 23 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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基础教程 php内置函数实例教程
2012/08/21 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 文件和输入输出小结
2013/10/09 Python
python写xml文件的操作实例
2014/10/05 Python
python中enumerate函数用法实例分析
2015/05/20 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
新书吧创业计划书
2014/01/31 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
先进个人总结范文
2015/02/15 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
何玥事迹观后感
2015/06/16 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书