如何使用Inform临时通知组件_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

本文介绍了使用 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

属性	说明	scope
-	通知内容	-
button	当 `operation` 为 `button` 时，可定制 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>