全部产品
云市场

提示(Tips)

更新时间:2020-03-26 14:51:33

本文介绍小提示(Tips)。分 tips-dialogtips-plain 两种类型。

tips-dialog

属性 说明 类型 默认值 必选
className 自定义class String - false
show 控制组件是否展示 Boolean true false
type dialog 表示对话框的样式类型,rectangle 表示矩形的样式类型。 String dialog false
onCloseTap type 值为 rectangle 时,组件点击关闭icon的回调 () => void - false
iconUrl 展示 icon 的 URL 地址 String - false

slots

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

tips-plain

属性 说明 类型 默认值 必选
className 自定义class String - false
time 自动关闭时间,单位毫秒 Number 5000(ms) false
onClose 回调并关闭提示框 () => void - false

代码示例

  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. }
  5. .dialog {
  6. position: fixed;
  7. bottom: 10px;
  8. }
  9. .content {
  10. font-size: 14px;
  11. color: #fff;
  12. }
  13. .opt-button {
  14. width: 51px;
  15. height: 27px;
  16. display: flex;
  17. justify-content: center;
  18. align-items: center;
  19. color: #fff;
  20. font-size: 12px;
  21. border: #68BAF7 solid 1rpx;
  22. }
  23. .add-home {
  24. width: 72px;
  25. height: 27px;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. background-color: #56ADEB;
  30. color: #fff;
  31. font-size: 14px;
  32. }

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. });