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>