Vue 移动端

文章评论功能

展示文章评论列表

单独封装一个文章评论列表组件, 再封装获取文章评论的请求方法, 获取到数据后再遍历渲染出来

<van-cell v-for="(item,index) in list" :key="index" :title="item.content"></van-cell>

因为默认情况下只有滚动到了评论列表区域才会触发 onLoad 事件，发送请求获取数据，所以我们需要再 created 里面主动触发一次，保证一开始就触发

为了方便复用, 将文章的评论项也封装为一个组件, 导入注册这个组件, 在评论列表中遍历数据

给评论点赞, 先判断用户是否登录, 如未登录, return 出来并提示用户先登录, 如已登录, 再判断用户是否点赞, 已赞就取消, 没赞就点赞, 然后给点赞的变量取反来更新视图

发表文章评论

发表文章的弹出层可使用 vant 中的 Popup 组件

<van-popup v-model="isPostShow" position="bottom">
	测试内容
</van-popup>

• v-model 绑定一个变量来控制弹出层的显示与隐藏
• position 可以控制弹出层从哪个方向弹出
• 当不给弹出层设置高度时, 默认由内容撑开

封装一个发表评论的组件, 方便维护和复用, 再封装请求方法, 注册发布点击事件,

如果发布成功将内容传到评论列表中, 如果失败则提示错误, 再将弹出层关闭

因为发表