全部产品
云市场

ADialog 弹窗

更新时间:2020-04-28 16:56:23

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>
  10. <script type="text/javascript">
  11. import Toast from '../../../lib/toast';
  12. export default {
  13. data() {
  14. return {
  15. buttons: [{
  16. key: 'cancel',
  17. text: '取消',
  18. }, {
  19. key: 'ok',
  20. text: '确定',
  21. }],
  22. };
  23. },
  24. methods: {
  25. buttonClick(evt, key) {
  26. Toast.show(`您点击了${key}`);
  27. },
  28. },
  29. };
  30. </script>

无标题文本

截图

代码

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

单行动按钮: 标题+内容

截图

代码

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

不可点按钮:标题+内容

截图

代码

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

选项卡

截图

代码

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