快捷導(dǎo)航

詳解釘釘小程序組件之自定義模態(tài)框（彈窗封裝實(shí)現(xiàn)）

更新時(shí)間：2020年03月07日 12:19:39 作者：唐帥3211

這篇文章主要介紹了釘釘小程序組件之自定義模態(tài)框（彈窗封裝實(shí)現(xiàn)）的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

背景

開發(fā)釘釘小程序中需要用到模態(tài)框文檔里也沒有自己搞一個(gè)…
效果大概長這個(gè)樣

點(diǎn)擊指定按鈕，彈出模態(tài)框，里面的內(nèi)容可以自定義，可以是簡單的文字提示，也可以輸入框等復(fù)雜布局。操作完點(diǎn)擊取消或確定關(guān)閉。

開始封裝

上圖所示文件內(nèi)容放入項(xiàng)目即可（路徑自己高興著來）

modal.js
內(nèi)容不多但都是精華

/**
 * 自定義modal浮層
 * 使用方法：
 * <modal show="{{showModal}}" height='80%' onCancel="modalCancel" onSubmit='modalSubmit'>
 <view>你自己需要展示的內(nèi)容</view>
 </modal>
 
 屬性說明：
 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 以供渲染。

簡而言之你在調(diào)用的時(shí)候所編輯的axml都被塞進(jìn)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>

使用
這個(gè)相對簡單鳥

page/xx/page.json
首先申明我要調(diào)用這個(gè)組件標(biāo)簽名我就叫modal 路徑自己別搞錯(cuò)就好

{
 "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
這個(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

本案例相對簡單，業(yè)務(wù)復(fù)雜的需求看看文檔基本都能實(shí)現(xiàn)。

關(guān)于微信小程序?qū)崿F(xiàn)自定義modal彈窗封裝的方法，可以點(diǎn)擊查看。

總結(jié)

到此這篇關(guān)于釘釘小程序組件之自定義模態(tài)框（彈窗封裝實(shí)現(xiàn)）的文章就介紹到這了,更多相關(guān)小程序組件自定義模態(tài)框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: