Inform 临时通知

Inform 临时通知文档介绍了使用该组件的不同方式以及 API 文档：

• 在 Kylin 工程中使用该组件。
• 在其他工程中使用，通过 ESModule 的方式导入组件。

API 文档 提供了 props、slots、events 的接口信息。

Kylin

<dependency component="{ Inform }" src="@alipay/antui-vue" ></dependency>

ESModule

import { Inform } from '@alipay/antui-vue';

API 文档

props

属性	说明	类型	默认值
operation	通知的可用操作，可选go,button	string	null
buttonText	operation为button时按钮显示的文字	string	'知道了'
href	operation为go时有效，点击后跳转位置	string	null

slots

name	说明	scope
-	通知内容	-
button	当operation为button时，可定制buttonText内容为DOM	-

events

name	说明	函数
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>