基于Vue.js的element UI中实现todolist

1.在element UI中选择输入框

<el-input
  placeholder="请输入内容"
  v-model="input"
  clearable>
</el-input>

<script>
  export default {
    data() {
      return {
        input: ''
      }
    }
  }
</script>

2.在输入值回车键，使用change方法

<el-input placeholder="请输入内容" value="" v-model="input" 
    clearable size="small" style="width:450px ;" 
        @change="get" > </el-input>
     

3.get方法，保存到服务器

get(e){
      //将用户的输入包装成一个todo对象
      //uuid生成全球唯一的字符串（地址，电脑配置）------>简化版nanoid
      const todoObj={id:nanoid(),title:e,done:false}
      console.log(e);
      console.log(todoObj);
      this.input=''
      // this.arr.push(e)
      // console.log(this.arr);
      // localStorage.setItem(this.num++,JSON.stringify(e))
    }

使用了以下组件，组件之间通信可以使用全局事件总线，vuex，但较为复杂，可以使用以下图示方法，将list组件里的todos数据放进APP.Vue里面，利用APP里的自定义事件利用props方法传入函数到header里面，再返回信息给APP

 在APP.Vue里

 <top :recive='recive'></top>

methods:{
    recive(x){
      console.log('App里的收到的数据',x);
    }
  }

 在top.vue里

props:['recive'],
  methods:{
    get(e){
      //将用户的输入包装成一个todo对象
      //uuid生成全球唯一的字符串（地址，电脑配置）------>简化版nanoid
      const todoObj={id:nanoid(),title:e,done:false}
      this.recive(todoObj)
      console.log(e);
      console.log(todoObj);
      this.input=''
      // this.arr.push(e)
      // console.log(this.arr);
      // localStorage.setItem(this.num++,JSON.stringify(e))
    }
  },

回车后，控制台输出，保存到服务器，this.input为空

3.更改选择状态，是使用elementUI的方法，没有click方法可以用click.native，.native方法是穿透效果，这样可以操作子组件的事件

<el-checkbox :label=todo.id v-model="checkList" @click.native="handlecheck(todo.id)">{{todo.title}}</el-checkbox>

也可以使用UI自带的change方法

<el-checkbox :label=todo.id v-model="checkList" @change="handlecheck(todo.id)">{{todo.title}}</el-checkbox>

<list :todos="todos" :checktodo="checktodo"></list>

checktodo(id) {
      this.todos.forEach((todo) => {
        if (todo.id === id) todo.done = !todo.done;
      });
    },

改变勾选状态。

4.todolist的删除弹框绑定事件，使用elementUI的messagebox

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
</script>

错误做法： 对于取消和确定的按钮绑定事件使用messagebox的回调方法beforeClose()，此方法注意用法的最后一句的说明会暂停实例的回避，这会导致弹窗不会关闭。

我们发现，确认按钮和enter按钮执行的action执行的都是confirm。done方法也一样，主要控制弹窗的关闭。

所以我们就需要在VueComonent实例里面做文章了。

刚刚说beforeClose中第二个参数指向的所在vue实例。所以我们可以打印一下里面的对象和属性。

我们找到所在vue实例里面的绑定元素。也就是触发的那个事件的元素。也就是事件元素。
 

console.log('元素', instance.$refs['confirm'].$el);

 控制台输出

正确方法

        （1）使用callback方法，不会暂停实例，弹窗会正常关闭

使用方法和刚才的beforeclose()相同，不做赘述。

        （2）在提供的实例里已经提供了确认和取消的绑定

        then()是成功后的调用

        catch()是失败后的调用

 在得到id后返回给APP.Vue。对id判断后再对数组进行处理

方法：

4.将保存到到服务器的数组用json方法解析出来

<template>
  <div>
   
    <div v-for="(item,index) in arr" :key="item" id="box">
    <div id="item">
       <el-radio v-model="radio" label="1">{{ item }}</el-radio>
      <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="remove(index)"></el-button>
    </div>
     
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      arr: [],
    };
  },
  methods:{
    remove(i){
      console.log(i);
      this.arr.splice(i,i+1)
      console.log(this.arr);
    }
  },

  beforeMount() {
    // console.log(localStorage.getItem("content"));
    this.arr = JSON.parse(localStorage.getItem("content")) ;
    console.log(this.arr.length);
  },
};
</script>