vue todolist

这里实现一个todolist的增删改查排序样例，供其他开发人员参考。

结构

项目结构

除基础样式外，这里不使用原生css，基础样式：

html,body{
    width:100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
div,ul,li,button,input{
    margin: 0;
    padding: 0;
}

演示样式，正式开发请使用公共初始化样式(项目公共、团队遵守、reset css或者normalize css等)。

页面结构

<div class="index">
    <a href="http://www.indeex.cc">
      <img src="../assets/logo.png" class="logo">
    </a>
    <div class="container">
      <div class="submit">
        <input type="text" placeholder="Your add content">
        <button>add</button>
      </div>
      <div class="seacher">
        <input type="text" placeholder="Your seach keyword">
        <button>seach</button>
      </div>
      <div class="other">
        <button>a-z(chinese)</button>
        <button>time</button>
      </div>
      <ul>
        <li></li>
      </ul>
    </div>

</div>

页面结构根据需要调整，这里只做演示，正式开发不要使用此结构。

对于ul li使用组件：

<!-- 此结构仅供演示 -->
<template>
  <div class="li">
    <li>
      {{item.title}}
      <div class="modify">
        <input type="text">
        <div class="btns">
          <button class="confim">ok</button>
          <button class="cancel">cancel</button>
        </div>
      </div>
    </li>

    <button>delete</button>
  </div>
</template>

功能

开始功能编写，编写增加功能。

增加

添加增加数据事件：

结构：

<div class="submit">
    <input type="text" placeholder="Your add content">
    <button @click="onClickHandler">add</button>
</div>

交互：

private list: object[] = [];
private inputValue: string = "";
private id: number = 0;

private onClickHandler(e: object): void {
    let obj: object = {
      id: ++ this.id,
      timer: new Date().getTime(),
      title: this.inputValue
    };
    this.list.push(obj);
    this.inputValue = "";
}

鉴于目前很不稳定，且vue cli经常崩溃，这里建议暂时将事件参数e: object的类型设置为any类型，待稳定后再确定类型或者自己更改主类型(不建议)。

这里不需要其他访问权限，使用private即可，如果需要class的实现访问，请使用protected，公开访问权限使用public，默认权限为包内访问权限。

给input输入框添加双向数据绑定：

<input type="text" v-model="inputValue" placeholder="Your add content">

删除

删除功能，删除按钮写在子组件中：

子组件结构：

<button @click="delClick(index)">delete</button>

子组件交互，这里使用父子组件传值方式：

@Prop() private item!: any;
@Prop() private delClick!: Function;
@Prop() private index!: number;

注意变量类型与父组件声明的类型保持一致。

父组件结构：

<ul>
    <Li v-for="(item, index) in list" v-bind:key="index" v-bind:index="index" v-bind:item="item" v-bind:delClick="delClickHandler"></Li>
</ul>

父组件交互，将删除能力交给父组件：

private delClickHandler(index: number): void {
    this.list.splice(index, 1);
}

这里index又从子组件传递回来。

修改

修改功能需要增加新的结构：

子组件结构：

<li @click="modifyClickHandler(index)">
      {{item.title}}
      <div class="modify" v-if="!hideClass">
        <input type="text" v-model="modifyValue">
        <div class="btns">
          <button class="confim" @click.stop="confim">ok</button>
          <button class="cancel" @click.stop="cancel">cancel</button>
        </div>
      </div>
</li>

防止父级触发事件，在@click增加.stop阻止子级向父级冒泡。

增加点击li标签时，控制显示修改的变量：

private hideClass: boolean = true;

子组件交互：

@Prop() private modifyClick!: Function;
private modifyValue: string = this.item.title;

private modifyClickHandler(index: number): void {
    this.hideClass = false;
  }
private confim(e: any): void {
    this.modifyClick(this.modifyValue, this.index);
    this.cancel(null);
}
private cancel(e: any = null): void {
    this.hideClass = true;
}

由于需要在点击确定时关闭修改界面，调用cancel方法，将事件参数e: any默认设置为null。

父组件交互：

private modifyClickHandler(value: string, index: number): void {
    this.list.forEach((item: any, _index: number) => {
      if (_index === index) {
        item.title = value;
      }
    });
}

利用父子组件传递的index修改指定内容即可。

搜索

搜索功能相对于修改功能简单很多。

结构：

<div class="seacher">
    <input type="text" v-model="seachValue" placeholder="Your seach keyword">
    <button @click="seachClickHandler">seach</button>
</div>

交互：

private seachValue: string = "";

private seachClickHandler(e: any): void {
    if (this.seachValue.length > 0) {
      this.list = this.list.filter((item: any, index: number) => {
        // if(item.title === this.seachValue){//精确搜索
        if (item.title.indexOf(this.seachValue) > -1) {
          return true;
        } else {
          return false;
        }
      });
    }
}

如果需要精确搜索到指定的内容，直接判断item.title === this.seachValue是否完全相同即可。

排序

结构：

<div class="other">
    <button @click="sortClickHandler">a-z(chinese)</button>
</div>

交互：

private sortB: boolean = false;

private sortClickHandler(e: any): void{
    this.sortB = !this.sortB;
    this.list = this.list.sort((a: any, b:any): any => {
      if(this.sortB) return a.title.localeCompare(b.title,'zh');
      else b.title.localeCompare(a.title,'zh');
    });
}

这里以中文排序为主，如果需要本地化排序，去掉第二个参数'zh'即可。

然后，完善一下其他功能。

样式

根据个人喜好，略。

功能和样式基本完善。

demo请访问：💻todolist💻

code enjoy! ÒܫÓ

作者：indeex

链接：http://indeex.cc

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。