首页 移动开发平台 mPaaS 客户端开发组件 前端框架与 UI 组件 基于 H5 框架 - UI 组件库 弹窗组件 ADialog 弹窗

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

属性名称

说明

scope

image

用于填充图像的区域

-

-

默认占位弹框内容，如果需要支持自定义 DOM

-

button

用于按钮组的区域

buttons

events

属性名称

说明

函数

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>
阿里云首页 移动开发平台 mPaaS 相关技术圈