如何使用Notice通知组件,有哪些方式_移动开发平台 mPaaS-阿里云帮助中心

本文介绍使用 Notice 通知组件的不同方式以及相关 API。

在 Kylin 工程中使用该组件。
在其他工程中使用，通过 ESModule 的方式导入组件。
API 说明提供了 props、slots、events 的接口信息。

Kylin

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

ESModule

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

API 说明

props

属性	说明	类型	默认值
operation	公告的可用操作，可选 `go`、`close`。	string	null
href	`operation` 为 `go` 时有效，单击后跳转位置。	string	null

slots：公告内容。

events

属性	说明	函数
close	`operation` 为 `close` 时，单击关闭按钮触发。	Function(): void

Demo

下面是一个基础样式示例。

截图

代码

<template>
<div>
  <Notice>
    因全国公民身份系统升级，添加银行卡
  </Notice>
  <Notice operation="go" href="https://www.alipay.com/">
    因全国公民身份系统升级，添加银行卡
  </Notice>
  <Notice operation="close" @close="show = false" v-if="show">
    因全国公民身份系统升级，添加银行卡
  </Notice>
</div>

</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>