vue3打卡组件源代码

以下是一个简单的 Vue 3 打卡组件的源代码示例：

<template>
  <div class="clock-in">
    <h2>{{ title }}</h2>
    <p>{{ date }}</p>
    <button v-on:click="clockIn">打卡</button>
    <p v-if="clockedIn">已打卡</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  props: {
    title: String,
  },
  setup(props) {
    const state = reactive({
      date: new Date().toLocaleDateString(),
      clockedIn: false,
    });

    const clockIn = () => {
      state.clockedIn = true;
    };

    return {
      title: props.title,
      date: state.date,
      clockedIn: state.clockedIn,
      clockIn,
    };
  },
};
</script>

<style scoped>
.clock-in {
  border: 2px solid #ccc;
  padding: 10px;
  margin: 10px;
  text-align: center;
}
</style>

在这个组件中，我们定义了一个 `title` 属性作为组件的标题，使用 `props` 接收外部传入的数据。在 `setup` 函数中使用 `reactive` 创建了一个响应式对象 `state`，包含一个 `date` 属性表示当前日期，一个 `clockedIn` 属性表示是否已经打卡。同时定义了一个 `clockIn` 方法，用于将 `clockedIn` 属性设置为 `true`。最后通过 `return` 返回需要暴露给模板的数据和方法。

在模板中使用这些数据和方法，当点击 `打卡` 按钮时会触发 `clockIn` 方法，将 `clockedIn` 属性设置为 `true`，同时根据 `clockedIn` 属性的值来显示是否已经打卡的文本。最后使用 `scoped` 关键字限制样式只对当前组件有效，避免样式冲突。