vue实现点击签到功能

Vue 实现点击签到功能

数据绑定与状态管理

在 Vue 组件的 data 或 setup 中定义签到状态变量，例如 isSigned，默认为 false。通过 v-model 或 v-bind 绑定到按钮的 disabled 属性，控制按钮可点击状态。

<template>
  <button @click="handleSign" :disabled="isSigned">
    {{ isSigned ? '已签到' : '点击签到' }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      isSigned: false
    }
  },
  methods: {
    handleSign() {
      this.isSigned = true;
      // 可在此处调用API提交签到数据
    }
  }
}
</script>

调用后端API

通过 axios 或 fetch 发送签到请求到后端接口，处理成功或失败的回调。建议添加加载状态防止重复提交。

methods: {
  async handleSign() {
    try {
      const response = await axios.post('/api/sign', { userId: 123 });
      if (response.data.success) {
        this.isSigned = true;
      }
    } catch (error) {
      console.error('签到失败:', error);
    }
  }
}

本地存储持久化

使用 localStorage 或 sessionStorage 保存签到状态，避免页面刷新后状态丢失。

methods: {
  handleSign() {
    this.isSigned = true;
    localStorage.setItem('signStatus', 'true');
  },
  mounted() {
    const savedStatus = localStorage.getItem('signStatus');
    if (savedStatus === 'true') {
      this.isSigned = true;
    }
  }
}

日期验证

通过 new Date() 获取当前日期，与存储的最后签到日期对比，实现每日仅能签到一次。

data() {
  return {
    lastSignDate: null
  }
},
methods: {
  handleSign() {
    const today = new Date().toDateString();
    if (this.lastSignDate !== today) {
      this.lastSignDate = today;
      localStorage.setItem('lastSignDate', today);
    }
  }
}

动画反馈

使用 Vue 的过渡或第三方动画库（如 animate.css）增强交互体验。

<transition name="bounce">
  <div v-if="isSigned" class="feedback">签到成功！</div>
</transition>

<style>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
@keyframes bounce-in {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>

组件化设计

将签到功能封装为独立组件，通过 props 接收用户ID等参数，通过 $emit 触发父组件事件。

<!-- 父组件 -->
<SignButton :userId="userId" @signed="onSigned" />

<!-- 子组件 -->
<script>
export default {
  props: ['userId'],
  methods: {
    handleSign() {
      this.$emit('signed', { userId: this.userId });
    }
  }
}
</script>