CFormAgreement 表单协议组件

功能说明

CFormAgreement 是表单协议组件，用于在表单中提供用户协议勾选功能。组件包含勾选框和协议文本，点击协议文本可以打开浮层查看详细内容。

引用方式

import { CFormAgreement } from '@components/forms/form';

组件参数

• formRes (Object，必填)：表单资源对象，由 CForm 组件提供
• protocol (String，必填)：需要同意的协议名称，如"用户协议"、"隐私政策"等

使用示例

基础用法

<template>
  <CForm :form="form" :onFinish="handleFinish">
    <CFormItem name="username" label="用户名" required>
      <CInput type="text" placeholder="请输入用户名" />
    </CFormItem>
    
    <CFormAgreement :formRes="formRes" protocol="《用户协议》">
      <view class="protocol-content">
        <!-- 协议详细内容 -->
        <view class="paragraph">
          欢迎您使用我们的服务。在使用我们的服务前，请您仔细阅读以下条款...
        </view>
        <view class="paragraph">
          1. 服务条款的确认和接纳...
        </view>
        <view class="paragraph">
          2. 用户信息保护...
        </view>
        <!-- 更多协议内容 -->
      </view>
    </CFormAgreement>
    
    <CFormSubmit>提交</CFormSubmit>
  </CForm>
</template>

<script>
import { CForm, CFormItem, CFormSubmit, CFormAgreement } from '@components/forms/form';
import { CInput } from '@components/forms/input';

export default {
  components: {
    CForm,
    CFormItem,
    CFormSubmit,
    CFormAgreement,
    CInput
  },
  data() {
    return {
      form: {
        username: ''
      },
      formRes: null
    };
  },
  methods: {
    handleFinish() {
      console.log('表单提交成功', this.form);
    }
  },
  mounted() {
    // 获取表单资源对象
    this.formRes = this.$refs.form.formRes;
  }
};
</script>

注意事项

1. CFormAgreement 组件需要在 CForm 组件内使用，并且需要传入表单资源对象 formRes
2. 组件会在表单验证时检查是否已勾选协议，未勾选时会阻止表单提交并显示提示信息
3. 协议详细内容通过默认插槽提供，会在点击协议名称时在浮层中显示
4. 组件内部使用了特殊的字段名 $agreement 进行验证，不会影响表单数据
5. 为了获取 formRes 对象，需要在组件挂载后从 CForm 组件实例中获取