介绍/* *
,*自定义模态浮层
,*使用方法:
,* & lt; modal 显示=皗{showModal}}“,身高=& # 39;80% & # 39;,虚=癿odalCancel", onSubmit=& # 39; modalSubmit& # 39;比;
,& lt; view>你自己需要展示的内容& lt;/view>
,& lt;/modal>
,
,属性说明:
,表明:控制模式显示与隐藏
,高度:模态的高度
,虚:点击取消按钮的回调函数
,onSubmit:点击确定按钮的回调函数
,
,*/,
,组件({
,/* *
,*组件的属性列表
,*/,道具:{
,//模态的默认高度
,高度:& # 39;60% & # 39;
,
,//是否显示模态
,表明:假的,
,
,//提交()
,onSubmit:(数据),=祝辞,console.log(数据),
,
,//虚()
,虚:(数据),=祝辞,console.log(数据),
},
,/* *
,*组件的初始数据
,*/,数据:{
,
},
,/* *
,*组件的方法列表
,*/,方法:{
,clickMask (), {
,//this.setData({显示:假})
},
,
,取消(e) {
,//this.setData({,表明:false });
,this.props.onCancel (e);
},
,
,提交(e) {
,//this.setData({,表明:false });
,this.props.onSubmit (e);
,}
,}
之前,}) , {
,“component":没错,
,“usingComponents": {}
以前,} .mask {
,位置:绝对;
,上图:0;
,底部:0;
,宽度:100%;
,高度:100%;
,显示:flex;
,justify-content:中心;
,对齐项目:中心;
,背景颜色:rgba (0, 0, 0, 0.4);
,z - index: 9999;
}
.modal-content {
,flex-direction:列;
,宽度:90%;
,/*高度:80%;*/位置:大敌;固定;
,上图:10%;
,左:5%;
,背景颜色:# fff;
,这个特性:10 rpx;
}
.modal-btn-wrapper {
,显示:flex;
,flex-direction:行;
,身高:100 rpx;
,行高:100 rpx;
,背景颜色:# fff;
,这个特性:10 rpx;
,border-top: 2 rpx solid rgba(7日,17日,27日,0.1);
}
.cancel-btn, .confirm-btn {
,flex: 1;
,身高:100 rpx;
,行高:100 rpx;
,text-align:中心;
,字体大小:32 rpx;
}
.cancel-btn {
,边境:2 rpx solid rgba(7日,17日,27日,0.1);
}
.main-content {
,flex: 1;
,高度:100%;
,overflow-y:,隐藏;
} & lt; view 类=& # 39;面具# 39;,答:如果=& # 39;{{展示}}& # 39;,onTap=& # 39; clickMask& # 39;比;
,& lt; view 类=& # 39;modal-content& # 39;,风格=& # 39;高度:{{高度}}& # 39;比;
,& lt; scroll-view scroll-y 类=& # 39;main-content& # 39;比;
,& lt; slot> & lt;/slot>
,& lt;/scroll-view>
,& lt; view 类=& # 39;modal-btn-wrapper& # 39;比;
,& lt; view 类=& # 39;cancel-btn& # 39;,风格=& # 39;颜色:rgba(7日,17日,27日,0.6)& # 39;,onTap=& # 39;取消# 39;在取消& lt;/view>
,& lt; view 类=& # 39;confirm-btn& # 39;,风格=& # 39;颜色:# 13 b5f5& # 39;, onTap=& # 39;提交# 39;祝辞确定& lt;/view>
,& lt;/view>
,& lt;/view>
& lt;/view>
这篇文章将为大家详细讲解有关详解钉钉小程序组件之自定义模态框怎么实现,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>背景
开发钉钉小程序中需要用到模态框文档里也没有自己搞一个…
效果大概长这个样
点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局。操作完点击取消或确定关闭。
<强>开始封装
上图所示文件内容放入项目即可(路径自己高兴着来)
模态。js
内容不多但都是精华
代码使用道具属性设置属性默认值,调用的时候传递指定值即可
模态。json
这就是个申明啥也不是
开发者需要在. json文件中指明自定义组件的依赖
模态。acss
这玩意我一个写后端的调了半天才勉强看得下去求大佬改版发我
模态。axml
敲重点槽标签
可以将槽理解为槽位,默认槽就是默认槽位,如果调用者在组件标签之间不传递axml,则最终会将默认槽位渲染出来。而如果调用者在组件标签之间传递有axml,则使用其替代默认槽位,进而组装出最终的axml以供渲染。
简而言之你在调用的时候所编辑的axml都被塞进槽里面了
使用
这个相对简单鸟
页面/xx/页面。json
