用vue3写一个可以切换日期的便签
时间: 2023-12-05 21:04:23 浏览: 26
好的,下面是一个简单的实现:
```
<template>
<div class="note">
<div class="note-header">
<span class="note-date">{{ currentDate }}</span>
<button class="note-btn" @click="prevDate"><<</button>
<button class="note-btn" @click="nextDate">>></button>
</div>
<div class="note-body">
<textarea v-model="content"></textarea>
</div>
</div>
</template>
<script>
import { reactive, computed } from 'vue';
export default {
setup() {
const state = reactive({
currentDate: new Date(),
content: '',
});
const prevDate = () => {
state.currentDate.setDate(state.currentDate.getDate() - 1);
};
const nextDate = () => {
state.currentDate.setDate(state.currentDate.getDate() + 1);
};
const formattedDate = computed(() => {
const year = state.currentDate.getFullYear();
const month = state.currentDate.getMonth() + 1;
const date = state.currentDate.getDate();
return `${year}-${month}-${date}`;
});
return {
state,
prevDate,
nextDate,
formattedDate,
};
},
};
</script>
<style scoped>
.note {
width: 300px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
margin: 10px;
}
.note-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.note-date {
font-size: 18px;
}
.note-btn {
background-color: #ccc;
color: #fff;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
outline: none;
}
.note-body {
padding: 10px;
}
textarea {
width: 100%;
height: 150px;
border: none;
resize: none;
outline: none;
}
</style>
```
这个便签组件有一个头部用于显示日期和切换日期的按钮,一个主体用于输入内容。可以通过点击左右箭头按钮来切换日期,日期的格式为 yyyy-MM-dd。同时,通过双向绑定 v-model 来获取用户输入的内容。