本文介绍了使用 Inform 临时通知组件的不同方式以及相关 API。
Kylin
<dependency component="{ Inform }" src="@alipay/antui-vue" ></dependency>
ESModule
import { Inform } from '@alipay/antui-vue';
API 说明
props
属性 | 说明 | 类型 | 默认值 |
operation | 通知的可用操作,可选 | string | null |
buttonText |
| string | '知道了' |
href |
| string | null |
slots
属性 | 说明 | scope |
- | 通知内容 | - |
button | 当 | - |
events
属性 | 说明 | 函数 |
buttonClick | 单击按钮时触发。 | Function(): void |
Demo
基础样式
截图
代码
<template>
<div>
<Inform
:style="{visibility: visible ? 'visible' : 'hidden'}"
operation="button"
buttonText="知道了"
@buttonClick="visible = false"
>
防欺诈盗号,请勿泄露支付密码
</Inform>
<Inform
operation="go"
href="https://alipay.com/"
>
防欺诈盗号,请勿泄露支付密码
</Inform>
<Inform>
防欺诈盗号,请勿泄露支付密码
</Inform>
</div>
</template>
<script>
export default {
data() {
return {
visible: true,
};
},
};
</script>
文档内容是否对您有帮助?