[JavaScript知识库]HTML+CSS+VUE 简易的便签

最近用vue做了一个简易的便签功能，所以来简单地展示和分析一下里面用到了哪些东西，也是怕自己会忘记，来，先看效果

里面的有以下几个功能：

1. 添加
2. 修改
3. 删除
4. 筛选

添加

点击旁边的添加按钮会弹出一个编辑页面，有标题和内容两个输入框，可以只填写其中的一个，但是不能完全空白，代码如下

    <div class="add-box" :style="{visibility:modify ?'visible':'hidden'}">
      <div class="add-content">
        <input type="text" ref="getValue" placeholder="请输入标题"><br>
        <textarea ref="gettextarea" style="height: 55%;width: 80%;"></textarea><br>
        <div class="button-box">
          <button @click='control'>确定</button>
          <button @click='cancel'>取消</button>
        </div>
      </div>
    </div>

     add() {
            if (this.$refs.getValue.value == '' && this.$refs.gettextarea.value == '') return alert('还没有输入内容')
            let addnotes = {
                title: this.$refs.getValue.value,
                text: this.$refs.gettextarea.value,
                presenttime: this.acquisitiontime()
            }
            this.memo.unshift(addnotes)
            this.addbackground()
            alert('添加成功')
            this.$refs.getValue.value = ''
            this.$refs.gettextarea.value = ''
            this.inputvalue = ''
            this.cancel()
            this.getinput()
        },

修改

点击便签后会把标题和内容显示在编辑页面相应的两个框中，点击确定修改完后会更新时间

        acquisitiontime() {
            const date = new Date()
            var year = date.getFullYear();
            /*  使用三元表达式在小于10的前面加0 
             * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        },


       modifycontent(a) {
            // console.log(a)
            this.memo[a].title = this.$refs.getValue.value
            this.memo[a].text = this.$refs.gettextarea.value
            this.memo[a].presenttime = this.acquisitiontime()
            alert('修改成功')
            this.$refs.getValue.value = ''
            this.$refs.gettextarea.value = ''
            this.cancel()
        },

删除

在每一便签里都有一个删除按钮，只要鼠标移动到便签上面就会显示出来，点击后会提示是否删除，点击确定，删除成功

 <div class="memo">
        <ul>
          <li v-for='(item,index) in memonext' :style='{backgroundColor:background[index]}' >
            <div @click='revise(index)'>
              <h3>{{item.title}}</h3>
              <hr>
              <p>{{item.text}}</p>
              <hr>
              <span>日期:<em>{{item.presenttime}}</em></span>
            </div>
            <div class="delete-box" @click='out(index)'><i></i></div>
          </li>
        </ul>
      </div>

        out(a) {
            if (confirm('确定要删除吗')) {
                for (let index = 0; index < this.memo.length; index++) {
                    let title = this.memonext[a].title
                    let text = this.memonext[a].text
                    let presenttime = this.memonext[a].presenttime
                    if (title === this.memo[index].title && text === this.memo[index].text && presenttime === this.memo[index].presenttime) {
                        this.memo.splice(index, 1)
                        return
                    }
                }
            }
        }

删除为了不把相同的便签误删，会按照被点击的便签的标题，内容，还有时间去比对，只有全部相同的才会被删除。

筛选

在最上方的输入框中输入你要查找的内容，按下回车，就会通过模糊查询，来把你需要的便签筛选出来，如果什么都没有就会显示全部便签的内容

      <div class="input-box">
        <i></i>
        <input type="text" @keyup.enter='getinput' v-model='inputvalue' placeholder="请输入要查找的内容">
        <hr>
      </div>

        getinput() {
            if (this.inputvalue === '') return this.memonext = this.memo
            let sift = this.memo.filter((p) => {
                return p.title.indexOf(this.inputvalue) !== -1 || p.text.indexOf(this.inputvalue) !== -1
            });
            return this.memonext = sift
        },

如果想要源码的小伙伴可以在下面留言或者私信我，只要有空我就会回复