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 | Boolean | true |
type | The type of a dialog box. Valid values: | String | ‘text’ |
value | Whether to show or hide a dialog box. | 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 | 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 | - |
button | Area for the button group. |
|
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 | Function(value: boolean): void |
show | Triggered when | Function(): void |
hide | Triggered when | Function(): void |
Demo
Title
Sample image
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
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
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
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
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
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
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
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>