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


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控件的相对独立性
Sep 06 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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 之入门篇
2006/12/04 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JS实现拖动滚动条评分的效果代码分享
2016/09/29 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
python计算两个数的百分比方法
2018/06/29 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python安装requests库的实例代码
2019/06/25 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
房地产融资计划书
2014/01/10 职场文书
创建学习型党组织实施方案
2014/03/29 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
健康教育主题班会
2015/08/14 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
go goth封装第三方认证库示例详解
2022/08/14 Golang
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL