vue实现协议勾选

Vue 实现协议勾选功能

使用 v-model 绑定复选框

在 Vue 中，可以通过 v-model 指令轻松实现复选框的绑定。创建一个布尔类型的数据属性，用于存储用户是否勾选了协议。

<template>
  <div>
    <input type="checkbox" v-model="isAgreed" id="agreement" />
    <label for="agreement">我已阅读并同意协议</label>
  </div>
</template>

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

添加协议内容链接

通常协议内容会以弹窗或链接形式展示。可以通过 <a> 标签或按钮触发弹窗。

<template>
  <div>
    <input type="checkbox" v-model="isAgreed" id="agreement" />
    <label for="agreement">
      我已阅读并同意
      <a href="#" @click.prevent="showAgreement">《用户协议》</a>
    </label>
  </div>
</template>

<script>
export default {
  methods: {
    showAgreement() {
      // 弹出协议内容或跳转到协议页面
      alert('这里是协议内容');
    }
  }
}
</script>

表单提交验证

在表单提交时，检查用户是否勾选了协议。如果没有勾选，提示用户并阻止提交。

<template>
  <form @submit.prevent="submitForm">
    <input type="checkbox" v-model="isAgreed" id="agreement" />
    <label for="agreement">我已阅读并同意协议</label>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false
    }
  },
  methods: {
    submitForm() {
      if (!this.isAgreed) {
        alert('请先同意协议');
        return;
      }
      // 提交表单逻辑
    }
  }
}
</script>

使用组件化实现

如果需要多处复用协议勾选功能，可以将其封装为组件。

<!-- AgreementCheckbox.vue -->
<template>
  <div>
    <input type="checkbox" v-model="internalValue" id="agreement" />
    <label for="agreement">
      我已阅读并同意
      <a href="#" @click.prevent="$emit('show-agreement')">《用户协议》</a>
    </label>
  </div>
</template>

<script>
export default {
  props: {
    value: Boolean
  },
  computed: {
    internalValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
}
</script>

在父组件中使用

<template>
  <form @submit.prevent="submitForm">
    <agreement-checkbox v-model="isAgreed" @show-agreement="showAgreement" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import AgreementCheckbox from './AgreementCheckbox.vue';

export default {
  components: {
    AgreementCheckbox
  },
  data() {
    return {
      isAgreed: false
    }
  },
  methods: {
    showAgreement() {
      alert('这里是协议内容');
    },
    submitForm() {
      if (!this.isAgreed) {
        alert('请先同意协议');
        return;
      }
      // 提交表单逻辑
    }
  }
}
</script>

样式美化

可以使用 CSS 美化复选框和协议链接的样式。

<style scoped>
input[type="checkbox"] {
  margin-right: 8px;
}

a {
  color: #1890ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>