时间:2021-05-25
背景
开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个…
效果大概长这个样
点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局。操作完点击取消或确定关闭。
开始封装
上图所示文件内容放入项目即可 (路径自己高兴着来)
modal.js
内容不多 但都是精华
代码使用 props 属性设置属性默认值, 调用的时候传递指定值即可
modal.json
这就是个申明 啥也不是
开发者需要在 .json 文件中指明自定义组件的依赖
modal.acss
这玩意我一个写后端的调了半天才勉强看得下去 求大佬改版发我
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 路径自己别搞错就好
page/xx/page.axml
就是这样 喵~
page/xx/page.js
这个你就写你自己的逻辑就没毛病了
小结
激动的心,颤抖的手。。。
总之先阅读官方文档
钉钉开放平台 => 前端API => 小程序 => 框架 => 自定义组件
https://ding-doc.dingtalk.com/doc#/dev/develop-custom-component
本案例相对简单,业务复杂的需求看看文档基本都能实现。
关于微信小程序实现自定义modal弹窗封装的方法,可以点击查看。
总结
到此这篇关于钉钉小程序组件之自定义模态框(弹窗封装实现)的文章就介绍到这了,更多相关小程序组件自定义模态框内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限
由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框。wx.
支付宝小程序官方提供的alert提示框、dialog对话框、model弹窗功能比较有限,有些都不能随意自定义修改的。如是自己就捯饬着封装了个支付宝小程序自定义弹
1.添加自定义机器人2.编写python代码请求钉钉机器人所给的webhook钉钉自定义机器人官方文档安全方式使用加签的方式:第一步,把timestamp+"\
一、钉钉群自定义机器人介绍钉钉群机器人是钉钉群的一个高级扩展功能,然而使用起来却非常简单,只有注册一个钉钉账号即可,就可以将第三方服务的信息聚合到钉钉群中,实现