vue实现todo待办事项效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue实现todo待办事项效果代码，使用了store及vuex技术

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway|Lobster+Two" rel="stylesheet">

<style>
/**
* Variables
**/
/**
* Global
**/
* {
  box-sizing: border-box;
}

body, html {
  min-height: 100%;
  background: #efefef;
  overflow: hidden;
}

h1 {
  color: #fcfcfc;
  text-align: center;
  text-shadow: 0px 0px 5px #26C6DA, 1px 1px 5px #26C6DA, -1px -1px 5px #26C6DA, 1px -1px 5px #1e9faf, -1px 1px 5px #26C6DA;
  font-family: "Lobster Two", cursive;
}

input, span {
  border: 0;
  border-radius: 5px;
  font-family: "Raleway", sans-serif;
  white-space: wrap;
  padding-left: 1em;
  min-width: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  display: none;
}

::-webkit-scrollbar-thumb {
  display: none;
}

/**
* Components
**/
.btn {
  min-height: 43px;
  min-width: 43px;
  border: 0;
  padding: 0;
  color: #fcfcfc;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
  font-size: 1.25em;
  border-radius: 5px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background: #26C6DA;
}
.btn-primary:hover {
  background: #1e9faf;
}

.bg-primary {
  background: #26C6DA;
  color: #fcfcfc;
}

.active {
  opacity: 0.5;
  cursor: not-allowed;
}

.complete {
  text-decoration: line-through;
}

.rounded {
  border-radius: 5px;
}

.editing {
  border: 1px dashed #67d7e5;
}

.box-shadow {
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.25);
}

.todo {
  padding: 0.5em 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.todo div {
  width: 100%;
}
.todo .todo__content {
  display: flex;
}
.todo .todo__content .todo__input {
  flex: 6;
  height: 43px;
  line-height: 43px;
  padding-left: 0.25em;
}
.todo .todo__content .todo__text {
  cursor: pointer;
  flex: 5;
  height: 43px;
  line-height: 43px;
  white-space: nowrap;
  overflow-x: scroll;
  padding-left: 0.25em;
}
.todo .todo__content .todo__buttons {
  display: flex;
  flex-direction: row;
}
.todo .todo__content .todo__buttons button {
  margin: 0 0.25em;
}

/**
* Sections
**/
#app {
  position: absolute;
  max-width: 500px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 95%;
  margin: 1em auto;
  overflow: hidden;
}

#addTodo {
  display: flex;
  padding: 1em 0;
  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.15);
}
#addTodo > * {
  margin: 0.25em;
}
#addTodo input {
  flex: 5;
}

#todoList {
  height: 275px;
  position: relative;
  padding: 0.5em 0;
  list-style: none;
  overflow-x: hidden;
  margin: 0;
}

#filterButtons {
  position: relative;
  z-index: 100;
  padding: 1em 0;
  display: flex;
  justify-content: center;
  box-shadow: 1px -5px 8px 0px rgba(0, 0, 0, 0.15);
}
#filterButtons > * {
  margin: 0 1em;
}

.slide-enter, .slide-enter-active {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-leave, .slide-leave-active {
  opacity: 0;
  position: absolute;
}
</style>



</head>

<body >
  <div id="app">
  <h1>Vue Todo App</h1>
  <form id="addTodo" @submit.prevent="addTodo">
    <input type="text" 
           v-model="currentTodo.text"
           placeholder="Add a todo">
    <button class="btn btn-primary" 
            type="submit">
      <i class="fa fa-plus"></i>
    </button>
  </form>
  <transition-group name="slide" tag="ul" id="todoList">
    <li class="todo" 
        v-for="(todo, index) in filteredTodos" 
        :key="todo.id">
      <div v-show="todo.editing === false">
        <div class="todo__content">
          <span @click="toggleComplete(todo)" 
                class="todo__text"
                :class="{ complete : todo.complete }"
                >
            <i v-if="!todo.complete" class="fa fa-circle-o"></i>
            <i v-if="todo.complete" class="fa fa-check-circle-o"></i>
            {{ todo.text }}
          </span>
          <span class="todo__buttons">
            <button class="btn btn-primary" 
                    @click="toggleEditing(todo)">
              <i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-primary" 
                    @click="deleteTodo(todo)">
              <i class="fa fa-times"></i>
            </button>
          </span>
        </div>
      </div>
      <div v-show="todo.editing === true">
        <form @submit.prevent="toggleEditing(todo)"
              class="todo__content">
          <input @input="updateTodo"
                 :value="todo.text"
                 :id="todo.id"
                 class="editing todo__input"
                 ref="edit_input">
          <span class="todo__buttons">
            <button class="btn btn-primary" 
                    type="submit">
              <i class="fa fa-check"></i>
            </button>
          &l.........完整代码请登录后点击上方下载按钮下载查看