阿里云首页 移动开发平台 mPaaS

ADialog 弹窗

ADialog 弹窗文档介绍了使用该组件的不同方式以及 API 文档：

  • 在 Kylin 工程中使用该组件。
  • 在其他工程中使用，通过 ESModule 的方式导入组件。
  • API 文档 提供了 props、slots、events 的接口信息。

此外，如需查看该组件的视觉效果及示例代码，参考本文的 Demo。

Kylin

  1. <dependency component="{ ADialog }" src="@alipay/antui-vue" ></dependency>

ESModule

  1. import { ADialog } from '@alipay/antui-vue';

API 文档

props

属性 说明 类型 默认值
animation 是否开启transition boolean true
type 弹框类型，可选值为text,image string text
value 弹框的显示隐藏状态，支持v-model boolean false
closable 是否露出关闭的x按钮 boolean false
title 弹框标题 string -
content 弹框内容 string -
buttons 弹框按钮组, 要求数组元素为{ [key]:string, [text]:string, [disabled]: boolean } array<{ key:string, text:string, disabled:boolean }> []
selection 选项卡对话框，设置按钮垂直分布 boolean -
preventMove 是否在显示弹框/mask时阻止document的touchmove事件 boolean true

slots

name 说明 scope
image 用于填充图像的区域 —-
- 默认占位，弹框内容，如果需要支持自定义DOM —-
button 用于按钮组的区域 buttons

events

name 说明 函数
buttonClick 当点击按钮时触发 Function(event: event, buttonKey: string): void
maskClick 当点击mask时触发 Function(event: event): void
input 当value发生变化时触发 Function(value: boolean): void
show 当value变为true时触发 Function(): void
hide 当value变为false时触发 Function(): void

Demo

标题内容

截图

代码

  1. <template>
  2.   <ADialog
  3.     title="标题文字"
  4.     :value="true"
  5.     content="辅助说明文字"
  6.     :buttons="buttons"
  7.     @buttonClick="buttonClick"
  8.   ></ADialog>
  9. </template>
  11. <script type="text/javascript">
  12.   import Toast from '../../../lib/toast';
  14.   export default {
  15.     data() {
  16.       return {
  17.         buttons: [{
  18.           key: 'cancel',
  19.           text: '取消',
  20.         }, {
  21.           key: 'ok',
  22.           text: '确定',
  23.         }],
  24.       };
  25.     },
  26.     methods: {
  27.       buttonClick(evt, key) {
  28.         Toast.show(`您点击了${key}`);
  29.       },
  30.     },
  31.   };
  32. </script>

无标题文本

截图

代码

  1. <template>
  2.   <ADialog
  3.     :value="true"
  4.     content="辅助说明文字"
  5.     :buttons="buttons"
  6.     @buttonClick="buttonClick"
  7.   ></ADialog>
  8. </template>
  10. <script type="text/javascript">
  11.   import Toast from '../../../lib/toast';
  13.   export default {
  14.     data() {
  15.       return {
  16.         buttons: [{
  17.           key: 'cancel',
  18.           text: '取消',
  19.         }, {
  20.           key: 'ok',
  21.           text: '确定',
  22.         }],
  23.       };
  24.     },
  25.     methods: {
  26.       buttonClick(evt, key) {
  27.         Toast.show(`您点击了${key}`);
  28.       },
  29.     },
  30.   };
  31. </script>

标题+题图+内容

截图

代码

  1. <template>
  2.   <ADialog
  3.     title="标题文字"
  4.     type="image"
  5.     :value="true"
  6.     content="辅助说明文字"
  7.     :buttons="buttons"
  8.     @buttonClick="buttonClick"
  9.   >
  10.     <img slot="image" src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="图片描述" />
  11.   </ADialog>
  12. </template>
  14. <script type="text/javascript">
  15.   import Toast from '../../../lib/toast';
  17.   export default {
  18.     data() {
  19.       return {
  20.         buttons: [{
  21.           key: 'cancel',
  22.           text: '取消',
  23.         }, {
  24.           key: 'ok',
  25.           text: '确定',
  26.         }],
  27.       };
  28.     },
  29.     methods: {
  30.       buttonClick(evt, key) {
  31.         Toast.show(`您点击了${key}`);
  32.       },
  33.     },
  34.   };
  35. </script>

单行动按钮：标题+题图+内容

截图

