Alert 警告框

用于展现警告信息,预设 9 种颜色 light, stable, positive, calm, assertive, balanced, energized, royal, dark 可选用。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Alert",
  3. "usingComponents": {
  4. "wux-white-space": "../../dist/white-space/index",
  5. "wux-icon": "../../dist/icon/index",
  6. "wux-alert": "../../dist/alert/index"
  7. }
  8. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Alert</view>
  4. <view class="page__desc">警告框</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <view class="sub-title">Theme</view>
  8. <wux-alert theme="light" title="https://github.com/wux-weapp/wux-weapp" />
  9. <wux-white-space />
  10. <wux-alert theme="stable" title="https://github.com/wux-weapp/wux-weapp" />
  11. <wux-white-space />
  12. <wux-alert theme="positive" title="https://github.com/wux-weapp/wux-weapp" />
  13. <wux-white-space />
  14. <wux-alert theme="calm" title="https://github.com/wux-weapp/wux-weapp" />
  15. <wux-white-space />
  16. <wux-alert theme="assertive" title="https://github.com/wux-weapp/wux-weapp" />
  17. <wux-white-space />
  18. <wux-alert theme="balanced" title="https://github.com/wux-weapp/wux-weapp" />
  19. <wux-white-space />
  20. <wux-alert theme="energized" title="https://github.com/wux-weapp/wux-weapp" />
  21. <wux-white-space />
  22. <wux-alert theme="royal" title="https://github.com/wux-weapp/wux-weapp" />
  23. <wux-white-space />
  24. <wux-alert theme="dark" title="https://github.com/wux-weapp/wux-weapp" />
  25. <view class="sub-title">Closable</view>
  26. <wux-alert closable title="微信小程序自定义组件" label="https://github.com/wux-weapp/wux-weapp" />
  27. <wux-white-space />
  28. <wux-alert closable title="微信小程序自定义组件" label="https://github.com/wux-weapp/wux-weapp" />
  29. <wux-white-space />
  30. <wux-alert closable title="微信小程序自定义组件" label="https://github.com/wux-weapp/wux-weapp" />
  31. <view class="sub-title">Thumb</view>
  32. <wux-alert thumb="https://wux.cdn.cloverstd.com/logo.png" label="https://github.com/wux-weapp/wux-weapp" />
  33. <wux-white-space />
  34. <wux-alert thumb="https://wux.cdn.cloverstd.com/logo.png" label="https://github.com/wux-weapp/wux-weapp" />
  35. <wux-white-space />
  36. <wux-alert thumb="https://wux.cdn.cloverstd.com/logo.png" label="https://github.com/wux-weapp/wux-weapp" />
  37. <view class="sub-title">Slot</view>
  38. <wux-alert theme="balanced">
  39. <wux-icon wux-class="thumb" type="ios-checkmark-circle-outline" size="20" color="#fff" slot="header" />
  40. <text>微信小程序自定义组件</text>
  41. <wux-icon wux-class="close" type="ios-close-circle-outline" size="20" color="#fff" slot="footer" />
  42. </wux-alert>
  43. <wux-white-space />
  44. <wux-alert theme="energized">
  45. <wux-icon wux-class="thumb" type="ios-alert" size="20" color="#fff" slot="header" />
  46. <text>微信小程序自定义组件</text>
  47. </wux-alert>
  48. <wux-white-space />
  49. <wux-alert theme="assertive">
  50. <wux-icon wux-class="thumb" type="ios-close-circle-outline" size="20" color="#fff" slot="header" />
  51. <text>微信小程序自定义组件</text>
  52. </wux-alert>
  53. </view>
  54. </view>

视频演示

Alert

API

Alert props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-alert
classNames any 过渡的类名,更多内置过渡效果请参考 AnimationGroup wux-animate—fadeIn
theme string 主题色,可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark balanced
thumb string 缩略图 -
title string 标题 -
label string 描述 -
closable boolean 是否显示关闭按钮 false
bind:click function 点击关闭或者操作区域的回调函数 -

Alert slot

名称 描述
- 自定义标题或描述
header 自定义缩略图
footer 自定义右侧内容

Alert externalClasses

名称 描述
wux-class 根节点样式类