詳解釘釘小程序組件之自定義模態框怎么實現

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

背景

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

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

開始封裝

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

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: '我知道了',
 });
 },
});

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