詳解釘釘小程序組件之自定義模態框（彈窗封裝實現）

背景

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

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

開始封裝

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

modal.js
內容不多 但都是精華

1. /**
2. * 自定義modal浮層
3. * 使用方法：
4. * <modal show="{{showModal}}" height='80%' onCancel="modalCancel" onSubmit='modalSubmit'>
5. <view>你自己需要展示的內容</view>
6. </modal>
7.  
8. 屬性說明：
9. show： 控制modal顯示與隱藏
10. height：modal的高度
11. onCancel：點擊取消按鈕的回調函數
12. onSubmit：點擊確定按鈕的回調函數
13.  
14. */
15.  
16. Component({
17.  
18. /**
19. * 組件的屬性列表
20. */
21. props: {
22. // modal的默認高度
23. height: '60%',
24.  
25. //是否顯示modal
26. show: false,
27.  
28. // submit()
29. onSubmit:(data) => console.log(data),
30.  
31. // onCancel()
32. onCancel:(data) => console.log(data),
33. },
34.  
35. /**
36. * 組件的初始數據
37. */
38. data: {
39.  
40. },
41.  
42. /**
43. * 組件的方法列表
44. */
45. methods: {
46. clickMask() {
47. // this.setData({show: false})
48. },
49.  
50. cancel(e) {
51. // this.setData({ show: false });
52. this.props.onCancel(e);
53. },
54.  
55. submit(e) {
56. // this.setData({ show: false });
57. this.props.onSubmit(e);
58. }
59. }
60. })

代碼使用 props 屬性設置屬性默認值， 調用的時候傳遞指定值即可

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

1. {
2. "component": true,
3. "usingComponents": {}
4. }

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

modal.acss
這玩意我一個寫后端的調了半天才勉強看得下去 求大佬改版發我

1. .mask{
2. position: absolute;
3. top: 0;
4. bottom: 0;
5. width: 100%;
6. height: 100%;
7. display: flex;
8. justify-content: center;
9. align-items: center;
10. background-color: rgba(0,0,0,0.4);
11. z-index: 9999;
12. }
13.  
14. .modal-content{
15. flex-direction: column;
16. width: 90%;
17. /* height: 80%; */
18. position: fixed;
19. top: 10%;
20. left: 5%;
21. background-color: #fff;
22. border-radius: 10rpx;
23. }
24.  
25. .modal-btn-wrapper{
26. display: flex;
27. flex-direction: row;
28. height: 100rpx;
29. line-height: 100rpx;
30. background-color: #fff;
31. border-radius: 10rpx;
32. border-top: 2rpx solid rgba(7,17,27,0.1);
33. }
34.  
35. .cancel-btn, .confirm-btn{
36. flex: 1;
37. height: 100rpx;
38. line-height: 100rpx;
39. text-align: center;
40. font-size: 32rpx;
41. }
42.  
43. .cancel-btn{
44. border-right: 2rpx solid rgba(7,17,27,0.1);
45. }
46.  
47. .main-content{
48. flex: 1;
49. height: 100%;
50. overflow-y: hidden;
51. }

modal.axml
敲重點 slot 標簽

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

簡而言之 你在調用的時候所編輯的axml都被塞進slot里面了

1. <view class='mask' a:if='{{show}}' onTap='clickMask'>
2. <view class='modal-content' style='height:{{height}}'>
3. <scroll-view scroll-y class='main-content'>
4. <slot></slot>
5. </scroll-view>
6. <view class='modal-btn-wrapper'>
7. <view class='cancel-btn' style='color:rgba(7,17,27,0.6)' onTap='cancel'>取消</view>
8. <view class='confirm-btn' style='color:#13b5f5' onTap='submit'>確定</view>
9. </view>
10. </view>
11. </view>

使用
這個相對簡單鳥

page/xx/page.json
首先申明我要調用這個組件 標簽名我就叫modal 路徑自己別搞錯就好

1. {
2. "usingComponents": {
3. "modal": "/page/components/modal/modal"
4. }
5. }
6.  

page/xx/page.axml
就是這樣 喵~

1. <modal show="{{showSearchModal}}" height='80%' onCancel="searchModalCancel"onSubmit='searchModalSubmit'>
2. <view>你自己的布局</view>
3. </modal>

page/xx/page.js
這個你就寫你自己的邏輯就沒毛病了

1. let app = getApp();
2. Page({
3. data: {
4. showSearchModal: false,
5. },
6.  
7. onLoad() {
8. },
9.  
10. searchModalCancel(){
11. this.setData({
12. showSearchModal: false,
13. });
14. dd.alert({
15. title: '提示',
16. content: '用戶點擊了取消',
17. });
18. },
19.  
20. searchModalSubmit(){
21. this.setData({
22. showSearchModal: false,
23. });
24. dd.alert({
25. title: '提示',
26. content: '用戶點擊了提交',
27. buttonText: '我知道了',
28. });
29. },
30. });

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

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

關于微信小程序實現自定義modal彈窗封裝的方法 ，可以點擊查看。

總結

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