阿里云首页 移动开发平台 mPaaS

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

通知的可用操作,可选 gobutton

string

null

buttonText

operationbutton 时按钮显示的文字。

string

'知道了'

href

operationgo 时有效,单击后跳转位置。

string

null

slots

属性

说明

scope

-

通知内容

-

button

operationbutton 时,可定制 buttonText 内容为 DOM。

-

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>