弹窗

WdModal

适用场景​

用于实现基础的弹窗（对话框）展示效果。不同端支持不同

基础功能​

1. 弹窗模板​

该组件提供了几套常用弹窗模板，如默认弹窗、确认弹窗、提示弹窗、活动弹窗等。

如下默认弹窗、提示弹窗、确认弹窗、活动弹窗，同时您也可以按需进行样式调整：

2. 移动端弹窗位置​

移动端时，可以设置将弹窗放于页面底部。

如活动场景效果如下：

3. 打开/关闭弹窗​

• 在弹窗的【默认打开弹窗】属性，控制首次弹窗的开关。

• 在【事件-组件方法】中调用弹窗的打开/关闭方法，可动态控制弹窗开关。

• 打开或关闭弹窗时，您可以配置 info 为传入的参数，传入后通过$w.modal1.openInfo或$w.modal1.closeInfo获取参数。其中 modal1 是弹窗组件 ID。

示例：按钮打开弹窗​

1. 加入按钮和弹窗组件

2. 选中弹窗组件，设置弹窗为默认关闭，关闭弹窗属性【默认打开弹窗】

3. 选中按钮组件，添加点击事件

4. 选择要打开的弹窗，和执行方法。然后选中页面的组件，调用【打开弹窗 open】方法。

即可实现点击按钮打开弹窗，如下图：

属性说明​

组件接收的外部传入的属性

事件说明​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

属性 API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

方法 API​

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

样式 API​

通过样式 API，可以覆盖组件中内部元素的样式来实现自定义，例如在低代码编辑器中中通过 #wd-page-root .wd-btn 即可为所有的按钮组件编写样式，通过 :scope 可以控制单个组件样式， 详细说明请参考样式 API

      :scope.wd-modal  {
        /* 在这里编写CSS 样式 */
      }
    

      :scope.wd-pc-modal  {
        /* 可以为 PC 端的编写样式 */
      }
    

      :scope.wd-h5-modal  {
        /* 在这里编写CSS 样式 */
      }
    

      :scope.wd-mp-modal  {
        /* 可以为 小程序 端的编写样式 */
      }
    

      :scope .wd-modal-mask  {
        /* 可以为遮罩层编写样式 */
        background-color: rgba(0, 0, 0, 0.5)
      }
    

      :scope .wd-modal-content  {
        /* 可以为主体容器编写样式 */
        inset-inline-start: auto;
        inset-inline-end: 0;
      }
    

      :scope .wd-modal-bd__hd .wd-typography {
        /* 可以为标题区编写样式 */
        font-size: 20px;
        color: #333;
      }
    

      :scope .wd-modal-bd__main  {
        /* 可以为内容区编写样式 */
      }
    

      :scope .wd-modal-bd__ft  {
        /* 可以为按钮区编写样式 */
        justify-content: flex-start;
      }
    

了解样式 API

常见问题​

如何实现局部滚动？​

可以使用滚动容器来进行展示超出范围之后需要滚动的内容。

当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时，便会出现滚动条，通过滑动滚动条滑动来查看容器内的全部内容。

注意要为滚动容器设置宽高，确保内部展示内容的宽高大于滚动容器，才可以展示滚动效果。

如果只需要横向滚动，需要确保滚动容器的宽度小于容器中的内容的宽度。

如果只需要纵向滚动，需要确保滚动容器的高度小于容器中的内容的宽度。