全部产品
云市场
云游戏

Inform 临时通知

更新时间:2020-08-07 20:34:14

Inform 临时通知文档介绍了使用该组件的不同方式以及 API 文档:

  • Kylin 工程中使用该组件。
  • 在其他工程中使用,通过 ESModule 的方式导入组件。

API 文档 提供了 props、slots、events 的接口信息。

Kylin

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

ESModule

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

API 文档

props

属性 说明 类型 默认值
operation 通知的可用操作,可选go,button string null
buttonText operationbutton时按钮显示的文字 string '知道了'
href operationgo时有效,点击后跳转位置 string null

slots

name 说明 scope
- 通知内容 -
button operationbutton时,可定制buttonText内容为DOM -

events

name 说明 函数
buttonClick 点击按钮时触发 Function(): void

Demo

基础样式

截图

代码

  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>