Dialog 弹出框

使用指南

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-dialog": "path/to/zanui-weapp/dist/dialog/index"
  4.   }
  5. }

在需要使用的页面里引入组件库模板和脚本

  1. <zan-dialog id="zan-dialog-test"></zan-dialog>
  1. const Dialog = require('path/to/zanui-weapp/dist/dialog/dialog');
  3. Page({
  4.   // ...
  5.   // 可以在任意方法里直接调用，即可唤起
  6.   handleClick() {
  7.     Dialog({
  8.       title: '',
  9.       message: '',
  10.       selector: '#zan-dialog-test'
  11.     }).then((res) => {
  12.       console.log(res);
  13.     })
  14.   }
  15. });

代码演示

按钮展示方式

按钮可以通过设置 buttonsShowVertical 来切换按钮纵向展示或者横向并排展示，方便各种场景下使用。

  1. Dialog({
  2.   message: '这是一个模态弹窗',
  3.   buttonsShowVertical: true,
  4.   showCancelButton: true
  5. });

自定义展示按钮

dialog 支持自定义展示按钮。设置 buttons 数组即可实现。自定义按钮的点击后，都会在 resolve 状态中监听到。

  1. Dialog({
  2.   message: '这是一个模态弹窗',
  3.   buttons: [{
  4.     // 按钮文案
  5.     text: '现金支付',
  6.     // 按钮文字颜色
  7.     color: 'red',
  8.     // 按钮类型，用于在 then 中接受点击事件时，判断是哪一个按钮被点击
  9.     type: 'cash'
  10.   }, {
  11.     text: '微信支付',
  12.     color: '#3CC51F',
  13.     type: 'wechat'
  14.   }, {
  15.     text: '取消',
  16.     type: 'cancel'
  17.   }]
  18. }).then(({ type }) => {
  19.   // type 可以用于判断具体是哪一个按钮被点击
  20.   console.log('=== dialog with custom buttons ===', `type: - {type}`);
  21. });

具体参数

参数 说明 类型 默认值 必须
message 弹窗内容 String - 必须
selector 显示弹窗对应组件节点的选择器 String - 必须
title 弹窗标题 String -
buttonsShowVertical 按钮是否纵向展示 Boolean false
showConfirmButton 是否展示确认按钮 Boolean true
confirmButtonText 确认按钮文案 String 确定
confirmButtonColor 确认按钮文字颜色 String #3CC51F
showCancelButton 是否展示取消按钮 Boolean false
cancelButtonText 取消按钮文案 String 取消
cancelButtonColor 取消按钮文字颜色 String #333
buttons 自定义按钮列表，设置以后，以上关于 确认 和 取消 按钮的设置全部不生效。 Array -

buttons 数据格式

  1. [{
  2.   // 按钮文案
  3.   text: '现金支付',
  4.   // 按钮文字颜色
  5.   color: 'red',
  6.   // 按钮类型，用于在 then 中接受点击事件时，判断是哪一个按钮被点击
  7.   type: 'cash'
  8. }, {
  9.   // 按钮文案
  10.   text: '微信支付',
  11.   // 按钮文字颜色
  12.   color: '#3CC51F',
  13.   // 按钮类型，用于在 then 中接受点击事件时，判断是哪一个按钮被点击
  14.   type: 'wechat'
  15. }, {
  16.   // 按钮文案
  17.   text: '取消',
  18.   // 按钮类型，用于在 then 中接受点击事件时，判断是哪一个按钮被点击
  19.   type: 'cancel'
  20. }]

Dialog 弹出框 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/interactive/dialog