背景
开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个…
效果大概长这个样
点击指定按钮，弹出模态框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭。
开始封装
上图所示文件内容放入项目即可 （路径自己高兴着来）
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弹窗封装的方法 ，可以点击查看。
总结
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。