All Products
Search
Document Center

Inform

Last Updated: May 27, 2021

This topic describes different methods of using the Inform 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="{ Inform }" src="@alipay/antui-vue" ></dependency>

ESModule

 
  1. import { Inform } from '@alipay/antui-vue';

API description

props

Property Description Type Default value
operation Available actions for notifications. Valid values: Go and Button. String null
buttonText The button text that is displayed when operation is set to button. String 'Got it'
href Redirection upon tapping. Valid when operation is set to go. String null

slots

Name Description Scope
- Notification content -
button When operation is set to button, the content of buttonText can be customized as DOM. -

events

Name Description Function
buttonClick Triggered when a button is tapped. Function(): void

Demo

The following shows a sample for a basic style Inform notice.

Sample image

Sample code

 
  1. <template>
  2. <div>
  3. <Inform
  4. :style="{visibility: visible ? 'visible' : 'hidden'}"
  5. operation="button"
  6. buttonText="知道了"
  7. @buttonClick="visible = false"
  8. >
  9. 防欺诈盗号,请勿泄露支付密码
  10. </Inform>
  11. <Inform
  12. operation="go"
  13. href="https://alipay.com/"
  14. >
  15. 防欺诈盗号,请勿泄露支付密码
  16. </Inform>
  17. <Inform>
  18. 防欺诈盗号,请勿泄露支付密码
  19. </Inform>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. visible: true,
  27. };
  28. },
  29. };
  30. </script>