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

slots

events

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>