背景

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

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

開始封裝

上圖所示檔案內容放入專案即可 （路徑自己高興著來）

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.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,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,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,content: '使用者點選了提交',buttonText: '我知道了',});

小結
激動的心，顫抖的手。。。
總之先閱讀官方文件
釘釘開放平臺 => 前端API => 小程式 => 框架 => 自定義元件
https://ding-doc.dingtalk.com/doc#/dev/develop-custom-component

本案例相對簡單，業務複雜的需求看看文件基本都能實現。

關於微信小程式實現自定義modal彈窗封裝的方法，可以點選檢視。

總結

到此這篇關於釘釘小程式元件之自定義模態框（彈窗封裝實現）的文章就介紹到這了,更多相關小程式元件自定義模態框內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！