詳解釘釘小程序組件之自定義模態(tài)框怎么實現(xiàn)

這篇文章將為大家詳細(xì)講解有關(guān)詳解釘釘小程序組件之自定義模態(tài)框怎么實現(xiàn)，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

背景

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

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

開始封裝

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

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ào)函數(shù)
 onSubmit：點擊確定按鈕的回調(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)用的時候傳遞指定值即可

modal.json
這就是個申明 啥也不是

 {
 "component": true,
 "usingComponents": {}
 }

開發(fā)者需要在 .json 文件中指明自定義組件的依賴

modal.acss
這玩意我一個寫后端的調(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
敲重點 slot 標(biāo)簽

可以將 slot 理解為槽位，default slot就是默認(rèn)槽位，如果調(diào)用者在組件標(biāo)簽之間不傳遞 axml，則最終會將默認(rèn)槽位渲染出來。而如果調(diào)用者在組件標(biāo)簽之間傳遞有 axml，則使用其替代默認(rèn)槽位，進(jìn)而組裝出最終的 axml 以供渲染。

簡而言之 你在調(diào)用的時候所編輯的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>

使用
這個相對簡單鳥

page/xx/page.json
首先申明我要調(diào)用這個組件 標(biāo)簽名我就叫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: '我知道了',
 });
 },
});

關(guān)于“詳解釘釘小程序組件之自定義模態(tài)框怎么實現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。