列表操作案例

image.png

<template>
  <div id="root">
    <div class="formLists">
      <FormListAdd :addTodos="addTodos"></FormListAdd>
      <FormLists :todos="todos" :todoState="todoState" :delTodos="delTodos"></FormLists>
      <FormCheckbox :todos="todos" :checkAllTodos="checkAllTodos" :clearAllTodos="clearAllTodos"></FormCheckbox>
    </div>
  </div>
</template>

<script>
import FormListAdd from "./components/FormListAdd";
import FormLists from "./components/FormLists";
import FormCheckbox from "./components/FormCheckbox";


export default {
  name: "App",
  components: { FormListAdd, FormLists, FormCheckbox },
  data() {
    return {
      todos: [
        { id: "1", name: "吃饭", state: false },
        { id: "2", name: "睡觉", state: false },
        { id: "3", name: "打豆豆", state: false },
        { id: "4", name: "游戏", state: false },
        { id: "5", name: "喝茶", state: false },
        { id: "6", name: "搓麻将", state: false },
      ],
    };
  },
  methods: {
    // 增加
    addTodos(obj){
        this.todos.unshift(obj)
    },
    // 改
    todoState(id){
        this.todos.forEach((list)=>{
            if (list.id === id) {
                list.state = !list.state
            }
        })
    },
    // 删除
    delTodos(id){
        this.todos = this.todos.filter((list)=>{
            return list.id != id
        })
    },
    // 全选
    checkAllTodos(state){
        this.todos.forEach(e => {
            e.state = state
        });
    },
    // 删除已完成
    clearAllTodos(){
        this.todos = this.todos.filter((list)=>{
            return !list.state
        })
    }
  },
};
</script>

<style lang="scss" scoped>
.formLists {
  border: 1px solid #f7f7f7;
  padding: 1rem;
  border-radius: 0.25rem;
}
</style>

<template>
  <div id="root">
    <div class="formLists">
      <FormListAdd :addTodos="addTodos"></FormListAdd>
      <FormLists :todos="todos" :todoState="todoState" :delTodos="delTodos"></FormLists>
      <FormCheckbox :todos="todos" :checkAllTodos="checkAllTodos" :clearAllTodos="clearAllTodos"></FormCheckbox>
    </div>
  </div>
</template>

<script>
import FormListAdd from "./components/FormListAdd";
import FormLists from "./components/FormLists";
import FormCheckbox from "./components/FormCheckbox";


export default {
  name: "App",
  components: { FormListAdd, FormLists, FormCheckbox },
  data() {
    return {
    //   todos: [
    //     // { id: "1", name: "吃饭", state: false },
    //     // { id: "2", name: "睡觉", state: false },
    //     // { id: "3", name: "打豆豆", state: false },
    //     // { id: "4", name: "游戏", state: false },
    //     // { id: "5", name: "喝茶", state: false },
    //     // { id: "6", name: "搓麻将", state: false },
        
    //   ],
    todos:JSON.parse(localStorage.getItem('todos')) || []
    };
  },
  methods: {
    // 增加
    addTodos(obj){
        this.todos.unshift(obj)
    },
    // 改
    todoState(id){
        this.todos.forEach((list)=>{
            if (list.id === id) {
                list.state = !list.state
            }
        })
    },
    // 删除
    delTodos(id){
        this.todos = this.todos.filter((list)=>{
            return list.id != id
        })
    },
    // 全选
    checkAllTodos(state){
        this.todos.forEach(e => {
            e.state = state
        });
    },
    // 删除已完成
    clearAllTodos(){
        this.todos = this.todos.filter((list)=>{
            return !list.state
        })
    }
  },
  watch:{
    todos:{
        deep:true,
        handler(n){
            localStorage.setItem('todos',JSON.stringify(n))
        }
    }
  }
};
</script>

<style lang="scss" scoped>
.formLists {
  border: 1px solid #f7f7f7;
  padding: 1rem;
  border-radius: 0.25rem;
}
</style>

<template>
    <div class="formLists-header">
        <input class="btn" type="text" v-model="todoName" placeholder="请输入你的任务名,按回车键确认" @keyup.enter="addTodo">
    </div>
</template>

