VUE+Element实现草稿箱

草稿内容使用localStorage存储，失效时间为一小时。
以下为vue文件内容：

• 输入框及提交按钮

   <div style="border:2px dashed rgb(193, 186, 186);padding: 10px 10px 45px 10px;">
     <el-input type="textarea" placeholder="请输入相应信息" v-model="submitDescription"></el-input>
     <div style="float:right;margin-top: 5px;">
       <el-button type="primary" size="mini" @click="saveDraft">存入草稿</el-button>
       <el-button type="primary" size="mini" @click="addAdditionalInfo">提交</el-button>
     </div>
   </div>

效果：

• 草稿列表及操作

  <el-popover
     style="padding:10px"
     placement="right"
     width="500"
     trigger="click"
     >
     <el-table
       :data="drafList"
       :height="240">
       <el-table-column
         v-for="(item, index) in proCol"
         :key="index"
         :prop="item.prop"
         :label="item.label"
         :width="item.width">
       </el-table-column>
       <el-table-column width="50" fixed="right" align="center">
         <template #default="scope">
           <el-link @click="putInfo(scope.$index,scope.row)" icon="el-icon-edit" type="primary" :underline="false" style="font-size:12px;"></el-link>
           <!-- <el-link @click="handleDelete(scope.$index, projectData)" icon="el-icon-delete" type="primary" :underline="false" style="font-size:18px;"></el-link> -->
         </template>
       </el-table-column>
     </el-table>
     <template #reference>
       <el-button type="primary" size="small" style="width: 120px;margin-bottom: 10px;">Draft</el-button>
     </template>
   </el-popover>

• data

data () {
    return {

	…
	currentTime:new Date(), 	//获取当前时间
	drafList:[],				//草稿
         proCol: [               			//表格的列
            {
              label: 'Draft Description',
              prop: 'description',
              width: '450',
            }],
	…

	}
}

• created

created(){
      let that = this;
      that.$nextTick(function () { that.currentTime = new Date() });
    },

• mounted

mounted () {
      //每小时执行一次，更新一次数据
      this.getNowTime = setInterval(()=>{
        this.currentTime = new Date()
      }, 60*60000);

}

• watch

watch:{

	currentTime(newVal, oldVal){
          if(localStorage.getItem('issueDraft')){
            let issueDraftData =JSON.parse(localStorage.getItem('issueDraft'))
            for(let index in issueDraftData){
              let hm = Math.abs(newVal.getTime() - new Date(issueDraftData[index]['addTime']).getTime())
              let min = Math.floor((hm/1000/60))
              if(min>=60){
                issueDraftData.splice(index,1)
              }
            }
            if(issueDraftData.length>0){
              localStorage.setItem('issueDraft',JSON.stringify(issueDraftData))
              this.$nextTick(function () { this.drafList = JSON.parse(localStorage.getItem('issueDraft')) });
            }
            else{
              localStorage.removeItem('issueDraft')
            }
          }
        },

}

• method

methods: {
	//将处理好的数据保存至localStorage
      saveDraft(){
        let presetsArr = localStorage.getItem('issueDraft') || []
        if(presetsArr.length>0){
          localStorage.setItem('issueDraft',presetsArr)
          this.draft=JSON.parse(presetsArr)
        }
        this.draft.push({'description':this.submitDescription,'addTime':new Date()})
        localStorage.setItem('issueDraft',JSON.stringify(this.draft))
        this.$nextTick(function () { this.drafList = JSON.parse(localStorage.getItem('issueDraft')) });
        this.$message({type: 'success', message: '成功添加至草稿!'})
      },

	//点击编辑按钮，将草稿填入输入框
      putInfo(index,row){
        this.submitDescription = row.description
      }
}

• destroy（离开此页面时触发）

   destroyed() {
   //window.clearInterval方法可取消由 setInterval() 函数设定的定时执行操作。
     window.clearInterval(this.getNowTime);
   },

最终效果如下：

在输入框中输入信息，点击存入草稿，可在右侧Draft部分查看所有的草稿内容，点击对应的编辑图标，可将相应草稿信息填至输入框，方便再次编辑及提交。

感谢阅读～