Alert 警告提示

概述

静态地呈现一些警告信息，可手动关闭。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-alert": "../../dist/alert/index"
  3. }

示例

  1. <i-alert>
  2.     An info prompt
  3. </i-alert>
  4. <i-alert type="success">
  5.     An success prompt
  6. </i-alert>
  7. <i-alert type="warning">
  8.     An warning prompt
  9. </i-alert>
  10. <i-alert type="error">
  11.     An error prompt
  12. </i-alert>
  13. <i-alert>
  14.     An info prompt
  15.     <view slot="desc">Content of prompt. Content of prompt.</view>
  16. </i-alert>
  17. <i-alert type="success">
  18.     An success prompt
  19.     <view slot="desc">Content of prompt. Content of prompt.</view>
  20. </i-alert>
  21. <i-alert type="warning">
  22.     An warning prompt
  23.     <view slot="desc">Content of prompt. Content of prompt.</view>
  24. </i-alert>
  25. <i-alert type="error">
  26.     An error prompt
  27.     <view slot="desc">Content of prompt. Content of prompt.</view>
  28. </i-alert>
  29. <i-alert show-icon>
  30.     An info prompt
  31. </i-alert>
  32. <i-alert type="success" show-icon>
  33.     An success prompt
  34. </i-alert>
  35. <i-alert type="warning" show-icon>
  36.     An warning prompt
  37. </i-alert>
  38. <i-alert type="error" show-icon>
  39.     An error prompt
  40. </i-alert>
  41. <i-alert show-icon desc>
  42.     An info prompt
  43.     <view slot="desc">Content of prompt. Content of prompt.</view>
  44. </i-alert>
  45. <i-alert type="success" show-icon desc>
  46.     An success prompt
  47.     <view slot="desc">Content of prompt. Content of prompt.</view>
  48. </i-alert>
  49. <i-alert type="warning" show-icon desc>
  50.     An warning prompt
  51.     <view slot="desc">Content of prompt. Content of prompt.</view>
  52. </i-alert>
  53. <i-alert type="error" show-icon desc>
  54.     An error prompt
  55.     <view slot="desc">Content of prompt. Content of prompt.</view>
  56. </i-alert>
  57. <i-alert closable bind:close="handleClick">
  58.     An info prompt
  59. </i-alert>
  60. <i-alert type="success" show-icon desc closable bind:close="handleClick">
  61.     An success prompt
  62.     <view slot="desc">Content of prompt. Content of prompt.</view>
  63. </i-alert>

API

Alert properties

属性说明类型默认值
i-class自定义 class 类名String-
type警告提示样式，可选值为 info、success、warning、errorStringinfo
closable是否可关闭Booleanfalse
show-icon是否显示图标Booleanfalse
desc是否设置了 desc slotBooleanfalse

Alert events

事件名说明返回值
bind:close点击关闭按钮时触发-

Alert slot

名称说明
默认标题
desc描述内容