mirror of
https://github.com/Dichgrem/Vue.git
synced 2025-12-16 21:51:59 -05:00
90 lines
1.4 KiB
Vue
90 lines
1.4 KiB
Vue
<template>
|
||
<div>
|
||
<h1>待办事项</h1>
|
||
|
||
<div class="input-wrapper">
|
||
<input
|
||
placeholder="请输入您的待办事项，按下回车后即可添加"
|
||
v-model.trim="newTodo"
|
||
@keyup.enter="addNewTodo"
|
||
/>
|
||
</div>
|
||
|
||
<p v-show="isShowMsg" style="color: red">
|
||
最多输入{{ countLimit }}个字符！！！
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
h1 {
|
||
color: #409eff;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
input {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
padding: 12px;
|
||
font-size: 16px;
|
||
border: 2px solid #409eff;
|
||
border-radius: 6px;
|
||
outline: none;
|
||
display: block;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
input {
|
||
-webkit-text-size-adjust: 100%;
|
||
}
|
||
|
||
.input-wrapper {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
input:focus {
|
||
border-color: #409eff;
|
||
box-shadow: 0 0 4px rgba(64, 158, 255, 0.5);
|
||
}
|
||
|
||
p {
|
||
margin-top: 8px;
|
||
color: red;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
const WORD_COUNT_LIMIT = 50;
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
newTodo: "",
|
||
countLimit: WORD_COUNT_LIMIT,
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
isShowMsg() {
|
||
return this.newTodo.length > WORD_COUNT_LIMIT;
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
addNewTodo() {
|
||
if (this.newTodo.length === 0 || this.newTodo.length > WORD_COUNT_LIMIT) {
|
||
return;
|
||
}
|
||
|
||
this.$emit("addTodo", this.newTodo);
|
||
this.newTodo = "";
|
||
},
|
||
},
|
||
};
|
||
</script>
|