Notice - - Alibaba Cloud Documentation Center

The Notice topic describes different methods of using this component and the API descriptions:

Use this component in the Kylin project.
Use this component in other projects. Import it through ESModule.
API description provides API information for props, slots, and events.

Kylin

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

ESModule

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

API description

props

Property	Description	Type	Default value
operation	Available operations for announcements. Valid values: `Go` and `Close`.	String	null
href	Redirection upon tapping. Valid when `operation` is set to `go`.	String	null

slots

Name	Description	Scope
-	Announcement content	-

events

Name	Description	Function
close	Triggered upon tapping the close button when `operation` is set to `close`.	Function(): void

Demo

The following shows a sample for a basic style notice.

Sample image

Sample code

<template>
<div>
  <Notice>
    Due to the upgrading of the National Identity Card System, when adding a bank card......
  </Notice>
  <Notice operation="go" href="https://www.alipay.com/">
    Due to the upgrading of the National Identity Card System, when adding a bank card.......
  </Notice>
  <Notice operation="close" @close="show = false" v-if="show">
    Due to the upgrading of the National Identity Card System, when adding a bank card.......
  </Notice>
</div>

</template>

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