<script>
import { nanoid } from "nanoid";
    export default {
        name: 'FormListAdd',
        props:['addTodos'],
        data() {
            return {
                todoName:''
            }
        },
        methods: {
            addTodo(e){
                if (!this.todoName) return alert('输入不能为空')
                const todoObj = {id:nanoid(),name:e.target.value,state:false}
                this.addTodos(todoObj)
                this.todoName = ''
                // console.log(todoObj)
            }
        },
    }
</script>

<style lang="scss" scoped>
    .formLists-header{
        display: flex;
        .btn{
            display: block;
            width: 100%;
            height: calc(1.5em + 0.75rem + 2px);
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
    }
</style>

<template>
  <div class="formLists-body">
    <ul>
      <FormList 
      v-for="(t,id) in todos"
       :key="id" 
       :todo="t" 
       :todoState="todoState"
       :delTodos="delTodos">
       </FormList>
    </ul>
  </div>
</template>

<script>
    import FormList from "./FormList.vue";
    export default {
        name: "FormLists",
        components: { FormList },
        props:['todos','todoState','delTodos']
        
    };
</script>

<style lang="scss" scoped>
    .formLists-body{
        border: 1px solid #999999;
        border-radius: 0.25rem;
        overflow: hidden;
        margin-top: 1rem;
        &>ul{
            display: flex;
            flex-direction: column;
            margin-bottom: 0;
            padding: 0;
            margin: 0;
            
        }
    }
</style>

<template>
    <li class="lists-item"><input type="checkbox" name="state" :checked="todo.state" @click="upState(todo.id)" /><span>{{todo.name}}</span> <button class="btn" @click="delItem(todo.id)">删除</button></li>
    <!-- 不建议使用 v-model 因为v-model 违背了不修改props 的原则 -->
    <!-- <li class="lists-item"><input type="checkbox" name="state" v-model="todo.state" /><span>{{todo.name}}</span> <button>删除</button></li> -->
</template>

<script>
    export default {
        name: 'FormList',
        data() {
            return {
                
            }
        },
        props:['todo','todoState','delTodos'],
        methods:{
            delete(id){
                console.log(id)
            },
            upState(id){
                this.todoState(id)
            },
            delItem(id){
                if(confirm('确定删除该选项吗？')) this.delTodos(id)
                
            }
        }
    }
</script>

<style lang="scss" scoped>
    .lists-item{
        position: relative;
        display: block;
        padding: 0.75rem 1.25rem;
        background-color: #fff;
        border-bottom: 1px solid rgba(0,0,0,.125);
        &:last-child {
            border: none;
        }
        &:hover{
            background-color: #f7f7f7;
            .btn{
                display: inline-block;
            }
        }
        .btn{
            display: none;
        }
    }
</style>

<template>
    <div class="formLists-footer" v-show="total">
        <div class="fLeft">
            <!-- <input type="checkbox" name="" id="" :checked="isAll" @change="checkAll">已选{{doneTotal}}，全部{{total}} -->
            <input type="checkbox" name="" id="" v-model="isAll" >已选{{doneTotal}}，全部{{total}}/
        </div>
        <div class="fRight">
            <button class="btn" type="submit" @click="clearAll">删除已完成</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'FormCheckbox',
        data() {
            return {
            }
        },
        props:['todos','checkAllTodos','clearAllTodos'],
        computed: {
            // doneTotal(){
            //     let i = 0
            //     this.todos.forEach(e => {
            //         if(e.state) i++
            //     });
            //     reduc
            //     return i
            // }
            doneTotal(){
                // return this.todos.reduce((pre,current)=>{
                //     // console.log('@',pre,current.state)
                //     return pre + (current.state ? 1 : 0)
                // },0)

                 return this.todos.reduce((pre,current)=> pre + (current.state ? 1 : 0) ,0)
            },
            total(){
                return this.todos.length
            },
            isAll:{
                get(){
                    return this.doneTotal === this.total && this.total > 0
                },
                set(value){
                    this.checkAllTodos(value)
                }
            }
        },
        methods: {
            checkAll(e){
                this.checkAllTodos(e.target.checked)
            },
            clearAll(){
                if(confirm('确认删除已完成')) this.clearAllTodos()
            }
        },
    }
</script>

<style lang="scss" scoped>
    .formLists-footer{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1rem;
        .fLeft{
            font-size: 14px;
            color: #999999;
            display: flex;
            align-items: center;
        }
        .btn{
            display: inline-block;
            font-weight: 400;
            text-align: center;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            color: #fff;
            background-color: #0069d9;
            border-color: #0062cc;
        }
    }
</style>