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 根节点样式类