All Products
Search
Document Center

Mobile Platform as a Service:ADialog

Last Updated:Feb 21, 2022

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

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

ESModule

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

Title OK

Sample code

<template>
  <ADialog
    title="Title"
    :value="true"
    content="Auxiliary Description Auxiliary Auxiliary Description"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>

<script type="text/javascript">
  import Toast from '../../../lib/toast';

  export default {
    data() {
      return {
        buttons: [{
          key: 'cancel',
          text: 'Cancel',
        }, {
          key: 'ok',
          text: 'OK',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`Clicked${key}`);
      },
    },
  };
</script>

Untitled text

Sample image

Auxiliary OK

Sample code

<template>
  <ADialog
    :value="true"
    content="Auxiliary Description Auxiliary Auxiliary Description"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>

<script type="text/javascript">
  import Toast from '../../../lib/toast';

  export default {
    data() {
      return {
        buttons: [{
          key: 'cancel',
          text: 'Cancel',
        }, {
          key: 'ok',
          text: 'OK',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`Clicked${key}`);
      },
    },
  };
</script>

Title + image + content

Sample image

Auxiliary OK

Sample code

<template>
  <ADialog
    title="Title"
    type="image"
    :value="true"
    content="Auxiliary Description Auxiliary Auxiliary Description"
    :buttons="buttons"
    @buttonClick="buttonClick"
  >
    <img slot="image" src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="image description" />
  </ADialog>
</template>

<script type="text/javascript">
  import Toast from '../../../lib/toast';

  export default {
    data() {
      return {
        buttons: [{
          key: 'cancel',
          text: 'Cancel',
        }, {
          key: 'ok',
          text: 'OK',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`Clicked${key}`);
      },
    },
  };
</script>

Single-action button: title + image + content

Sample image

Action Button

Sample code

<template>
  <ADialog
    title="Title"
    type="image"
    :value="true"
    content="Auxiliary Description Auxiliary Auxiliary Description"
    :buttons="buttons"
    @buttonClick="buttonClick"
  >
    <img slot="image" src="https://os.alipayobjects.com/rmsportal/QnFHZkFYDZUJqBD.png" alt="image description" />
  </ADialog>
</template>

<script type="text/javascript">
  import Toast from '../../../lib/toast';

  export default {
    data() {
      return {
        buttons: [{
          key: 'action',
          text: 'Action Button',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`Clicked${key}`);
      },
    },
  };
</script>

Single-action button: title + content

Sample image

Auxiliary OK

Sample code

<template>
  <ADialog
    title="Title"
    :value="true"
    content="Auxiliary Description Auxiliary Auxiliary Description"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>

<script type="text/javascript">
  import Toast from '../../../lib/toast';

  export default {
    data() {
      return {
        buttons: [{
          key: 'ok',
          text: 'OK',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`Clicked${key}`);
      },
    },
  };
</script>

Unclickable button: title + content

Sample image

Auxiliary

Sample code

<template>
  <ADialog
    title="Title"
    :value="true"
    content="Auxiliary Description Auxiliary Auxiliary Description"
    :buttons="buttons"
    @buttonClick="buttonClick"
  ></ADialog>
</template>

<script type="text/javascript">
  import Toast from '../../../lib/toast';

  export default {
    data() {
      return {
        buttons: [{
          key: 'cancel',
          text: 'Cancel',
        }, {
          key: 'ok',
          text: 'OK',
          disabled: true,
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`Clicked${key}`);
      },
    },
  };
</script>

Tab

Sample image

option

Sample code

<template>
  <ADialog
    :value="true"
    content="Describe the current state and prompt the solution in two rows."
    :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: 'Option1',
        }, {
          key: 'action2',
          text: 'Option1',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`Clicked${key}`);
      },
    },
  };
</script>

Sending success

Sample image

1

Sample code

<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">Sent successfully</p>
  </ADialog>
</template>

<script type="text/javascript">
  import Toast from '../../../lib/toast';

  export default {
    data() {
      return {
        buttons: [{
          key: 'taobao',
          text: 'Back to Taobao',
        }, {
          key: 'alipay',
          text: 'Stay in Alipay',
        }],
      };
    },
    methods: {
      buttonClick(evt, key) {
        Toast.show(`Clicked${key}`);
      },
    },
  };
</script>