tab切换

1、tab切换

所有 完成 未完成，事件@click="filterList(1)"
1 2 3

filterList (type) {
  this.curFilterType = type;
  switch(type) {
    case 1: 
      this.newList = this.list; // html中也是渲染newList，这个的目的是为了不改变原数组，很重要
      break;
    case 2: 
      this.newList = this.list.filter(item =>{
        return item.status; // 返回item.status == true的
      })
      break;
    case 3: 
      this.newList = this.list.filter(item =>{
        return ！item.status; // 返回item.status == false的
      })
      break;
  }
}

image.png

2、修改其中一个数组项的状态
这里要注意的是修改完还需要刷新列表即重新过滤一遍数组，否则数据不会即时改变
@click="changeStatus(index)"

changeStatus(index) {
    this.newList[index].status = !this.newList[index].status
    this.filterList(this.curFilterType）
}

3、双击出现input框 编辑保存或取消

image.png

思维：
利用样式（添加类）实现，双击时隐藏 div，同级的input显示
双击事件@dblclick， 双击事件时把当前索引赋值给curIndex
通过判断当前索引和curIndex是否相等 决定是否 添加类editing
input 通过v-model 绑定值，且通过自定义的指令 v-focus 光标定位

image.png image.png

<input type="text" class="text2" v-model="item.name" v-focus
@blur="edited" @focus="editBefore(item.name)" @keyup.esc="cancelEdit(item)" />

focus：在得到焦点的时候先把原有的name值保存下来，等待取消的时候还原
blur：失去光标的时候执行保存
keyup.esc：按删除键取消

光标定位 指令 实现

directives:{
  focus: {
    update(el) {
      el.focus();
    },
    inserted: function (el) { // 页面加载时触发 自动获取焦点
       el.focus();
    }
  }
}

image.png

https://cn.vuejs.org/v2/guide/custom-directive.html