< 文档首页
全部产品
弹性计算
存储
数据库
安全
大数据
人工智能
网络与CDN
视频服务
容器与中间件
开发与运维
API与工具
物联网
物联网行业方案
专有云
专有云（线下）
企业应用与服务
数字金融
域名与网站
工商财税与知识产权
解决方案
会员服务
更多
搜本产品
搜全站

    ADialog 弹窗

    更新时间：2020-12-30 11:29:33

    ★ 我的收藏
    本页目录

    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>
    上一篇：ActionSheet 选项卡
    下一篇：Filter 筛选
    相关文档
    相关产品
    • 移动开发平台 mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 移动研发平台EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。
    • 移动推送
      移动推送（Mobile Push）是提供给移动开发者的移动端消息推送服务，通过在App中集成推送功能，进行高效、精准、实时的消息推送，从而使业务及时触达用户，提高用户粘性。