All Products
Search
Document Center

ADialog

Last Updated: Jul 16, 2021

This topic describes different methods of using the ADialog component and the API descriptions:

  • Use this component in the Kylin project.
  • Use this component in other projects. Import it through ESModule.
  • API description provides API information for props, slots, and events.

To view the visual effects and code sample of the component, see Demo.

Kylin

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

ESModule

 
  1. import { ADialog } from '@alipay/antui-vue';

API description

props

Property Description Type Default value
animation Whether to enable transition. Boolean true
type The type of a dialog box. Valid values: text and image. String ‘text’
value Whether to show or hide a dialog box. v-model is supported`. Boolean false
closable Whether to display the x button. Boolean false
title The title of a dialog box. String -
content The content of a dialog box. String -
buttons Pop-up button group that requires the array element to be { [key]:string, [text]:string, [disabled]: boolean }. Array<{ key:string, text:string, disabled:boolean }> []
selection Tab dialog box used for setting the vertical distribution of buttons. Boolean -
preventMove Whether to block the touchmove event of document when the pop-up/mask is displayed. Boolean true

slots

Name Description Scope
image The area that is used to fill in images. —-
- Default placeholder as the pop-up content. Custom DOM is supported if required. —-
button Area for the button group. buttons

events

Name Description Function
buttonClick Triggered when a button is tapped. Function(event: event, buttonKey: string): void
maskClick Triggered when a mask is tapped. Function(event: event): void
input Triggered when value is changed. Function(value: boolean): void
show Triggered when value is changed to true. Function(): void
hide Triggered when value is changed to false. Function(): void

Demo

Title

Sample image

Sample code

 
  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>

Untitled text

Sample image

Sample code

 
  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>

Title + image + content

Sample image

Sample code

 
  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>

Single-action button: title + image + content

Sample image

Sample code

 
  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>

Single-action button: title + content

Sample image

Sample code

 
  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>

Unclickable button: title + content

Sample image

Sample code

 
  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>

Tab

Sample image

Sample code

 
  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>

Sending success

Sample image

Sample code

 
  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>