原生小程序开发拓展能力组件｜拓展组件库汇总（五）

Dialog

Dialog 弹窗组件。

开发建议

客户端有提供 会话框 的 api 调用方式，如无特别业务定制需求，推荐优先使用ty.showModal

属性列表

buttons 提供按钮组配置，每一项表示一个按钮，每一项的属性为

Slot

弹窗组件只有一个默认 slot 用于显示弹窗的内容

代码引入

在 page.json 中引入组件

{
  "usingComponents": {
    "mpdialog": "@tuya-miniapp/miniapp-components-plus/dialog/index"
  }
}

TYML

<view class="page__bd">
  <view class="tyui-btn-area">
    <button class="base-btn" type="primary" bind:tap="openConfirm">
      确认取消按钮
    </button>
    <button class="base-btn" type="primary" bind:tap="tapOneDialogButton">
      只有确认按钮
    </button>
  </view>
</view>
<mpdialog
  title="标题"
  show="{{showOneButtonDialog}}"
  bind:buttontap="tapDialogButton"
  buttons="{{oneButton}}"
>
  <view>这里是内容</view>
</mpdialog>
<mpdialog
  title="标题"
  show="{{dialogShow}}"
  bind:buttontap="tapDialogButton"
  buttons="{{buttons}}"
>
  <view
    >这里是内容，超过部分会自动换行换行。这里是内容，超过部分会自动换行换行</view
  >
</mpdialog>

js

Page({
  data: {
    dialogShow: false,
    showOneButtonDialog: false,
    buttons: [{ text: '取消' }, { text: '确定' }],
    oneButton: [{ text: '确定' }],
  },
  openConfirm: function () {
    this.setData({
      dialogShow: true,
    });
  },
  tapDialogButton(e) {
    this.setData({
      dialogShow: false,
      showOneButtonDialog: false,
    });
  },
  tapOneDialogButton(e) {
    this.setData({
      showOneButtonDialog: true,
    });
  },
});