vue3實(shí)現(xiàn)一個(gè)todo-list

更新時(shí)間：2021年08月24日 11:41:13 作者：YuShiYue

這篇文章主要為大家詳細(xì)介紹了基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能給你帶來(lái)幫助

功能介紹

在這里插入圖片描述

項(xiàng)目的搭建可以參考這篇文章

vue3.x+vite+element-ui+vue-router+vuex+axios搭建項(xiàng)目

相關(guān)代碼

index.vue

<template>
  <div class="todo-list">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>工作計(jì)劃</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="還沒(méi)有待辦的事項(xiàng)~"></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.學(xué)習(xí)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

<template>
  <el-dialog
    title="新增待辦計(jì)劃"
    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="計(jì)劃名稱" prop="title">
        <el-input
          v-model="form.title"
          placeholder="請(qǐng)輸入待辦計(jì)劃名稱"
        ></el-input>
      </el-form-item>
      <el-form-item label="計(jì)劃完成時(shí)間" prop="time">
        <el-date-picker value-format="YYYY/MM/DD" style="width: 100%" v-model="form.time" type="date" placeholder="請(qǐng)選擇計(jì)劃完成時(shí)間">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="計(jì)劃詳細(xì)描述" prop="desc">
        <el-input
          type="textarea"
          :rows="6"
          v-model="form.desc"
          placeholder="請(qǐng)輸入詳細(xì)待辦計(jì)劃"
        ></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: '請(qǐng)輸入待辦計(jì)劃名稱', trigger: ['blur']}
        ],
        time: [
          { required: true, message: '請(qǐng)選擇待辦計(jì)劃時(shí)間', trigger: ['change']}
        ],
        desc: [
          { required: true, message: '請(qǐng)輸入詳細(xì)待辦計(jì)劃', 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

<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>

在這里插入圖片描述