使用vue框架的全局事件总线制作Todolist的事件选项编辑（制效果视频&制作思路&源码）

一、制作效果呈现

 

 二、准备事项、设计思路和注意事项

 1）准备事项 

      （1）在做这个可编辑todolist选项的时候，你的有一个可以编写正常的todolist。

         （2）拥有一个编辑按钮

2）设计思路 

 称谓图解

  

3）注意事项 ，经验小提示

          （1） 给存储项目条例的对象增加属性（控制是否点击编辑按钮的布尔值）时，应该区分，第一次点击编辑还是非第一次，第一次点击才需要添加该属性，以后的点击只需要改变就行。下面样例就命名该属性为edite。

//点击编辑按钮触发的函数名penInput
penInput(item){   //传入存储项目条例所有内容的对象item
    if（item.hasOwnProperty）{ 
        this.$bus.$set('存储项目条例对象',“edite”，属性值)
    } else{
        item.edite = true  //通过item.edite控制配合v-show来控制input出现还是隐藏
    }
    
    
}

          （2）在点击编辑按钮显示项目条例input框时，需要借助this.$netxTick(function(){})来实现点击按钮即刻出现input聚焦。否则会出现，input框虽然出现，但不惦记input输入框则不聚焦。 

//点击编辑按钮触发的函数名penInput
penInput(item){   //传入存储项目条例所有内容的对象item
    if（item.hasOwnProperty）{ 
        this.$bus.$set('存储项目条例对象',“edite”，属性值)
    } else{
        item.edite = true  //通过item.edite控制配合v-show来控制input出现还是隐藏
    }
    
    this.$nextTick(function(){  //功能：下一次DOM更新完毕后执行$nextTick回调函数，如果没有，就不会出现聚焦，因为执行这penInput块的时候，页面还没有input框
       this.$refs.标识名.focus();   //通过：refs给input打个标签，通过标签获取标签的聚焦
    })
}

         （3）精致input编辑框内没有任何内容。

        （4）input失焦后，触发的函数需要有item（项目条例对象），并且要获取input的编辑值给APP传数据时，利用$event获取事件对象。

//失去焦点后触发的自定义函数名 closeInput
closeInput(item,e){   //参数item是项目条例数据对象，e,input失焦事件对象
            item.eidte = false;
            if(!e.target.value.trim()){
              alert('输入框内不允许为空');
              return
            };
            this.$bus.$emit('updateT',item.id,e.target.value);
          }
        },