master

分支 (8)

管理

管理

master

8月30

8月27

8月23

8月22

8月21

8月16

8月17

zt_third
/
ToDoList.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue.js"></script>
  <link rel="stylesheet" href="./css/index.css">
  <style>

  </style>
</head>

<body>
  <div id="root">
    <input type="text" placeholder="请输入2-8个字符" class="addlist" v-model="addInput" @keyup.enter="addData">
    <div class="main">
      <ul class="tag">
        <li :class="{active:tag.tag1}" @click="changeTag">未完成</li>
        <li :class="{active:tag.tag2}" @click="changeTag">已完成</li>
      </ul>
      <ol class="page">
        <li v-show="tag.tag1">
          <ul>
            <p>
              <label><input type="checkbox" @change="allButton($event,'unFin')" v-model="all.allunFin">全选</label>
              <span>
                <button :class="{active:all.allunFin}" @click="triggerAll('unFin')">批量添加为已完成</button>
              </span>
            </p>
            <li v-for="(item,index) in unFin" :key="item.id">
              <p><input type="checkbox" :value="item" v-model="unFinFocus" @change="select($event,'unFin')"></p>
              <p><input type="text" v-model="item.value" @change="changeText('unFin',item.id)"></p>
              <p><button @click="trigger(item.id)">已完成</button><button @click="del(item.id)">删除</button></p>
            </li>
          </ul>
        </li>
        <li v-show="tag.tag2">
          <ul>
            <p>
              <label><input type="checkbox" @change="allButton($event,'fin')" v-model="all.allfin">全选</label>
              <span>
                <button :class="{active:all.allfin}" @click="triggerAll('fin')">批量切换为未完成</button>
              </span>
            </p>
            <li v-for="(item,index) in fin" :key="item.id">
              <p><input type="checkbox" :value="item" v-model="finFocus" @change="select($event,'fin')"></p>
              <p><input type="text" v-model="item.value" @change="changeText('fin',item.id)"></p>
              <p><button @click="trigger(item.id)">未完成</button><button @click="del(item.id)">删除</button></p>
            </li>
          </ul>
        </li>
      </ol>
    </div>
  </div>
  <script src="./js/Store.js"></script>
  <script>
    // 添加默认数据开始
    const store = new Store;
    const key = 'list'
    // 如果没有数据添加几条 有则不添加
    // if (!store.get(key)) {
    //   store.set(key, [
    //     { id: 1, value: '这是几条', flag: false },
    //     { id: 2, value: '默认数据', flag: false },
    //     { id: 3, value: '没有数据', flag: false },
    //     { id: 4, value: '才会添加', flag: false },
    //     { id: 5, value: '吃饭', flag: true },
    //     { id: 6, value: '睡觉', flag: true },
    //     { id: 7, value: '打代码', flag: true }
    //   ])
    // }
    // 添加默认数据结束


    // 关键词
    const sensitiveWord = ['admin', '小明', '小刚']

    // 创建vue实例
    const vm = new Vue({
      el: '#root',
      data() {
        return {
          // 添加内容输入框
          addInput: '',

          // 两个全选按钮
          all: {
            allunFin: false,
            allfin: false,
          },

          // tab切换
          tag: {
            tag1: true,
            tag2: false,
          },

          // 两个列表的数据
          unFin: store.get(key).filter(item => !item.flag),
          fin: store.get(key).filter(item => item.flag),

          unFinFocus: [],
          finFocus: [],
          // 关键词数据
          sensitiveWord
        }
      },
      methods: {
        updateList() {
          this.unFin = store.get(key).filter(item => !item.flag)
          this.fin = store.get(key).filter(item => item.flag)
          this.all.allunFin = false
          this.all.allfin = false
        },

        // tab切换方法
        changeTag() {
          this.tag.tag1 = !this.tag.tag1
          this.tag.tag2 = !this.tag.tag2
        },

        // // input框添加数据方法
        addData() {
          let str = this.addInput
          if (str.length > 10 || str.length < 2) return alert('字数不符合要求')
          str = " " + str + " "
          for (var i = 0; i < this.sensitiveWord.length; i++) {
            if (str.split(this.sensitiveWord[i]).length !== 1) {
              console.log(this.sensitiveWord[i]);
              return alert('不能包含敏感词 "' + this.sensitiveWord[i] + ' "')
            }
          }
          let arr = store.get(key);
          let newDate = [...arr, { id: new Date().getTime(), value: this.addInput, flag: false }]
          store.set(key, newDate)
          this.addInput = '';
          this.updateList()
        },

        // 切换单条数据  完成 未完成之间切换
        trigger(id) {
          let arr = store.get(key);
          let newDate = arr.map(item => {
            if (item.id == id) {
              item.flag = !item.flag
            }
            return item
          })
          store.set(key, newDate)
          this.updateList()
        },

        // 删除一条数据
        del(id) {
          if (!confirm('确认删除一条?')) return
          let arr = store.get(key);
          let newDate = arr.filter(item => item.id != id)
          store.set(key, newDate)
          this.updateList()
        },

        // 全选按钮 点击事件    page是(fin 或者 unFin 是我用来区分两个页面的)
        allButton(e, page) {
          if (e.target.checked) {
            this[page + 'Focus'] = [...this[page]]
          } else {
            this[page + 'Focus'] = []
          }
        },

        // 单选按钮点击事件  page是(fin 或者 unFin 是我用来区分两个页面的)
        select(e, page) {
          this.all['all' + page] = this[page + 'Focus'].length == this[page].length
        },

        // 切换全部的点击事件    page是(fin 或者 unFin 是我用来区分两个页面的)
        triggerAll(page) {
          // if (!confirm('确认切换所有数据?')) return
          let arr = store.get(key);
          this.unFinFocus = []
          this.finFocus = []
          if (page == 'unFin') {
            arr.forEach(item => item.flag = true)
          } else if (page == 'fin') {
            arr.forEach(item => item.flag = false)
          }
          store.set(key, arr)
          this.updateList()
        },

        // 失去焦点 判断有没有改变 触发change事件  page是(fin 或者 unFin 是我用来区分两个页面的)
        changeText(page, id) {
          let Item = this[page].find(item => item.id == id)
          let arr = store.get(key);
          let Index = arr.findIndex(item => item.id == id)
          arr[Index] = Item
          store.set(key, arr)
          this.updateList()
        }
      }
    })
  </script>
</body>

</html>