如何使用向导提示Tips的引导提示_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

弹出式气泡，强化界面中的某个元素对用户的提示信息。

属性

属性	类型	必填	默认值	说明
image	string	否	-	需要使用的图片 URL
title	string	是	-	提示文字
arrowPosition	'top-left' \| 'top-center' \| 'top-right' \| 'left' \| 'right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'	否	-	箭头位置，不传时表示没有箭头
buttonText	string	否	-	按钮文字
showClose	boolean	否	false	是否有关闭按钮
buttonPosition	'right' \| 'bottom'	否	'right'	文字按钮的位置，默认为右边
className	string	否	-	类名

事件

事件名	说明	类型
onButtonTap	点击按钮，触发回调	`() => void`

样式类

类名	说明
amd-tips	整体样式
amd-tips-wrap	内部样式
amd-tips-wrap-pseudo	表面内容区域样式
amd-tips-wrap-pseudo-content	表面内容区域样式
amd-tips-arrow	箭头样式
amd-tips-wrap-real	真实内容区域样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <view class="display-area">
    <tips 
      title="{{title}}"
      buttonText="{{buttonText}}"
      buttonPosition="{{buttonPosition}}"
      image="{{showImage ? image : ''}}"
      showClose="{{showClose}}"
      arrowPosition="{{tipsArrow[arrowPosition].name}}"
      onButtonTap="onButtonTap"/>
  </view>
  <list radius>
    <list-item>
      显示图片<switch slot="extra" checked="{{showImage}}" onChange="handleChangeShowImage" controlled />
    </list-item>
    <list-item>
      显示关闭图标<switch slot="extra" checked="{{showClose}}" onChange="handleChangeShowClose" controlled />
    </list-item>
    <list-item>
      标题
      <input-item value="{{title}}" onChange="handleChangeTitle" controlled slot="extra" clear="{{false}}"/>
    </list-item>
    <list-item>
      按钮文案
      <input-item value="{{buttonText}}" onChange="handleChangeButtonText" controlled slot="extra" clear="{{false}}"/>
    </list-item>
    <radio-group header="箭头位置" uid="arrowPosition" value="{{arrowPosition}}" controlled onChange="handleChangeArrowPosition">
      <radio-item a:for="{{tipsArrow}}" value="{{item.value}}" uid="arrowPosition">{{item.name||'无箭头'}}</radio-item>
    </radio-group>
    <radio-group header="按钮位置" uid="buttonPosition" onChange="handleChangeButtonPosition" value="{{buttonPosition}}" controlled>
      <radio-item value="right" uid="buttonPosition">右侧</radio-item>
      <radio-item value="bottom" uid="buttonPosition">底部</radio-item>
    </radio-group>
  </list>
</view>

index.js 的代码示例如下：

Page({
  data: {
    image:
      'https://gw.alipayobjects.com/zos/rmsportal/AzRAgQXlnNbEwQRvEwiu.png',
    tipsArrow: [
      { name: '', value: '0' },
      { name: 'top-left', value: '1' },
      { name: 'top-center', value: '2' },
      { name: 'top-right', value: '3' },
      { name: 'left', value: '4' },
      { name: 'right', value: '5' },
      { name: 'bottom-left', value: '6' },
      { name: 'bottom-center', value: '7' },
      { name: 'bottom-right', value: '8' },
    ],
    title: '这是一个提示框',
    buttonText: '操作按钮',
    showImage: true,
    showClose: true,
    arrowPosition: '2',
    buttonPosition: 'right',
  },
  handleChangeShowImage(checked) {
    this.setData({ showImage: checked });
  },
  handleChangeShowClose(checked) {
    this.setData({ showClose: checked });
  },
  handleChangeTitle(value) {
    this.setData({ title: value });
  },
  handleChangeButtonText(value) {
    this.setData({ buttonText: value });
  },
  handleChangeButtonPosition(value) {
    this.setData({ buttonPosition: value });
  },
  handleChangeArrowPosition(value) {
    this.setData({ arrowPosition: value });
  },
  handleClose() {
    my.alert({
      title: '关闭标签被点击',
      content: 'Tips 组件关闭',
    });
  },
  handleTapBtn() {
    my.alert({
      title: '按钮被点击',
      content: '页面中的 onButtonTap 被点击了',
    });
  },
});

index.acss 的代码示例如下：

.display-area {
  min-height: 100px;
  padding: 40rpx 12px 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.demo {
  padding-bottom: 40rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Tips",
  "usingComponents": {
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "input-item": "antd-mini/es/InputItem/index",
    "tips": "antd-mini/es/Tips/index",
    "switch": "antd-mini/es/Switch/index",
    "radio-group": "antd-mini/es/RadioGroup/index",
    "radio-item": "antd-mini/es/RadioGroup/RadioItem/index"
  }
}

插槽

index.axml 的代码示例如下：

<tips arrowPosition="bottom-center" showClose="{{false}}">
    默认插槽
</tips>

index.js 的代码示例如下：

Page({});

index.json 的代码示例如下：

{
    "defaultTitle": "TipsSlot",
    "usingComponents": {
      "tips": "antd-mini/es/Tips/index"
    }
  }

关闭组件

index.axml 的代码示例如下：

<view class="demo">
    
    <tips title="受控关闭" showClose="{{true}}" onClose="onClose" visible="{{visible}}" />
    
    <button class="btn" type="primary" onTap="onTap">
        {{visible === true ? '关闭' : '开启'}}
    </button>
</view>

index.js 的代码示例如下：

Page({
  data: {
    visible: true,
  },
  onTap() {
    this.setData({
      visible: !this.data.visible,
    });
  },
  onClose() {
    my.alert({
      content: '组件关闭',
    });
  },
});

index.acss 的代码示例如下：

.btn {
  margin: 24rpx 0;
  display: block;
}
.demo {
  display: flex;
  flex-direction: column;
  padding: 24rpx;
}

index.json 的代码示例如下：

{
  "usingComponents": {
    "button": "antd-mini/es/Button",
    "tips": "antd-mini/es/Tips"
  }
}