使用vue优化编辑器草稿提示ui代码

保存草稿功能在上一篇文章编辑器自动草稿保存,以及优化提示恢复草稿的UI.说过了,这里就不再哔哔了.


这里要说的是将提示草稿ui及操作ui的代码都放到editor组件里面去时的一些小细节.

这样后面的用户使用起来就比较方便,不需要在使用editor编辑器的页面额外再加一段html代码,

当你进入到编辑器页面并判断你在使用autosave的时候, 我们就trigger一个事件出去,并且将保存的草稿val作为第二个参数传出去.

这个事件,我们可以在editor组件里面 用on去监听到,

这里有一个坑,就是trigger事件的时间必须在 on 这个事件之后, 虽然在editor组件里面的某些钩子函数里面可以做到先 on 这个事件, 比如 created 

但是在created 里面是拿不到editor对象的,因为钩子函数执行顺序的关系,simditor还没有 new出来 .

所以我们trigger事件的时候,让其晚一点执行,比如像下面这样:


simditor55.png


这样我们在editor初始化的时候就可以先 on 上 ' promptdraft '这个事件了,

editor66.png

这里, on 的回调函数的第一个参数默认是事件对象event,第二个参数才是你传过来的参数.

既然能监听到事件,又能拿到传过来的参数, 那么我们将参数存进data 里,

当用户点击yes时,调用setValue() 方法将草稿set到编辑器里.

当用户点击 on时,清除草稿即可.

editor777.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容