All Products
Search
Document Center

Notice

Last Updated: May 27, 2021

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

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

ESModule

 
  1. 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

 
  1. <template>
  2. <div>
  3. <Notice>
  4. 因全国公民身份系统升级,添加银行卡银行卡
  5. </Notice>
  6. <Notice operation="go" href="https://www.alipay.com/">
  7. 因全国公民身份系统升级,添加银行卡
  8. </Notice>
  9. <Notice operation="close" @close="show = false" v-if="show">
  10. 因全国公民身份系统升级,添加银行卡
  11. </Notice>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. show: true,
  19. };
  20. },
  21. };
  22. </script>