ADialog 弹窗
本文介绍了使用 ADialog 弹窗组件的不同方式以及相关 API。
此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo。
Kylin
<dependency component="{ ADialog }" src="@alipay/antui-vue" ></dependency>
ESModule
import { ADialog } from '@alipay/antui-vue';
API 说明
props
属性名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
animation | 是否开启 | boolean | true |
type | 弹框类型,可选值为 | string | text |
value | 弹框的显示隐藏状态,支持 | boolean | false |
closable | 是否露出关闭的 x 按钮 | boolean | false |
title | 弹框标题 | string | - |
content | 弹框内容 | string | - |
buttons | 弹框按钮组,要求数组元素为 | array<{ key:string, text:string, disabled:boolean }> | [] |
selection | 选项卡对话框,设置按钮垂直分布 | boolean | - |
preventMove | 是否在显示弹框 /mask时阻止 document 的 touchmove 事件 | boolean | true |
slots
属性名称 | 说明 | scope |
---|---|---|
image | 用于填充图像的区域 | - |
- | 默认占位弹框内容,如果需要支持自定义 | - |
button | 用于按钮组的区域 | buttons |
events
属性名称 | 说明 | 函数 |
---|---|---|
buttonClick | 当点击按钮时触发 | Function(event: event, buttonKey: string): void |
maskClick | 当点击 mask 时触发 | Function(event: event): void |
input | 当 | Function(value: boolean): void |
show | 当 | Function(): void |
hide | 当 | 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>