ADialog 弹窗文档介绍了使用该组件的不同方式以及 API 文档:
此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo。
Kylin
<dependency component="{ ADialog }" src="@alipay/antui-vue" ></dependency>
ESModule
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
标题内容
截图

代码
<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>
在文档使用中是否遇到以下问题
更多建议
匿名提交