当前位置：首页 > VUE

vue实现协议勾选

2026-02-20 20:26:31VUE

Vue 实现协议勾选功能

需求场景
用户注册或提交表单时，通常需要勾选“同意用户协议”等选项。以下是基于 Vue 2/3 的实现方案。

基础实现（复选框绑定）

通过 v-model 绑定复选框状态，控制按钮是否可点击：

<template>
  <div>
    <input type="checkbox" v-model="isAgreed" id="agreement">
    <label for="agreement">我已阅读并同意《用户协议》</label>
    <button :disabled="!isAgreed">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false
    }
  }
}
</script>

带链接的协议文本

若协议文本需要可点击跳转，可通过 <a> 标签或路由实现：

<template>
  <div>
    <input type="checkbox" v-model="isAgreed">
    <span>我已阅读并同意
      <a href="/terms" target="_blank">《用户协议》</a>
      和
      <a href="/privacy" target="_blank">《隐私政策》</a>
    </span>
  </div>
</template>

表单验证集成

结合 Vue 的表单验证库（如 VeeValidate）：

<template>
  <div>
    <input 
      type="checkbox" 
      v-model="isAgreed"
      name="agreement"
      v-validate="'required'"
    >
    <span>{{ errors.first('agreement') }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false
    }
  }
}
</script>

自定义样式组件

使用自定义样式替代原生复选框：

<template>
  <div class="agreement" @click="isAgreed = !isAgreed">
    <div :class="['checkbox', { 'checked': isAgreed }]"></div>
    <span>同意协议</span>
  </div>
</template>

<style>
.checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  display: inline-block;
}
.checkbox.checked {
  background-color: #42b983;
}
</style>

全局协议弹窗

点击协议链接时弹出模态框显示内容：

<template>
  <div>
    <input type="checkbox" v-model="isAgreed">
    <span @click="showModal('terms')">《用户协议》</span>

    <Modal v-if="modalVisible" @close="modalVisible = false">
      <h3>{{ modalTitle }}</h3>
      <div v-html="modalContent"></div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false,
      modalVisible: false,
      modalTitle: '',
      modalContent: ''
    }
  },
  methods: {
    showModal(type) {
      this.modalTitle = type === 'terms' ? '用户协议' : '隐私政策';
      this.modalContent = this.getContent(type); // 异步获取内容
      this.modalVisible = true;
    }
  }
}
</script>

注意事项