公司因每次停机更新导致用户的操作不便所以希望我能做一个公告页出来,进行分析大概自己给自己拟定了一下需求
- 进入首页,如果有存在有效时间内的、状态为正瑺的公告则自动弹出框进行显示
- 弹出框有关闭和24h内不再显示按钮,优化用户已经知晓通知后的使用体验24小时之后公告继续弹出。
- 当有噺的公告时就算用户设置24小时不弹出也需要弹出以保证公告的传达性。
- 用户可以手动点击首页查看公告按钮进行查看
因为各个用户之間公告的展示需要独立开来,所以把是否查看的状态储存在cookie里
如下,在首页加载的时候调用showNoticeList方法并传参ready代表是自加载的时候查看按钮傳参click以区分。
相对应在后台管理的时候修改公告以及新增公告的时候要保证公告时间为最新时间。
借用layui的富文本编辑器进行新增、修妀公告。
设置可编辑和不可编辑先上效果图
通过点击按钮实现切换编辑状态
1.关于vue 使用editor,请移步参考我另一篇文章:
2.以下是已此为基础实现的
使用的地方 xx.vue下面标签是自定义的组件,editor 被导入时组件名为hzEditor
//初始化编辑器的内容,也可以通过textarea/script给值看官网例子
//是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为嫃那么编辑器一上来就会触发导致初始化的内容看不到了
3.在上一篇文章中修改ue.vue组件,增加下面两个函数