代码

  1. <template>
  2.   <ADialog
  3.     title="标题文字"
  4.     type="image"
  5.     :value="true"
  6.     content="辅助说明文字"
  7.     :buttons="buttons"
  8.     @buttonClick="buttonClick"
  9.   >
  10.     <img slot="image" src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="图片描述" />
  11.   </ADialog>
  12. </template>
  14. <script type="text/javascript">
  15.   import Toast from '../../../lib/toast';
  17.   export default {
  18.     data() {
  19.       return {
  20.         buttons: [{
  21.           key: 'action',
  22.           text: '行动按钮',
  23.         }],
  24.       };
  25.     },
  26.     methods: {
  27.       buttonClick(evt, key) {
  28.         Toast.show(`您点击了${key}`);
  29.       },
  30.     },
  31.   };
  32. </script>

单行动按钮： 标题+内容

截图

代码

  1. <template>
  2.   <ADialog
  3.     title="标题文字"
  4.     :value="true"
  5.     content="辅助说明文字"
  6.     :buttons="buttons"
  7.     @buttonClick="buttonClick"
  8.   ></ADialog>
  9. </template>
  11. <script type="text/javascript">
  12.   import Toast from '../../../lib/toast';
  14.   export default {
  15.     data() {
  16.       return {
  17.         buttons: [{
  18.           key: 'ok',
  19.           text: '确定',
  20.         }],
  21.       };
  22.     },
  23.     methods: {
  24.       buttonClick(evt, key) {
  25.         Toast.show(`您点击了${key}`);
  26.       },
  27.     },
  28.   };
  29. </script>

不可点按钮：标题+内容

截图

代码

  1. <template>
  2.   <ADialog
  3.     title="标题文字"
  4.     :value="true"
  5.     content="辅助说明文字"
  6.     :buttons="buttons"
  7.     @buttonClick="buttonClick"
  8.   ></ADialog>
  9. </template>
  11. <script type="text/javascript">
  12.   import Toast from '../../../lib/toast';
  14.   export default {
  15.     data() {
  16.       return {
  17.         buttons: [{
  18.           key: 'cancel',
  19.           text: '取消',
  20.         }, {
  21.           key: 'ok',
  22.           text: '确定',
  23.           disabled: true,
  24.         }],
  25.       };
  26.     },
  27.     methods: {
  28.       buttonClick(evt, key) {
  29.         Toast.show(`您点击了${key}`);
  30.       },
  31.     },
  32.   };
  33. </script>

选项卡

截图

代码

  1. <template>
  2.   <ADialog
  3.     :value="true"
  4.     content="内容说明当前状态、提示用户解决方案，最好不要超过两行。"
  5.     :selection="true"
  6.     :buttons="buttons"
  7.     @buttonClick="buttonClick"
  8.   ></ADialog>
  9. </template>
  11. <script type="text/javascript">
  12.   import Toast from '../../../lib/toast';
  14.   export default {
  15.     data() {
  16.       return {
  17.         buttons: [{
  18.           key: 'action1',
  19.           text: '选项1',
  20.         }, {
  21.           key: 'action2',
  22.           text: '选项2',
  23.         }],
  24.       };
  25.     },
  26.     methods: {
  27.       buttonClick(evt, key) {
  28.         Toast.show(`您点击了${key}`);
  29.       },
  30.     },
  31.   };
  32. </script>

发送成功

截图

代码

  1. <template>
  2.   <ADialog
  3.     :value="true"
  4.     :selection="true"
  5.     :buttons="buttons"
  6.     @buttonClick="buttonClick"
  7.   >
  8.     <div class="am-dialog-send-img">
  9.       <img src="https://zos.alipayobjects.com/rmsportal/hkzwYezdQOqZfseGofgP.png" width="45px" height="29px">
  10.     </div>
  11.     <p class="am-dialog-brief">已发送</p>
  12.   </ADialog>
  13. </template>
  15. <script type="text/javascript">
  16.   import Toast from '../../../lib/toast';
  18.   export default {
  19.     data() {
  20.       return {
  21.         buttons: [{
  22.           key: 'taobao',
  23.           text: '返回手机淘宝',
  24.         }, {
  25.           key: 'alipay',
  26.           text: '留在支付宝',
  27.         }],
  28.       };
  29.     },
  30.     methods: {
  31.       buttonClick(evt, key) {
  32.         Toast.show(`您点击了${key}`);
  33.       },
  34.     },
  35.   };
  36. </script>
首页 移动开发平台 mPaaS 客户端开发组件 前端框架与 UI 组件 基于 H5 框架 - UI 组件库 弹窗组件 ADialog 弹窗