服务器之家

服务器之家 > 正文

vue3实现一个todo-list

时间：2021-12-01 16:18     来源/作者：YuShiYue

实现方式不是最优,主要是为了学习vue3的一些新语法以及属性

功能介绍

vue3实现一个todo-list

vue3实现一个todo-list

vue3实现一个todo-list

项目的搭建可以参考这篇文章

vue3.x+vite+element-ui+vue-router+vuex+axios搭建项目

相关代码

index.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<template>
  <div class="todo-list">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>工作计划</span>
          <el-button
            class="button"
            type="primary"
            icon="el-icon-circle-plus"
            circle
            @click="handleClickTodo"
          ></el-button>
        </div>
      </template>
      <template v-if="list.length > 0">
        <todo-item
          v-for="(val, index) in list"
          :key="index"
          :info="val"
        ></todo-item>
      </template>
      <el-empty v-else description="还没有待办的事项~"></el-empty>
    </el-card>
    <add-action v-model:visible="visible"></add-action>
  </div>
</template>
<script>
import AddAction from "./AddTodo.vue";
import TodoItem from "./Item.vue";
import { reactive, toRefs, provide } from "vue";
export default {
  name: "todo-list",
  components: { AddAction, TodoItem },
  setup() {
    const state = reactive({
      visible: false,
      list: [
        {
          title: "1.学习vue3.0",
          time: "2021-08-20",
          desc: "1.ppppppppppppp",
          status: false,
        },
      ],
    });
    const addTodo = (data) => {
      state.list.push(data);
    };
    const delTodo = (title) => {
      state.list = state.list.filter((val) => val.title !== title);
    };
    const handleClickTodo = () => {
      state.visible = true;
    };
    provide("addTodo", addTodo);
    provide("delTodo", delTodo);
    return {
      handleClickTodo,
      ...toRefs(state),
    };
  },
};
</script>
<style>
.todo-list {
  padding: 100px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 480px;
}
</style>

AddTodo.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<template>
  <el-dialog
    title="新增待办计划"
    v-model="visible"
    width="600px"
    @close="handleClose"
  >
    <el-form
      style="width: 430px"
      :model="form"
      :rules="rules"
      label-width="120px"
      ref="formRef"
    >
      <el-form-item label="计划名称" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入待办计划名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="计划完成时间" prop="time">
        <el-date-picker value-format="YYYY/MM/DD" style="width: 100%" v-model="form.time" type="date" placeholder="请选择计划完成时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="计划详细描述" prop="desc">
        <el-input
          type="textarea"
          :rows="6"
          v-model="form.desc"
          placeholder="请输入详细待办计划"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { reactive, toRefs, ref, inject } from "vue";
export default {
  name: "add-todo",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const formRef = ref(null)
    const addTodo = inject('addTodo')
    const state = reactive({
      form: {
        title: "",
        desc: "",
        time: "",
        status: false
      },
      rules: {
        title: [
          { required: true, message: '请输入待办计划名称', trigger: ['blur']}
        ],
        time: [
          { required: true, message: '请选择待办计划时间', trigger: ['change']}
        ],
        desc: [
          { required: true, message: '请输入详细待办计划', trigger: ['blur']}
        ]
      },
    });
    const handleClose = () => {
      emit("update:visible", false);
      formRef.value.clearValidate()
      formRef.value.resetFields()
    };
    const handleConfirm = () => {
      formRef.value.validate(valid => {
        if (valid) {
          addTodo(JSON.parse(JSON.stringify(state.form)))
          handleClose()
        }
      })
    }
    return {
      formRef,
      ...toRefs(state),
      handleClose,
      handleConfirm
    };
  },
};
</script>

Item.vue

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<template>
  <div class="todo-item">
    <div class="titme-box">
      <el-checkbox v-model="info.status" @click="change"></el-checkbox>
      <h3 :class="info.status ? 'success' : ''">{{ info.title }}</h3>
    </div>
    <div class="del">
      <p class="time" :class="info.status ? 'success' : ''">{{ info.time }}</p>
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        size="mini"
        @click="handleDelTodo"
      ></el-button>
    </div>
  </div>
</template>
<script>
import { inject } from "vue";
export default {
  name: "todo-item",
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const delTodo = inject("delTodo");
    const handleDelTodo = () => {
      delTodo(props.info.title);
    };
    return {
      handleDelTodo,
    };
  },
};
</script>
<style lang="scss">
.todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(229, 226, 226);
  height: 45px;
  line-height: 45px;
  .success {
    text-decoration: line-through;
  }
  .titme-box {
    display: flex;
    align-items: center;
    h3 {
      padding-left: 12px;
      font-size: 16px;
    }
  }
  .del {
    display: flex;
    align-items: center;
    .time {
      width: 100px;
      font-size: 14px;
    }
  }
}
</style>

vue3实现一个todo-list

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注服务器之家的更多内容！

原文链接：https://blog.csdn.net/YuShiYue/article/details/119830319

标签：
list Todo Vue3 

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部