Vue.js中响应式Checkbox的实现：告别传统DOM操作与onclick

<template>
  <div>
    <label>
      <input type="checkbox" v-model="isChecked" />
      我同意用户协议
    </label>
    <p>当前状态：{{ isChecked ? '已选中' : '未选中' }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义一个响应式数据属性来存储checkbox的选中状态
const isChecked = ref<boolean>(false);

// 你可以在其他地方访问 isChecked 的值
// 例如，在提交表单时：
const submitForm = () => {
  if (isChecked.value) {
    console.log('用户已同意协议并提交表单');
  } else {
    console.log('用户未同意协议');
  }
};
</script>

<template>
  <div>
    <label>
      <input type="checkbox" v-model="isNotificationEnabled" @change="handleNotificationToggle" />
      接收通知
    </label>
    <p>通知状态：{{ isNotificationEnabled ? '已启用' : '已禁用' }}</p>
    <button :disabled="!isNotificationEnabled">发送测试通知</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isNotificationEnabled = ref<boolean>(false);

const handleNotificationToggle = (event: Event) => {
  // event.target.checked 也可以获取到当前checkbox的选中状态，但通常v-model已经足够
  // console.log('Checkbox 状态改变为:', (event.target as HTMLInputElement).checked);

  // v-model 会自动更新 isNotificationEnabled.value
  if (isNotificationEnabled.value) {
    console.log('通知功能已启用。可以执行一些启用通知的逻辑...');
    // 例如：调用API更新用户设置
  } else {
    console.log('通知功能已禁用。可以执行一些禁用通知的逻辑...');
  }
};
</script>

<template>
  <div class="checkbox-tutorial">
    <h2>用户偏好设置</h2>

    <div class="setting-item">
      <label>
        <input type="checkbox" v-model="acceptTerms" @change="onTermsChange" />
        我已阅读并同意<a href="#">《服务条款》</a>
      </label>
      <p v-if="!acceptTerms" class="warning-message">请先同意服务条款才能继续。</p>
    </div>

    <div class="setting-item">
      <label>
        <input type="checkbox" v-model="receiveNewsletter" @change="onNewsletterToggle" />
        订阅我们的电子报
      </label>
      <p>电子报订阅状态：{{ receiveNewsletter ? '已订阅' : '未订阅' }}</p>
    </div>

    <button :disabled="!acceptTerms" @click="savePreferences">保存偏好设置</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 定义用户偏好设置的响应式数据
const acceptTerms = ref<boolean>(false);
const receiveNewsletter = ref<boolean>(true); // 默认订阅

// 处理服务条款Checkbox的改变事件
const onTermsChange = (event: Event) => {
  // v-model 已经更新了 acceptTerms.value
  console.log('服务条款同意状态变为:', acceptTerms.value);
  if (!acceptTerms.value) {
    alert('您必须同意服务条款才能保存设置。');
  }
};

// 处理电子报订阅Checkbox的改变事件
const onNewsletterToggle = (event: Event) => {
  console.log('电子报订阅状态变为:', receiveNewsletter.value);
  if (receiveNewsletter.value) {
    console.log('用户选择订阅电子报。');
    // 可以在这里触发一个API调用来更新用户订阅状态
  } else {
    console.log('用户取消订阅电子报。');
    // 可以在这里触发一个API调用来取消用户订阅
  }
};

// 保存偏好设置的函数
const savePreferences = () => {
  if (!acceptTerms.value) {
    alert('请先同意服务条款。');
    return;
  }
  console.log('正在保存用户偏好设置...');
  console.log('服务条款:', acceptTerms.value);
  console.log('电子报订阅:', receiveNewsletter.value);
  // 实际应用中，这里会发送数据到后端API
  alert('偏好设置已保存！');
};
</script>

<style scoped>
.checkbox-tutorial {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 25px;
}

.setting-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  background-color: #f9f9f9;
}

label {
  display: flex;
  align-items: center;
  font-size: 1.1em;
  color: #555;
  cursor: pointer;
}

input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
}

p {
  margin-top: 10px;
  margin-left: 30px; /* 与checkbox对齐 */
  font-size: 0.9em;
  color: #777;
}

.warning-message {
  color: #d9534f;
  font-weight: bold;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  margin-top: 30px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style>