f2 柱状图滚动 钉钉小程序_详解钉钉小程序组件之自定义模态框（弹窗封装实现）...
背景
開發(fā)釘釘小程序中需要用到模態(tài)框 文檔里也沒有 自己搞一個(gè)…
效果大概長(zhǎng)這個(gè)樣
點(diǎn)擊指定按鈕，彈出模態(tài)框，里面的內(nèi)容可以自定義，可以是簡(jiǎn)單的文字提示，也可以輸入框等復(fù)雜布局。操作完點(diǎn)擊取消或確定關(guān)閉。
開始封裝
上圖所示文件內(nèi)容放入項(xiàng)目即可 (路徑自己高興著來)
modal.js
內(nèi)容不多 但都是精華
/**
* 自定義modal浮層
* 使用方法：
*
你自己需要展示的內(nèi)容
屬性說明：
show： 控制modal顯示與隱藏
height：modal的高度
onCancel：點(diǎn)擊取消按鈕的回調(diào)函數(shù)
onSubmit：點(diǎn)擊確定按鈕的回調(diào)函數(shù)
*/
Component({
/**
* 組件的屬性列表
*/
props: {
// modal的默認(rèn)高度
height: '60%',
//是否顯示modal
show: false,
// submit()
onSubmit:(data) => console.log(data),
// onCancel()
onCancel:(data) => console.log(data),
},
/**
* 組件的初始數(shù)據(jù)
*/
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 屬性設(shè)置屬性默認(rèn)值， 調(diào)用的時(shí)候傳遞指定值即可
modal.json
這就是個(gè)申明 啥也不是
{
"component": true,
"usingComponents": {}
}
開發(fā)者需要在 .json 文件中指明自定義組件的依賴
modal.acss
這玩意我一個(gè)寫后端的調(diào)了半天才勉強(qiáng)看得下去 求大佬改版發(fā)我
.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
敲重點(diǎn) slot 標(biāo)簽
可以將 slot 理解為槽位，default slot就是默認(rèn)槽位，如果調(diào)用者在組件標(biāo)簽之間不傳遞 axml，則最終會(huì)將默認(rèn)槽位渲染出來。而如果調(diào)用者在組件標(biāo)簽之間傳遞有 axml，則使用其替代默認(rèn)槽位，進(jìn)而組裝出最終的 axml 以供渲染。
簡(jiǎn)而言之 你在調(diào)用的時(shí)候所編輯的axml都被塞進(jìn)slot里面了
取消
確定
使用
這個(gè)相對(duì)簡(jiǎn)單鳥
page/xx/page.json
首先申明我要調(diào)用這個(gè)組件 標(biāo)簽名我就叫modal 路徑自己別搞錯(cuò)就好
{
"usingComponents": {
"modal": "/page/components/modal/modal"
}
}
page/xx/page.axml
就是這樣 喵~
你自己的布局
page/xx/page.js
這個(gè)你就寫你自己的邏輯就沒毛病了
let app = getApp();
Page({
data: {
showSearchModal: false,
},
onLoad() {
},
searchModalCancel(){
this.setData({
showSearchModal: false,
});
dd.alert({
title: '提示',
content: '用戶點(diǎn)擊了取消',
});
},
searchModalSubmit(){
this.setData({
showSearchModal: false,
});
dd.alert({
title: '提示',
content: '用戶點(diǎn)擊了提交',
buttonText: '我知道了',
});
},
});
小結(jié)
激動(dòng)的心，顫抖的手。。。
總之先閱讀官方文檔
釘釘開放平臺(tái) => 前端API => 小程序 => 框架 => 自定義組件
https://ding-doc.dingtalk.com/doc#/dev/develop-custom-component
本案例相對(duì)簡(jiǎn)單，業(yè)務(wù)復(fù)雜的需求看看文檔基本都能實(shí)現(xiàn)。
總結(jié)
到此這篇關(guān)于釘釘小程序組件之自定義模態(tài)框(彈窗封裝實(shí)現(xiàn))的文章就介紹到這了,更多相關(guān)小程序組件自定義模態(tài)框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
總結(jié)
以上是生活随笔為你收集整理的f2 柱状图滚动 钉钉小程序_详解钉钉小程序组件之自定义模态框（弹窗封装实现）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
