钉钉小程序组件之自定义模态框（弹窗封装实现）

2023-10-26 14:35:34

原文:钉钉小程序组件之自定义模态框（弹窗封装实现）

背景

开发钉钉小程序中需要用到模态框文档里也没有自己搞一个…

效果大概长这个样

点击指定按钮，弹出模态框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭。

开始封装

上图所示文件内容放入项目即可（路径自己高兴着来）

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

小结

激动的心，颤抖的手。。。

总之先阅读官方文档
钉钉开放平台 => 前端API => 小程序 => 框架 => 自定义组件
https://ding-doc.dingtalk.com/doc#/dev/develop-custom-component

本案例相对简单，业务复杂的需求看看文档基本都能实现。

欢迎点赞收藏…