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

Notice 通知

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

公告的可用操作,可选 goclose

string

null

href

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

string

null

slots:公告内容。

events

属性

说明

函数

close

operationclose 时,单击关闭按钮触发。

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>