All Products
Search
Document Center

Mobile Platform as a Service:Notice

Last Updated:Mar 04, 2022

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

Bank card

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>