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-popoverstyle="padding:10px"placement="right"width="500"trigger="click"><el-table:data="drafList":height="240"><el-table-columnv-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: {//将处理好的数据保存至localStoragesaveDraft(){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部分查看所有的草稿内容，点击对应的编辑图标，可将相应草稿信息填至输入框，方便再次编辑及提交。

感谢阅读～

VUE+Element实现草稿箱相关推荐

只要100行代码，实现文本编辑器中的草稿箱功能
本文节选自<设计模式就该这样学> 1 使用备忘录模式实现草稿箱功能大家都用过网页中的富文本编辑器,编辑器通常都会附带草稿箱.撤销等操作.下面用一段代码来实现一个这样的功能.假设,我们在G ...
备忘录模式 java 作用,使用备忘录模式实现草稿箱功能
大家在网上发表文章肯定会使用到富文本编辑器,编辑器通常都会附带草稿箱.撤销等操作. 下面我们使用备忘录模式来实现这样一个功能.假设我们在 C语言中文网中发布一篇文章,文章编辑的过程需要花很长时间,中间 ...
100行代码，轻松实现文本编辑器中草稿箱功能
本文节选自<设计模式就该这样学> 1 使用备忘录模式实现草稿箱功能大家都用过网页中的富文本编辑器,编辑器通常都会附带草稿箱.撤销等操作.下面用一段代码来实现一个这样的功能.假设,我们在G ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
超美观的 Vue+Element 开源后台管理 UI
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! EuiAdmin是基于Vue+Element等组件联合开发 ...
vue+element 后台管理系统（三）树形图
<!DOCTYPE html> <html class="over_hidd"> <head><meta charset="UT ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
超优 Vue+Element+Spring 中后端解决方案
今日推荐推荐一款开源 Java 版的视频管理系统推荐3个快速开发平台前后端都有项目经验又有着落了 14个项目转载:toutiao.com/i6911704074815767048 作者:we ...
介绍一款贼美的Vue+Element开源后台管理UI
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:又一程序员进了ICU:压垮一个家庭,一张结算单就够个人原创100W+访问量博客:点击前往,查看更多前言 Eu ...

VUE+Element实现草稿箱

VUE+Element实现草稿箱相关推荐

最新文章

热门文章