更新时间:2020-12-30 11:29
ADialog 弹窗文档介绍了使用该组件的不同方式以及 API 文档:
此外,如需查看该组件的视觉效果及示例代码,参考本文的 Demo。
<dependency component="{ ADialog }" src="@alipay/antui-vue" ></dependency>
import { ADialog } from '@alipay/antui-vue';
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 |
name | 说明 | scope |
---|---|---|
image | 用于填充图像的区域 | —- |
- | 默认占位,弹框内容,如果需要支持自定义DOM |
—- |
button | 用于按钮组的区域 | buttons |
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 |
<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>
在文档使用中是否遇到以下问题
更多建议
匿名提交