笔记的更新时间

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

笔记的更新时间可以显示在笔记项目的左边,这个更新时间的显示我要用到 moment.js .. 先打开 index.html ,嵌入一个库 .. 地址是 unpkg.com/moment@2.19.1/moment.js .. 另外还需要一个本地化的脚本 .. https://unpkg.com/moment@2.19.1/locale/zh-cn.js zh-cn.js 里面包含了 moment.js 的简体中文语言 ..

先在浏览器的控制台上看一下 .. 这里会输出找到的几个存储在数据库里的文档 .. 打开其中的一个 .. 每个文档都有一个 meta 属性, 它里面有个 created .. 对应的值就是创建这个文档的时间 .. 下面还有一个 updated .. 这个是文档的更新时间 ..

这些 meta 数据是数据库自动生成的 .. 我打算用一下这里的 updated .. 就是文档的更新时间 ..

Note

找到 Note 这个组件 .. 在它的 computed 属性里面,再添加一个新的方法 .. 名字可以是 updated ..

return 的是,用一下 moment .. 处理一下 this.entity.meta.updated ,就是文档的更新时间 .. 接着再用一个 fromNow() .. 这是一种显示时间的格式 ..

模板

然后在组件的模板里面,用一下这个 updated,在 content 元素的上面,添加一组 div,上面加上一个 meta .. 在它里面,可以绑定输出刚才我们定义的 updated

现在笔记列表上面,会显示这个笔记更新的时间 .. 这个时间的格式就是距离现在多少时间 ..

样式

现去改进一下这块样式 .. 打开 style.css

设置一下 .ui.items 的子元素 .item,.item 的子元素 .meta 的样式 .. width 可以是 88px .. color 用 rgba 表示 .. 颜色是黑色 .. 不透明度是 0.4

margin-top 设置成 0 .. margin-bottom ,下边距设置成 16px ..

再预览一下 .. 修改一个笔记 ... 注意笔记的更新时间的变化 .. 现在会显示在几秒前更新了这个笔记内容 ..

笔记的更新时间《 Vue.js:应用案例 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点