Vue-TypeScript开发TODOList

学习TypeScript起步的使用总结, 使用了element框架.

关于搭建开发环境的可以看另一篇文章

webpack组合Vue+TypeScript

完整代码

目标功能

添加模块

添加备忘项

Tab菜单

通过改变hash值,显示不同状态的备忘项

全部
已完成
未完成

备忘项操作

编辑.点击编辑图标开始编辑,完成编辑按Enter.如果该项是已完成状态则会被置为未完成状态.
撤销编辑按ESC.
删除该项
设置完成或者未完成

代码实现

定义需要用到的变量

// script 标签内
<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue{

   // 下面的变量相当于Vue中的data(){ // ...data }
    input: string = '';
    allTodoList = [];
    todoList = [];
    oldValue: string = '';
}
</script>

添加模块

双向绑定输入的数据input,以及添加时将数据放入数组allTodoList中
绑定回车事件以及点击添加图标事件.

     // template 标签内
      <el-input v-model="input" 
            maxlength="100%"
            class="ip-el-input-header"
            placeholder="请输入内容"
            @keyup.enter.native="addTodoItem"
            >
<i slot="suffix" class="el-input__icon el-icon-edit" @click="addTodoItem"></i>
    </el-input>

// scirpt 标签内
addTodoItem() :void {

        // 输出为空时.
        if( !this.input.trim().length ){
            alert('请输入内容');
            return;
        }

        let item = {
            name: this.input,
            status: false,
            isEdit: false
        }

        this.allTodoList.push(item);
        this.input = '';
    }

Tab菜单

通过使用不同的hash值来标识不同的选项,使用计算属性computed绑定已完成和未完成的数量.
监听window下的hashchange事件,设置不同的数据展示

 // template 标签内
<div class="badge-box">
        <el-badge :value="allTodoList.length" class="item">
            <a href="#all"><el-button size="small">全部</el-button></a>
        </el-badge>
            <el-badge :value="finishedList.length" class="item">
            <a href="#finish"><el-button size="small">已完成</el-button></a>
        </el-badge>
        <el-badge :value="unfinishedList.length" class="item">
            <a href="#unfinish"><el-button size="small">未完成</el-button></a>
        </el-badge>
</div>

// script 标签内

  // ts中vue的计算属性写法
    get finishedList(): object[]{
        return this.allTodoList.filter( item => {
            return item.status;
        })
    }
    get unfinishedList(): object[]{
        return this.allTodoList.filter( item => {
            return !item.status;
        })
    }

    mounted(){
        window.location.hash = 'all';
        this.todoList = this.allTodoList;

        window.addEventListener('hashchange', () => {
            let hash = window.location.hash.slice(1);

            switch(hash){
                case 'finish':
                    this.todoList = this.finishedList;
                    break;

                case 'unfinish':
                    this.todoList = this.unfinishedList;
                    break;

                case 'all':
                    this.todoList = this.allTodoList;

                default: 
                    break;
            }
        }, false)
    }

备忘项操作

设置为完成或者未完成,使用多选框
绑定:style设置选中的样式
删除
移除数组中的项
编辑
保存旧值,已便取消绑定时可以重置.
设置新值

定义每个备忘项为

{
  name: string // 数据
 isEdit: boolean // 当前是否在编辑,以便切换input
status: boolean // 是否已完成
}

// template标签内
<ul class="list">
            <li v-for="(item, index) of todoList" class="list-item">
            <el-row>
                <el-tag  class="list-item-tag" type="success" 
                  :style="{textDecoration: item.status ? 'line-through' : '',
                          background: item.status ? '#CCC !important' : ''}"
                    v-if="!item.isEdit"
                >
                    {{item.name}}
               <el-checkbox class="list-item-checkbox" v-model="item.status" 
                    ></el-checkbox>
                </el-tag>
                <el-input v-model="item.name" 
                    maxlength="100%"
                    class="list-item-tag"
                    v-else 
                    @click.native="setValue(index, item.name, 'first')"
                    @keyup.enter.native="setValue(index, item.name, 'new')"
                    @keyup.esc.native="setValue(index, item.name, 'old')"
                >
                </el-input>
            <el-button type="success" size="small" icon="el-icon-edit" circle
                    @click="item.isEdit = true"
                ></el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" circle
                    @click="delTodoItem(index)"
                ></el-button>
            </el-row>
            </li>
        </ul>

// script标签内
    delTodoItem(index: number) :void {
        this.allTodoList.splice(index, 1);
    }
    setValue(index: number, name: string, tag: string) :void {
        let cur_item = this.allTodoList[index];

        if(tag === 'first'){            
            this.oldValue = cur_item.name;
            return;
        }else if(tag === 'new'){
            cur_item.name = name;
            cur_item.status = false;
        }else if(tag === 'old'){
            cur_item.name = this.oldValue;
        }

        cur_item.isEdit = false;
        this.allTodoList.splice(index,  1, cur_item)
    }