ADialog 弹窗

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

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

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

Kylin

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

ESModule

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

• 标题内容
• 无标题文本
• 标题+题图+内容
• 单行动按钮：标题+题图+内容
• 单行动按钮： 标题+内容
• 不可点按钮：标题+内容
• 选项卡
• 发送成功

标题内容

截图

代码

<template>
  <ADialog
    title="标题文字"
    :value="true"
    content="辅助说明文字"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>
<script type="text/javascript">
  import Toast from '../../../lib/toast';
  export default {
    data() {
      return {
        buttons: [{
          key: 'cancel',
          text: '取消',
        }, {
          key: 'ok',
          text: '确定',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`您点击了${key}`);
      },
    },
  };
</script>

无标题文本

截图

代码

<template>
  <ADialog
    :value="true"
    content="辅助说明文字"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>
<script type="text/javascript">
  import Toast from '../../../lib/toast';
  export default {
    data() {
      return {
        buttons: [{
          key: 'cancel',
          text: '取消',
        }, {
          key: 'ok',
          text: '确定',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`您点击了${key}`);
      },
    },
  };
</script>

标题+题图+内容

截图

代码

<template>
  <ADialog
    title="标题文字"
    type="image"
    :value="true"
    content="辅助说明文字"
    :buttons="buttons"
    @buttonClick="buttonClick"
  >
    <img slot="image" src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="图片描述" />
  </ADialog>
</template>
<script type="text/javascript">
  import Toast from '../../../lib/toast';
  export default {
    data() {
      return {
        buttons: [{
          key: 'cancel',
          text: '取消',
        }, {
          key: 'ok',
          text: '确定',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`您点击了${key}`);
      },
    },
  };
</script>

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

截图

代码

<template>
  <ADialog
    title="标题文字"
    type="image"
    :value="true"
    content="辅助说明文字"
    :buttons="buttons"
    @buttonClick="buttonClick"
  >
    <img slot="image" src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="图片描述" />
  </ADialog>
</template>
<script type="text/javascript">
  import Toast from '../../../lib/toast';
  export default {
    data() {
      return {
        buttons: [{
          key: 'action',
          text: '行动按钮',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`您点击了${key}`);
      },
    },
  };
</script>

单行动按钮： 标题+内容

截图

代码

<template>
  <ADialog
    title="标题文字"
    :value="true"
    content="辅助说明文字"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>
<script type="text/javascript">
  import Toast from '../../../lib/toast';
  export default {
    data() {
      return {
        buttons: [{
          key: 'ok',
          text: '确定',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`您点击了${key}`);
      },
    },
  };
</script>

不可点按钮：标题+内容

截图

代码

<template>
  <ADialog
    title="标题文字"
    :value="true"
    content="辅助说明文字"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>
<script type="text/javascript">
  import Toast from '../../../lib/toast';
  export default {
    data() {
      return {
        buttons: [{
          key: 'cancel',
          text: '取消',
        }, {
          key: 'ok',
          text: '确定',
          disabled: true,
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`您点击了${key}`);
      },
    },
  };
</script>

选项卡

截图

代码

<template>
  <ADialog
    :value="true"
    content="内容说明当前状态、提示用户解决方案，最好不要超过两行。"
    :selection="true"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>
<script type="text/javascript">
  import Toast from '../../../lib/toast';
  export default {
    data() {
      return {
        buttons: [{
          key: 'action1',
          text: '选项1',
        }, {
          key: 'action2',
          text: '选项2',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`您点击了${key}`);
      },
    },
  };
</script>

发送成功

截图

代码

<template>
  <ADialog
    :value="true"
    :selection="true"
    :buttons="buttons"
    @buttonClick="buttonClick"
  >
    <div class="am-dialog-send-img">
      <img src="https://zos.alipayobjects.com/rmsportal/hkzwYezdQOqZfseGofgP.png" width="45px" height="29px">
    </div>
    <p class="am-dialog-brief">已发送</p>
  </ADialog>
</template>
<script type="text/javascript">
  import Toast from '../../../lib/toast';
  export default {
    data() {
      return {
        buttons: [{
          key: 'taobao',
          text: '返回手机淘宝',
        }, {
          key: 'alipay',
          text: '留在支付宝',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`您点击了${key}`);
      },
    },
  };
</script>