如何设置协议Terms_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

当作为表单组件，配合 Form/FormItem 组件使用时，需要设置 mode 的值为 form。

属性

属性	类型	必填	默认值	说明
fixed	boolean	否	false	是否固定在底部
hasCheckbox	boolean	否	true	是否需要勾选框
disabled	boolean	否	false	是否禁用
mainButtonText	string	是	'同意'	主按钮文本
addonButtonText	string	否	-	辅助按钮文本
className	string	否	-	类名

事件

事件名	说明	类型
onChange	点击 checkbox ，触发此回调	`( v : boolean ) => void`
onMainBtnTap	点击主按钮，触发此回调	`() => void`
onSubBtnTap	点击辅助按钮，触发此回调	`() => void`

插槽

名称	说明
默认插槽	带协议的文案，比如：同意《用户授权协议》

样式类

类名	说明
amd-terms	整体样式
amd-terms-fixed	整体样式
amd-terms-term	term 区域样式
amd-terms-term-checkbox	checkbox 组件样式
amd-terms-content	内容区域样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <demo-block title=" 含有 checkbox，不吸底">
    <terms 
      hasCheckbox="{{true}}"
      isDesc="{{true}}"
      fixed="{{false}}"
      mainButtonText="同意授权"
      addonButtonText="取消"
      onChange="handleSelectTerm"
      onMainBtnTap="handleTapMainBtn"
    >
      <view>
        同意<text style="color: #1677ff">《用户授权协议》</text>
      </view>
    </terms>
  </demo-block>
  <demo-block title="不含 checkbox，不吸底">
    <terms 
      hasCheckbox="{{false}}"
      isDesc="{{true}}"
      fixed="{{false}}"
      mainButtonText="同意授权"
      addonButtonText="取消"
      onMainBtnTap="handleTapMainBtn"
      onSubBtnTap="handleTapSubBtn">
      <view>
        同意<text style="color: #1677ff">《用户授权协议》</text>
      </view>
    </terms>
  </demo-block>
  <view class="fixed-title">吸底状态</view>
  <terms 
    hasCheckbox="{{false}}"
    isDesc="{{true}}"
    fixed="{{true}}"
    mainButtonText="同意授权"
    addonButtonText="取消"
    onMainBtnTap="handleTapMainBtn"
    onSubBtnTap="handleTapSubBtn">
    <view>
      同意<text style="color: #1677ff">《用户授权协议》</text>
    </view>
  </terms>

</view>

index.js 的代码示例如下：

Page({
  data: {},
  handleSelectTerm(checked) {
    my.showToast({
      content: `当前选中状态为：${checked}`,
    });
  },
  handleTapMainBtn() {
    my.alert({
      content: '同意授权',
    });
  },
  handleTapSubBtn() {
    my.alert({
      content: '取消',
    });
  },
});

index.acss 的代码示例如下：

.fixed-title {
  position: fixed;
  bottom: 188px;
  padding: 24rpx 16rpx 12rpx;
  color: #969696;
  font-size: 28rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Terms",
  "usingComponents": {
    "terms": "antd-mini/es/Terms/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}