学习TypeScript起步的使用总结, 使用了element框架.
关于搭建开发环境的可以看另一篇文章
目标功能
- 添加模块
添加备忘项
- 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)
}
