Tips 引导

小提示。分tips-dialog和tips-plain两种类型。

扫码体验：
Tips 引导 - 图1

tips-dialog

属性说明类型默认值必选
className自定义classStringfalse
show控制组件是否展示Booleantruefalse
typedialog表示对话框的样式类型，rectangle表示矩形的样式类型。Stringdialogfalse
onCloseTap当type值为rectangle时，组件点击关闭icon的回调() => voidfalse
iconUrl展示icon的url地址Stringfalse

slots

slotName说明
content用于渲染提示的正文内容
operation用于渲染右侧操作区域

tips-plain

属性说明类型默认值必选
className自定义classStringfalse
time自动关闭时间(单位毫秒)Number5000(ms)false
onClose回调并关闭提示框() => voidfalse

示例

  1. {
  2.   "defaultTitle": "小程序AntUI组件库",
  3.   "usingComponents": {
  4.     "tips-dialog": "mini-antui/es/tips/tips-dialog/index",
  5.     "tips-plain": "mini-antui/es/tips/tips-plain/index"
  6.   }
  7. }

tips-dialog

  1. <view>
  2.   <tips-dialog
  3.     show="{{showDialog}}"
  4.     className="dialog"
  5.     type="dialog"
  6.   >
  7.     <view class="content" slot="content">
  8.       <view>hello,</view>
  9.       <view>欢迎使用小程序扩展组件库mini-antui</view>
  10.     </view>
  11.     <view slot="operation" class="opt-button" onTap="onDialogTap">知道了</view> 
  12.   </tips-dialog>
  13.   <tips-dialog
  14.     iconUrl="https://gw.alipayobjects.com/zos/rmsportal/AzRAgQXlnNbEwQRvEwiu.png"
  15.     type="rectangle"
  16.     className="rectangle"
  17.     onCloseTap="onCloseTap"
  18.     show="{{showRectangle}}">
  19.     <view class="content" slot="content">
  20.       把“城市服务”添加到首页
  21.     </view>
  22.     <view slot="operation" class="add-home" onTap="onRectangleTap">立即添加</view>
  23.   </tips-dialog>
  24. </view>
  1. Page({
  2.   data: {
  3.     showRectangle: true,
  4.     showDialog: true,
  5.   },
  6.   onCloseTap() {
  7.     this.setData({
  8.       showRectangle: false,
  9.     });
  10.   },
  11.   onRectangleTap() {
  12.     my.alert({
  13.       content: 'do something',
  14.     });
  15.   },
  16.   onDialogTap() {
  17.     this.setData({
  18.       showDialog: false,
  19.     });
  20.   },
  21. });
  1. .rectangle {
  2.   position: fixed;
  3.   bottom: 100px;
  4. }
  6. .dialog {
  7.   position: fixed;
  8.   bottom: 10px;
  9. }
  11. .content {
  12.   font-size: 14px;
  13.   color: #fff;
  14. }
  16. .opt-button {
  17.   width: 51px;
  18.   height: 27px;
  19.   display: flex;
  20.   justify-content: center;
  21.   align-items: center;
  22.   color: #fff;
  23.   font-size: 12px;
  24.   border: #68BAF7 solid 1rpx;
  25. }
  27. .add-home {
  28.   width: 72px;
  29.   height: 27px;
  30.   display: flex;
  31.   justify-content: center;
  32.   align-items: center;
  33.   background-color: #56ADEB;
  34.   color: #fff;
  35.   font-size: 14px;
  36. }

tips-plain

  1. <tips-plain onClose="onClose" time="{{time}}">{{content}}</tips-plain>
  1. Page({
  2.   data: {
  3.     content: '我知道了',
  4.     time: 2000,
  5.   },
  6.   onClose() {
  7.     my.alert({
  8.       title: '12321'
  9.     });
  10.   }
  11. });

原文: https://docs.alipay.com/mini/component-ext/tips