L16-Vue-项目-黑马头条-L03-{ 文章 }
六、文章搜索
创建组件并配置路由
1、创建 src/views/search/index.vue
<template>
<div class="search-container">搜索页面</div>
</template>
<script>
export default {
name: "SearchPage",
components: {},
props: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
methods: {}
};
</script>
<style scoped></style>
2、然后把搜索页面的路由配置到根组件路由（一级路由）
{
path: '/search',
omponent: Search
}
最后访问 /search 测试。
页面布局
1、创建 src/views/search/components/search-history.vue
<template>
<div class="search-history">
<van-cell title="搜索历史">
<span>全部删除</span>
<span>完成</span>
<van-icon name="delete" />
</van-cell>
<van-cell title="hello">
<van-icon name="close" />
</van-cell>
<van-cell title="hello">
<van-icon name="close" />
</van-cell>
<van-cell title="hello">
<van-icon name="close" />
</van-cell>
<van-cell title="hello">
<van-icon name="close" />
</van-cell>
</div>
</template>
<script>
export default {
name: 'SearchHistory',
components: {},
props: {},
data () {
return {}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less"></style>
2、创建 src/views/search/components/search-suggestion.vue
<template>
<div class="search-suggestion">
<van-cell title="黑马程序员..." icon="search"></van-cell>
<van-cell title="黑马程序员..." icon="search"></van-cell>
<van-cell title="黑马程序员..." icon="search"></van-cell>
<van-cell title="黑马程序员..." icon="search"></van-cell>
<van-cell title="黑马程序员..." icon="search"></van-cell>
</div>
</template>
<script>
export default {
name: 'SearchSuggestion',
components: {},
props: {},
data () {
return {}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less"></style>
3、创建 src/views/search/components/search-result.vue
<template>
<div class="search-result">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</div>
</template>
<script>
export default {
name: 'SearchResult',
components: {},
props: {},
data () {
return {
list: [],
loading: false,
finished: false
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {
onLoad () {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1)
}
// 加载状态结束
this.loading = false
// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true
}
}, 1000)
}
}
}
</script>
<style scoped lang="less"></style>
4、搜索组件内容如下：
<template>
<div class="search-container">
<!-- 搜索栏 -->
<!--
Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
-->
<form action="/">
<van-search
v-model="searchText"
show-action
placeholder="请输入搜索关键词"
background="#3296fa"
@search="onSearch"
@cancel="onCancel"
/>
</form>
<!-- /搜索栏 -->
<!-- 搜索历史记录 -->
<search-history />
<!-- /搜索历史记录 -->
<!-- 联想建议 -->
<search-suggestion />
<!-- /联想建议 -->
<!-- 历史记录 -->
<search-result />
<!-- /历史记录 -->
</div>
</template>
<script>
import SearchHistory from './components/search-history'
import SearchSuggestion from './components/search-suggestion'
import SearchResult from './components/search-result'
export default {
name: 'SearchIndex',
components: {
SearchHistory,
SearchSuggestion,
SearchResult
},
props: {},
data () {
return {
searchText: ''
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {
onSearch (val) {
console.log(val)
},
onCancel () {
this.$router.back()
}
}
}
</script>
<style scoped lang="less">
.search-container {
.van-search__action {
color: #fff;
}
}
</style>
处理页面显示状态
1、在 data 中添加数据用来控制搜索结果的显示状态
data () {
...
isResultShow: false
}
2、在模板中绑定条件渲染
<!-- 搜索结果 -->
<search-result v-if="isResultShow" />
<!-- /搜索结果 -->
<!-- 联想建议 -->
<search-suggestion v-else-if="searchText" />
<!-- /联想建议 -->
<!-- 搜索历史记录 -->
<search-history v-else />
<!-- /搜索历史记录 -->
搜索联想建议
基本思路：
- 当搜索框输入内容的时候，请求加载联想建议的数据
- 将请求得到的结果绑定到模板中
基本功能
一、将父组件中搜索框输入的内容传给联想建议子组件
二、在子组件中监视搜索框输入内容的变化，如果变化则请求获取联想建议数据
三、将获取到的联想建议数据展示到列表中
防抖优化
1、安装 lodash
# yarn add lodash
npm i lodash
2、防抖处理
// lodash 支持按需加载，有利于打包结果优化
import { debounce } from "lodash"
不建议下面这样使用，因为这样会加载整个模块。
import _ from 'lodash' _.debounce()
// debounce 函数
// 参数1：函数
// 参数2：防抖时间
// 返回值：防抖之后的函数，和参数1功能是一样的
onSearchInput: debounce(async function () {
const searchContent = this.searchContent
if (!searchContent) {
return
}
// 1. 请求获取数据
const { data } = await getSuggestions(searchContent)
// 2. 将数据添加到组件实例中
this.suggestions = data.data.options
// 3. 模板绑定
}, 200),
搜索关键字高亮
如何将字符串中的指定字符在网页中高亮展示？
"Hello World";
将需要高亮的字符包裹 HTML 标签，为其单独设置颜色。
"Hello <span style="color: red">World</span>"
在 Vue 中如何渲染带有 HTML 标签的字符串？
data () {
return {
htmlStr: 'Hello <span style="color: red">World</span>'
}
}
<div>{{ htmlStr }}</div>
<div v-html="htmlStr"></div>
如何把字符串中指定字符统一替换为高亮（包裹了 HTML）的字符？
const str = "Hello World"
// 结果：<span style="color: red">Hello</span> World
"Hello World".replace('Hello', '<span style="color: red">Hello</span>')
// 需要注意的是，replace 方法的字符串匹配只能替换第1个满足的字符
// <span style="color: red">Hello</span> World Hello abc
"Hello World Hello abc".replace('Hello', '<span style="color: red">Hello</span>')
// 如果想要全文替换，使用正则表达式
// g 全局
// i 忽略大小写
// <span style="color: red">Hello</span> World <span style="color: red">Hello</span> abc
"Hello World Hello abc".replace(/Hello/gi, '<span style="color: red">Hello</span>')
一个小扩展：使用字符串的 split 结合数组的 join 方法实现高亮
var str = "hello world 你好 hello"; // ["", " world 你好 ", ""] const arr = str.split("hello"); // "<span>hello</span> world 你好 <span>hello</span>" arr.join("<span>hello</span>");
下面是具体的处理。
1、在 methods 中添加一个方法处理高亮
// 参数 source: 原始字符串
// 参数 keyword: 需要高亮的关键词
// 返回值：替换之后的高亮字符串
highlight (source, keyword) {
// /searchContent/ 正则表达式中的一切内容都会当做字符串使用
// 这里可以 new RegExp 方式根据字符串创建一个正则表达式
// RegExp 是原生 JavaScript 的内置构造函数
// 参数1：字符串，注意，这里不要加 //
// 参数2：匹配模式，g 全局，i 忽略大小写
const reg = new RegExp(keyword, 'gi')
return source.replace(reg, `<span style="color: #3296fa">${keyword}</span>`)
},
2、然后在联想建议列表项中绑定调用
<!-- 联想建议 -->
<van-cell-group v-else-if="searchContent">
<van-cell
icon="search"
v-for="(item, index) in suggestions"
:key="index"
@click="onSearch(item)"
>
<div slot="title" v-html="highlight(item, searchContent)"></div>
</van-cell>
</van-cell-group>
<!-- /联想建议 -->
搜索结果
思路：
- 找到数据接口
- 请求获取数据
- 将数据展示到模板中
一、获取搜索关键字
1、声明接收父组件中的搜索框输入的内容
props: {
q: {
type: String,
require: true
}
},
2、在父组件给子组件传递数据
<!-- 搜索结果 -->
<search-result v-if="isResultShow" :q="searchText" />
<!-- /搜索结果 -->
最后在调试工具中查看确认是否接收到 props 数据。
二、请求获取数据
1、在 api/serach.js 添加封装获取搜索结果的请求方法
/**
* 获取搜索结果
*/
export function getSearch(params) {
return request({
method: "GET",
url: "/app/v1_0/search",
params
})
}
2、请求获取
+ import { getSearch } from '@/api/search'
export default {
name: 'SearchResult',
components: {},
props: {
q: {
type: String,
require: true
}
},
data () {
return {
list: [],
loading: false,
finished: false,
+ page: 1,
+ perPage: 20
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {
+++ async onLoad () {
// 1. 请求获取数据
const { data } = await getSearch({
page: this.page, // 页码
per_page: this.perPage, // 每页大小
q: this.q // 搜索关键字
})
// 2. 将数据添加到列表中
const { results } = data.data
this.list.push(...results)
// 3. 设置加载状态结束
this.loading = false
// 4. 判断数据是否加载完毕
if (results.length) {
this.page++ // 更新获取下一页数据的页码
} else {
this.finished = true // 没有数据了，将加载状态设置结束，不再 onLoad
}
}
}
}
三、最后，模板绑定
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
+ v-for="(article, index) in list"
+ :key="index"
+ :title="article.title"
/>
</van-list>
搜索历史记录
添加历史记录
当发生搜索的时候我们才需要记录历史记录。
1、在 data 中添加一个数据用来存储历史记录
data () {
return {
...
searchHistories: []
}
}
2、在触发搜索的时候，记录历史记录
onSearch (val) {
// 更新文本框内容
this.searchText = val
// 存储搜索历史记录
// 要求：不要有重复历史记录、最新的排在最前面
const index = this.searchHistories.indexOf(val)
if (index !== -1) {
this.searchHistories.splice(index, 1)
}
this.searchHistories.unshift(val)
// 渲染搜索结果
this.isResultShow = true
},
展示历史记录
<!-- 历史记录 -->
<van-cell-group v-else>
<van-cell title="历史记录">
<van-icon name="delete" />
<span>全部删除</span>
<span>完成</span>
</van-cell>
<van-cell
:title="item"
v-for="(item, index) in searchHistories"
:key="index"
>
<van-icon name="close"></van-icon>
</van-cell>
</van-cell-group>
<!-- /历史记录 -->
删除历史记录
基本思路：
- 给历史记录中的每一项注册点击事件
- 在处理函数中判断
- 如果是删除状态，则执行删除操作
- 如果是非删除状态，则执行搜索操作
一、处理删除相关元素的展示状态
1、在 data 中添加一个数据用来控制删除相关元素的显示状态
data () {
return {
...
isDeleteShow: false
}
}
2、绑定使用
<!-- 历史记录 -->
<van-cell-group v-else>
<van-cell title="历史记录">
<template v-if="isDeleteShow">
<span @click="searchHistories = []">全部删除</span>
<span @click="isDeleteShow = false">完成</span>
</template>
<van-icon v-else name="delete" @click="isDeleteShow = true"></van-icon>
</van-cell>
<van-cell
:title="item"
v-for="(item, index) in searchHistories"
:key="index"
@click="onSearch(item)"
>
<van-icon
v-show="isDeleteShow"
name="close"
@click="searchHistories.splice(index, 1)"
></van-icon>
</van-cell>
</van-cell-group>
<!-- /历史记录 -->
二、处理删除操作
<!-- 历史记录 -->
<van-cell-group v-else>
<van-cell title="历史记录">
<template v-if="isDeleteShow">
+ <span @click="searchHistories = []">全部删除</span>
<span @click="isDeleteShow = false">完成</span>
</template>
<van-icon v-else name="delete" @click="isDeleteShow = true" />
</van-cell>
<van-cell
:title="item"
v-for="(item, index) in searchHistories"
:key="index"
+ @click="onHistoryClick(item, index)"
>
<van-icon v-show="isDeleteShow" name="close"></van-icon>
</van-cell>
</van-cell-group>
<!-- /历史记录 -->
onHistoryClick (item, index) {
// 如果是删除状态，则执行删除操作
if (this.isDeleteShow) {
this.searchHistories.splice(index, 1)
} else {
// 否则执行搜索操作
this.onSearch(item)
}
}
数据持久化
1、利用 watch 监视统一存储数据
watch: {
searchHistories (val) {
// 同步到本地存储
setItem('serach-histories', val)
}
},
2、初始化的时候从本地存储获取数据
data () {
return {
...
searchHistories: getItem('serach-histories') || [],
}
}
七、文章详情
创建组件并配置路由
1、创建 views/article/index.vue 组件
<template>
<div class="article-container">文章详情</div>
</template>
<script>
export default {
name: 'ArticleIndex',
components: {},
props: {
articleId: {
type: [Number, String],
required: true
}
},
data () {
return {}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less"></style>
2、然后将该页面配置到根级路由
{
path: '/article/:articleId',
name: 'article',
component: () => import('@/views/article'),
// 将路由动态参数映射到组件的 props 中，更推荐这种做法
props: true
}
页面布局
使用到的 Vant 中的组件：
<template>
<div class="article-container">
<!-- 导航栏 -->
<van-nav-bar
class="page-nav-bar"
left-arrow
title="黑马头条"
></van-nav-bar>
<!-- /导航栏 -->
<div class="main-wrap">
<!-- 加载中 -->
<div class="loading-wrap">
<van-loading
color="#3296fa"
vertical
>加载中</van-loading>
</div>
<!-- /加载中 -->
<!-- 加载完成-文章详情 -->
<div class="article-detail">
<!-- 文章标题 -->
<h1 class="article-title">这是文章标题</h1>
<!-- /文章标题 -->
<!-- 用户信息 -->
<van-cell class="user-info" center :border="false">
<van-image
class="avatar"
slot="icon"
round
fit="cover"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<div slot="title" class="user-name">黑马头条号</div>
<div slot="label" class="publish-date">14小时前</div>
<van-button
class="follow-btn"
type="info"
color="#3296fa"
round
size="small"
icon="plus"
>关注</van-button>
<!-- <van-button
class="follow-btn"
round
size="small"
>已关注</van-button> -->
</van-cell>
<!-- /用户信息 -->
<!-- 文章内容 -->
<div class="article-content">这是文章内容</div>
<van-divider>正文结束</van-divider>
</div>
<!-- /加载完成-文章详情 -->
<!-- 加载失败：404 -->
<div class="error-wrap">
<van-icon name="failure" />
<p class="text">该资源不存在或已删除！</p>
</div>
<!-- /加载失败：404 -->
<!-- 加载失败：其它未知错误（例如网络原因或服务端异常） -->
<div class="error-wrap">
<van-icon name="failure" />
<p class="text">内容加载失败！</p>
<van-button class="retry-btn">点击重试</van-button>
</div>
<!-- /加载失败：其它未知错误（例如网络原因或服务端异常） -->
</div>
<!-- 底部区域 -->
<div class="article-bottom">
<van-button
class="comment-btn"
type="default"
round
size="small"
>写评论</van-button>
<van-icon
name="comment-o"
info="123"
color="#777"
/>
<van-icon
color="#777"
name="star-o"
/>
<van-icon
color="#777"
name="good-job-o"
/>
<van-icon name="share" color="#777777"></van-icon>
</div>
<!-- /底部区域 -->
</div>
</template>
<script>
export default {
name: 'ArticleIndex',
components: {},
props: {
articleId: {
type: [Number, String],
required: true
}
},
data () {
return {}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less">
.article-container {
.main-wrap {
position: fixed;
left: 0;
right: 0;
top: 92px;
bottom: 88px;
overflow-y: scroll;
background-color: #fff;
}
.article-detail {
.article-title {
font-size: 40px;
padding: 50px 32px;
margin: 0;
color: #3a3a3a;
}
.user-info {
padding: 0 32px;
.avatar {
width: 70px;
height: 70px;
margin-right: 17px;
}
.van-cell__label {
margin-top: 0;
}
.user-name {
font-size: 24px;
color: #3a3a3a;
}
.publish-date {
font-size: 23px;
color: #b7b7b7;
}
.follow-btn {
width: 170px;
height: 58px;
}
}
.article-content {
padding: 55px 32px;
/deep/ p {
text-align: justify;
}
}
}
.loading-wrap {
padding: 200px 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.error-wrap {
padding: 200px 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
.van-icon {
font-size: 122px;
color: #b4b4b4;
}
.text {
font-size: 30px;
color: #666666;
margin: 33px 0 46px;
}
.retry-btn {
width: 280px;
height: 70px;
line-height: 70px;
border: 1px solid #c3c3c3;
font-size: 30px;
color: #666666;
}
}
.article-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
height: 88px;
border-top: 1px solid #d8d8d8;
background-color: #fff;
.comment-btn {
width: 282px;
height: 46px;
border: 2px solid #eeeeee;
font-size: 30px;
line-height: 46px;
color: #a7a7a7;
}
.van-icon {
font-size: 40px;
.van-info {
font-size: 16px;
background-color: #e22829;
}
}
}
}
</style>
关于后端返回数据中的大数字问题
之所以请求文章详情返回 404 是因为我们请求发送的文章 ID （article.art_id）不正确。
JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。
Math.pow(2, 53) // 9007199254740992
9007199254740992 // 9007199254740992
9007199254740993 // 9007199254740992
Math.pow(2, 53) === Math.pow(2, 53) + 1
// true
上面代码中，超出 2 的 53 次方之后，一个数就不精确了。
ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。
Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MAX_SAFE_INTEGER === 9007199254740991
// true
Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true
Number.MIN_SAFE_INTEGER === -9007199254740991
// true
上面代码中，可以看到 JavaScript 能够精确表示的极限。
后端返回的数据一般都是 JSON 格式的字符串。
'{ "id": 9007199254740995, "name": "Jack", "age": 18 }'
如果这个字符不做任何处理，你能方便的获取到字符串中的指定数据吗？非常麻烦。所以我们要把它转换为 JavaScript 对象来使用就很方便了。
幸运的是 axios 为了方便我们使用数据，它会在内部使用 JSON.parse() 把后端返回的数据转为 JavaScript 对象。
// { id: 9007199254740996, name: 'Jack', age: 18 }
JSON.parse('{ "id": 9007199254740995, "name": "Jack", "age": 18 }')
可以看到，超出安全整数范围的 id 无法精确表示，这个问题并不是 axios 的错。
了解了什么是大整数的概念，接下来的问题是如何解决？
json-bigint 是一个第三方包，它可以帮我们很好的处理这个问题。
使用它的第一步就是把它安装到你的项目中。
npm i json-bigint
下面是使用它的一个简单示例。
const jsonStr = '{ "art_id": 1245953273786007552 }'
console.log(JSON.parse(jsonStr)) // 1245953273786007600
// JSON.stringify()
// JSONBig 可以处理数据中超出 JavaScript 安全整数范围的问题
console.log(JSONBig.parse(jsonStr)) // 把 JSON 格式的字符串转为 JavaScript 对象
// 使用的时候需要把 BigNumber 类型的数据转为字符串来使用
console.log(JSONBig.parse(jsonStr).art_id.toString()) // 1245953273786007552
console.log(JSON.stringify(JSONBig.parse(jsonStr)))
console.log(JSONBig.stringify(JSONBig.parse(jsonStr))) // 把 JavaScript 对象 转为 JSON 格式的字符串转
json-bigint 会把超出 JS 安全整数范围的数字转为一个 BigNumber 类型的对象，对象数据是它内部的一个算法处理之后的，我们要做的就是在使用的时候转为字符串来使用。
通过 Axios 请求得到的数据都是 Axios 处理（JSON.parse）之后的，我们应该在 Axios 执行处理之前手动使用 json-bigint 来解析处理。Axios 提供了自定义处理原始后端返回数据的 API：transformResponse 。
import axios from 'axios'
import jsonBig from 'json-bigint'
var json = '{ "value" : 9223372036854775807, "v2": 123 }'
console.log(jsonBig.parse(json))
const request = axios.create({
baseURL: 'http://ttapi.research.itcast.cn/', // 接口基础路径
// transformResponse 允许自定义原始的响应数据（字符串）
transformResponse: [function (data) {
try {
// 如果转换成功则返回转换的数据结果
return jsonBig.parse(data)
} catch (err) {
// 如果转换失败，则包装为统一数据格式并返回
return {
data
}
}
}]
})
export default request
扩展：ES2020 BigInt
ES2020 引入了一种新的数据类型 BigInt（大整数），来解决这个问题。BigInt 只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。
参考链接：
展示文章详情
思路：
- 找到数据接口
- 封装请求方法
- 请求获取数据
- 模板绑定
一、请求并展示文章详情
1、在 api/article.js 中新增封装接口方法
/**
* 根据 id 获取指定文章
*/
export const getArticleById = articleId => {
return request({
method: 'GET',
url: `/app/v1_0/articles/${articleId}`
})
}
2、在组件中调用获取文章详情
+ import { getArticleById } from '@/api/article'
export default {
name: 'ArticlePage',
components: {},
props: {
articleId: {
type: String,
required: true
}
},
data () {
return {
+ article: {} // 文章详情
}
},
computed: {},
watch: {},
created () {
+ this.loadArticle()
},
mounted () {},
methods: {
+++ async loadArticle () {
try {
const { data } = await getArticleById(this.articleId)
this.article = data.data
} catch (err) {
console.log(err)
}
}
}
}
3、模板绑定
处理内容加载状态
需求：
- 加载中，显示 loading
- 加载成功，显示文章详情
- 加载失败，显示错误提示
- 如果 404，提示资源不存在
- 其它的，提示加载失败，用户可以点击重试重新加载
关于文章正文的样式
文章正文包括各种数据：段落、标题、列表、链接、图片、视频等资源。
- 将 github-markdown-css 样式文件下载到项目中
- 配置不要转换样式文件中的字号
图片点击预览
一、ImagePreview 图片预览 的使用
二、处理图片点击预览
思路：
1、从文章内容中获取到所有的 img DOM 节点
2、获取文章内容中所有的图片地址
3、遍历所有 img 节点，给每个节点注册点击事件
4、在 img 点击事件处理函数中，调用 ImagePreview 预览
关注用户
思路：
- 给按钮注册点击事件
- 在事件处理函数中
- 如果已关注，则取消关注
- 如果没有关注，则添加关注
下面是具体实现。
视图处理
功能处理
- 找到数据接口
- 封装请求方法
- 请求调用
- 视图更新
1、在 api/user.js 中添加封装请求方法
/**
* 添加关注
*/
export const addFollow = userId => {
return request({
method: 'POST',
url: '/app/v1_0/user/followings',
data: {
target: userId
}
})
}
/**
* 取消关注
*/
export const deleteFollow = userId => {
return request({
method: 'DELETE',
url: `/app/v1_0/user/followings/${userId}`
})
}
2、给关注/取消关注按钮注册点击事件
3、在事件处理函数中
import { addFollow, deleteFollow } from '@/api/user'
async onFollow () {
// 开启按钮的 loading 状态
this.isFollowLoading = true
try {
// 如果已关注，则取消关注
const authorId = this.article.aut_id
if (this.article.is_followed) {
await deleteFollow(authorId)
} else {
// 否则添加关注
await addFollow(authorId)
}
// 更新视图
this.article.is_followed = !this.article.is_followed
} catch (err) {
console.log(err)
this.$toast.fail('操作失败')
}
// 关闭按钮的 loading 状态
this.isFollowLoading = false
}
最后测试。
loading 效果
两个作用：
- 交互反馈
- 防止网络慢用户多次点击按钮导致重复触发点击事件
组件封装
文章收藏
该功能和关注用户的处理思路几乎一样，建议由学员自己编写。
封装组件
处理视图
功能处理
思路：
- 给收藏按钮注册点击事件
- 如果已经收藏了，则取消收藏
- 如果没有收藏，则添加收藏
下面是具体实现。
1、在 api/article.js 添加封装数据接口
/**
* 收藏文章
*/
export const addCollect = target => {
return request({
method: 'POST',
url: '/app/v1_0/article/collections',
data: {
target
}
})
}
/**
* 取消收藏文章
*/
export const deleteCollect = target => {
return request({
method: 'DELETE',
url: `/app/v1_0/article/collections/${target}`
})
}
2、给收藏按钮注册点击事件
3、处理函数
async onCollect () {
// 这里 loading 不仅仅是为了交互提示，更重要的是请求期间禁用背景点击功能，防止用户不断的操作界面发出请求
this.$toast.loading({
duration: 0, // 持续展示 toast
message: '操作中...',
forbidClick: true // 是否禁止背景点击
})
try {
// 如果已收藏，则取消收藏
if (this.article.is_collected) {
await deleteCollect(this.articleId)
// this.article.is_collected = false
this.$toast.success('取消收藏')
} else {
// 添加收藏
await addCollect(this.articleId)
// this.article.is_collected = true
this.$toast.success('收藏成功')
}
this.article.is_collected = !this.article.is_collected
} catch (err) {
console.log(err)
this.$toast.fail('操作失败')
}
}
文章点赞
该功能和关注用户的处理思路几乎一样，建议由学员自己编写。
article 中的 attitude 表示用户对文章的态度
-1无态度0不喜欢1已点赞
思路：
- 给点赞按钮注册点击事件
- 如果已经点赞，则请求取消点赞
- 如果没有点赞，则请求点赞
1、添加封装数据接口
/**
* 点赞
*/
export const addLike = articleId => {
return request({
method: 'POST',
url: '/app/v1_0/article/likings',
data: {
target: articleId
}
})
}
/**
* 取消点赞
*/
export const deleteLike = articleId => {
return request({
method: 'DELETE',
url: `/app/v1_0/article/likings/${articleId}`
})
}
2、给点赞按钮注册点击事件
3、处理函数
async onLike () {
// 两个作用：1、交互提示 2、防止网络慢用户连续不断的点击按钮请求
this.$toast.loading({
duration: 0, // 持续展示 toast
message: '操作中...',
forbidClick: true // 是否禁止背景点击
})
try {
// 如果已经点赞，则取消点赞
if (this.article.attitude === 1) {
await deleteLike(this.articleId)
this.article.attitude = -1
this.$toast.success('取消点赞')
} else {
// 否则添加点赞
await addLike(this.articleId)
this.article.attitude = 1
this.$toast.success('点赞成功')
}
} catch (err) {
console.log(err)
this.$toast.fail('操作失败')
}
}
八、文章评论
展示文章评论列表
准备组件
为了更好的开发和维护，这里我们把文章评论单独封装到一个组件中来处理。
1、创建 src/views/article/components/article-comment.vue
<template>
<div class="article-comments">
<!-- 评论列表 -->
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item">
<van-image
slot="icon"
round
width="30"
height="30"
style="margin-right: 10px;"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<span style="color: #466b9d;" slot="title">hello</span>
<div slot="label">
<p style="color: #363636;">我出去跟别人说我的是。。。</p>
<p>
<span style="margin-right: 10px;">3天前</span>
<van-button size="mini" type="default">回复</van-button>
</p>
</div>
<van-icon slot="right-icon" name="like-o" />
</van-cell>
</van-list>
<!-- 评论列表 -->
<!-- 发布评论 -->
<van-cell-group class="publish-wrap">
<van-field clearable placeholder="请输入评论内容">
<van-button slot="button" size="mini" type="info">发布</van-button>
</van-field>
</van-cell-group>
<!-- /发布评论 -->
</div>
</template>
<script>
export default {
name: "ArticleComment",
props: {},
data() {
return {
list: [], // 评论列表
loading: false, // 上拉加载更多的 loading
finished: false // 是否加载结束
};
},
methods: {
onLoad() {
// 异步更新数据
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
}
}
};
</script>
<style scoped lang="less">
.publish-wrap {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.van-list {
margin-bottom: 45px;
}
</style>
2、在文章详情页面中加载注册文章评论子组件
import ArticleComment from './components/article-comment'
export default {
...
components: {
ArticleComment
}
}
3、在文章详情页面的加载失败提示消息后面使用文章评论子组件
<!-- 文章评论 -->
<article-comment />
<!-- /文章评论 -->
最终页面效果如下：
获取数据并展示
提示：有评论数据的文章 id：
139987。
步骤：
- 封装接口
- 请求获取数据
- 处理模板
实现：
1、在 api/comment.js 中添加封装请求方法
/**
* 评论接口模块
*/
import request from "@/utils/request";
/**
* 获取文章列表
*/
export function getComments(params) {
return request({
method: "GET",
url: "/app/v1_0/comments",
params
});
}
2、请求获取数据
data () {
return {
...
articleComment: { // 文章评论相关数据
list: [],
loading: false,
finished: false,
offset: null, // 请求下一页数据的页码
totalCount: 0 // 总数据条数
}
}
}
async onLoad () {
const articleComment = this.articleComment
// 1. 请求获取数据
const { data } = await getComments({
type: 'a', // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
source: this.articleId, // 源id，文章id或评论id
offset: articleComment.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
limit: 10 // 每页大小
})
// 2. 将数据添加到列表中
const { results } = data.data
articleComment.list.push(...results)
// 更新总数据条数
articleComment.totalCount = data.data.total_count
// 3. 将加载更多的 loading 设置为 false
articleComment.loading = false
// 4. 判断是否还有数据
if (results.length) {
articleComment.offset = data.data.last_id // 更新获取下一页数据的页码
} else {
articleComment.finished = true // 没有数据了，关闭加载更多
}
}
3、模板绑定
<!-- 评论列表 -->
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" + :key="item.com_id.toString()">
<van-image
slot="icon"
round
width="30"
height="30"
style="margin-right: 10px;"
+
:src="item.aut_photo"
/>
+ <span style="color: #466b9d;" slot="title">{{ item.aut_name }}</span>
<div slot="label">
+
<p style="color: #363636;">{{ item.content }}</p>
<p>
+
<span style="margin-right: 10px;"
>{{ item.pubdate | relativeTime }}</span
>
<van-button size="mini" type="default">回复</van-button>
</p>
</div>
<van-icon slot="right-icon" name="like-o" />
</van-cell>
</van-list>
<!-- 评论列表 -->
展示文章评论总数量
文章评论项
<template>
<van-cell class="comment-item">
<van-image
slot="icon"
class="avatar"
round
fit="cover"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
<div slot="title" class="title-wrap">
<div class="user-name">用户名称</div>
<van-button
class="like-btn"
icon="good-job-o"
>赞</van-button>
</div>
<div slot="label">
<p class="comment-content">这是评论内容</p>
<div class="bottom-info">
<span class="comment-pubdate">4天前</span>
<van-button
class="reply-btn"
round
>回复 0</van-button>
</div>
</div>
</van-cell>
</template>
<script>
export default {
name: 'CommentItem',
components: {},
props: {},
data () {
return {}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less">
.comment-item {
.avatar {
width: 72px;
height: 72px;
margin-right: 25px;
}
.title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
.user-name {
color: #406599;
font-size: 26px;
}
}
.comment-content {
font-size: 32px;
color: #222222;
word-break: break-all;
text-align: justify;
}
.comment-pubdate {
font-size: 19px;
color: #222;
margin-right: 25px;
}
.bottom-info {
display: flex;
align-items: center;
}
.reply-btn {
width: 135px;
height: 48px;
line-height: 48px;
font-size: 21px;
color: #222;
}
.like-btn {
height: 30px;
padding: 0;
border: none;
font-size: 19px;
line-height: 30px;
margin-right: 7px;
.van-icon {
font-size: 30px;
}
}
}
</style>
绑定之后：
<template>
<van-cell class="comment-item">
<van-image
slot="icon"
class="avatar"
round
fit="cover"
:src="comment.aut_photo"
/>
<div slot="title" class="title-wrap">
<div class="user-name">{{ comment.aut_name }}</div>
<van-button
class="like-btn"
icon="good-job-o"
>{{ comment.like_count || '赞' }}</van-button>
</div>
<div slot="label">
<p class="comment-content">{{ comment.content }}</p>
<div class="bottom-info">
<span class="comment-pubdate">{{ comment.pubdate | relativeTime }}</span>
<van-button
class="reply-btn"
round
>回复 {{ comment.reply_count }}</van-button>
</div>
</div>
</van-cell>
</template>
<script>
export default {
name: 'CommentItem',
components: {},
props: {
comment: {
type: Object,
required: true
}
},
data () {
return {}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less">
.comment-item {
.avatar {
width: 72px;
height: 72px;
margin-right: 25px;
}
.title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
.user-name {
color: #406599;
font-size: 26px;
}
}
.comment-content {
font-size: 32px;
color: #222222;
word-break: break-all;
text-align: justify;
}
.comment-pubdate {
font-size: 19px;
color: #222;
margin-right: 25px;
}
.bottom-info {
display: flex;
align-items: center;
}
.reply-btn {
width: 135px;
height: 48px;
line-height: 48px;
font-size: 21px;
color: #222;
}
.like-btn {
height: 30px;
padding: 0;
border: none;
font-size: 19px;
line-height: 30px;
margin-right: 7px;
.van-icon {
font-size: 30px;
}
}
}
</style>
评论点赞
1、在 api/comment.js 中添加封装两个数据接口
/**
* 对评论或评论回复点赞
*/
export function addCommentLike(commentId) {
return request({
method: "POST",
url: "/app/v1_0/comment/likings",
data: {
target: commentId
}
});
}
/**
* 取消对评论或评论回复点赞
*/
export function deleteCommentLike(commentId) {
return request({
method: "DELETE",
url: `/app/v1_0/comment/likings/${commentId}`
});
}
2、然后给评论项中的 like 图标注册点击事件
<van-icon
slot="right-icon"
color="red"
+
:name="item.is_liking ? 'like' : 'like-o'"
+
@click="onCommentLike(item)"
/>
3、在事件处理函数中
import {
getComments,
addComment,
+ addCommentLike,
+ deleteCommentLike
} from '@/api/comment'
async onCommentLike (comment) {
// 如果已经赞了则取消点赞
if (comment.is_liking) {
await deleteCommentLike(comment.com_id)
} else {
// 如果没有赞，则点赞
await addCommentLike(comment.com_id)
}
// 更新视图状态
comment.is_liking = !comment.is_liking
this.$toast('操作成功')
}
发布文章评论
准备弹出层
封装组件
<template>
<div class="comment-post">
<van-field
class="post-field"
v-model="message"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="请输入留言"
show-word-limit
/>
<van-button
class="post-btn"
>发布</van-button>
</div>
</template>
<script>
export default {
name: 'CommentPost',
components: {},
props: {},
data () {
return {
message: ''
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less">
.comment-post {
display: flex;
align-items: center;
padding: 32px 0 32px 32px;
.post-field {
background-color: #f5f7f9;
}
.post-btn {
width: 150px;
border: none;
padding: 0;
color: #6ba3d8;
&::before {
display: none;
}
}
}
</style>
步骤：
- 注册发布点击事件
- 请求提交表单
- 根据响应结果进行后续处理
一、使用弹层展示发布评论
1、添加弹层组件
data () {
return {
...
isPostShow: false
}
}
<!-- 发布文章评论 -->
<van-popup
v-model="isPostShow"
position="bottom"
/>
<!-- /发布文章评论 -->
提示：不设置高度的时候，内容会自动撑开弹层高度
2、点击发评论按钮的时候显示弹层
<van-button
class="write-btn"
type="default"
round
size="small"
@click="isPostShow = true"
>写评论</van-button>
二、封装发布评论组件
1、创建 post-comment.vue
<template>
<div class="post-comment">
<van-field
class="post-field"
v-model="message"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="优质评论将会被优先展示"
show-word-limit
/>
<van-button
type="primary"
size="small"
>发布</van-button>
</div>
</template>
<script>
export default {
name: 'PostComment',
components: {},
props: {},
data () {
return {
message: ''
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped lang="less">
.post-comment {
display: flex;
padding: 15px;
align-items: flex-end;
.post-field {
background: #f5f7f9;
margin-right: 15px;
}
}
</style>
2、在详情页加载注册
3、在发布评论的弹层中使用
<!-- 发布文章评论 -->
<van-popup
v-model="isPostShow"
position="bottom"
>
<post-comment />
</van-popup>
<!-- /发布文章评论 -->
三、发布评论
1、在 api/comment.js 中添加封装数据接口
/**
* 添加评论或评论回复
*/
export function addComment(data) {
return request({
method: "POST",
url: "/app/v1_0/comments",
data
});
}
2、绑定获取添加评论的输入框数据并且注册发布按钮的点击事件
data () {
return {
...
inputComment: ''
}
}
<!-- 发布评论 -->
<van-cell-group class="publish-wrap">
<van-field + v-model="inputComment" clearable placeholder="请输入评论内容">
<van-button slot="button" size="mini" type="info" + @click="onAddComment"
>发布</van-button
>
</van-field>
</van-cell-group>
<!-- /发布评论 -->
3、在事件处理函数中
import {
getComments,
+ addComment
} from '@/api/comment'
async onAddComment () {
const inputComment = this.inputComment.trim()
// 非空校验
if (!inputComment.length) {
return
}
// 请求添加
const res = await addComment({
target: this.$route.params.articleId, // 评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）
content: inputComment // 评论内容
// art_id // 文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
})
// 将发布的最新评论展示到列表顶部
this.list.unshift(res.data.data.new_obj)
// 清空文本框
this.inputComment = ''
}
请求发布
基本思路：
- 找到数据接口
- 封装请求方法
- 注册发布点击事件
- 请求发布
- 成功：将发布的内容展示到列表中
- 失败：提示失败
1、封装数据接口
/**
* 发布评论
*/
export const addComment = data => {
return request({
method: 'POST',
url: '/app/v1_0/comments',
data
})
}
2、给发布按钮点击事件
3、事件处理函数
async onAddComment () {
// 1. 拿到数据
const postMessage = this.postMessage
// 非空校验
if (!postMessage) {
return
}
this.$toast.loading({
duration: 0, // 持续展示 toast
message: '发布中...',
forbidClick: true // 是否禁止背景点击
})
try {
// 2. 请求提交
const { data } = await addComment({
target: this.articleId, // 评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）
content: postMessage
// art_id: // 文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
})
// 关闭发布评论的弹层
this.isPostShow = false
// 将最新发布的评论展示到列表的顶部
this.articleComment.list.unshift(data.data.new_obj)
// 更新文章评论的总数量
this.articleComment.totalCount++
// 清空文本框
this.postMessage = ''
this.$toast.success('发布成功')
} catch (err) {
console.log(err)
this.$toast.fail('发布失败')
}
}
发布成功处理
评论回复
准备回复弹层
一、在详情页中使用弹层用来展示文章的回复
1、在 data 中添加数据用来控制展示回复弹层的显示状态
data () {
return {
...
isReplyShow: false
}
}
2、在详情页中添加使用弹层组件
<!-- 评论回复 -->
<van-popup
v-model="isReplyShow"
position="bottom"
style="height: 95%"
>
评论回复
</van-popup>
<!-- /评论回复 -->
二、当点击评论项组件中的回复按钮的时候展示弹层
1、在 comment-item.vue 组件中点击回复按钮的时候，对外发布自定义事件
<van-button
size="mini"
type="default"
@click="$emit('click-reply')"
>回复 {{ comment.reply_count }}</van-button>
2、在详情页组件中使用的位置监听处理
<comment-item
v-for="(comment, index) in articleComment.list"
:key="index"
:comment="comment"
@click-reply="isReplyShow = true"
/>
点击回复显示弹出层
封装内容组件
<template>
<div class="comment-reply">
<!-- 导航栏 -->
<van-nav-bar :title="`${comment.reply_count}条回复`">
<van-icon
slot="left"
name="cross"
@click="$emit('click-close')"
/>
</van-nav-bar>
<!-- /导航栏 -->
<!-- 当前评论项 -->
<!-- /当前评论项 -->
<van-cell title="所有回复" />
<!-- 评论的回复列表 -->
<!-- /评论的回复列表 -->
<!-- 底部 -->
<!-- /底部 -->
</div>
</template>
<script>
export default {
name: 'CommentReply',
components: {},
props: {},
data () {
return {}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {}
}
</script>
<style scoped></style>
传递当前点击回复的评论项
处理头部
处理当前评论项
一、让 comment-reply.vue 组件拿到点击回复的评论对象
1、在 comment-item.vue 组件中点击回复按钮的时候把评论对象给传出来
<van-button
size="mini"
type="default"
@click="$emit('click-reply', comment)"
>回复 {{ comment.reply_count }}</van-button>
2、在文章详情组件中接收处理
data () {
return {
...
currentComment: {} // 点击回复的那个评论对象
}
}
<comment-item
v-for="(comment, index) in articleComment.list"
:key="index"
:comment="comment"
@click-reply="onReplyShow"
/>
async onReplyShow (comment) {
// 将子组件中传给我评论对象存储到当前组件
this.currentComment = comment
// 展示评论回复弹层
this.isReplyShow = true
}
3、在详情组件中将 currentComment 传递给 comment-reply.vue 组件
<!-- 评论回复 -->
<van-popup
v-model="isReplyShow"
position="bottom"
style="height: 95%"
>
<comment-reply
@click-close="isReplyShow = false"
:comment="currentComment"
/>
</van-popup>
<!-- /评论回复 -->
4、在 comment-reply.vue 组件中声明接收
props: {
comment: {
type: Object,
required: true
}
},
最后使用调试工具查看 props 数据是否接收正确。
二、在 comment-reply.vue 组件中展示当前评论
1、加载注册 comment-item.vue 组件
2、使用展示
<template>
<div class="comment-reply">
<!-- 导航栏 -->
<van-nav-bar :title="`${comment.reply_count}条回复`">
<van-icon
slot="left"
name="cross"
@click="$emit('click-close')"
/>
</van-nav-bar>
<!-- /导航栏 -->
<!-- 当前评论项 -->
<comment-item :comment="comment" />
<!-- /当前评论项 -->
<!-- 评论的回复列表 -->
<!-- /评论的回复列表 -->
<!-- 底部 -->
<!-- /底部 -->
</div>
</template>
一：把点击回复的评论对象传递给评论回复组件
1、在 data 中添加一个数据用来存储点击回复的评论对象
data () {
return {
...
currentComment: {} // 存储当前点击回复的评论对象
}
}
2、在点击回复的处理函数中评论对象存储到数据中
async onReplyShow (comment) {
+ this.currentComment = comment
// 显示回复的弹层
this.isReplyShow = true
}
3、把当前组件的 currentComment 传递给评论回复组件
<!-- 评论回复 -->
<van-popup
v-model="isReplyShow"
get-container="body"
round
position="bottom"
:style="{ height: '90%' }"
>
<!-- 回复列表 -->
+ <comment-reply :comment="currentComment" />
<!-- /回复列表 -->
</van-popup>
<!-- 评论回复 -->
4、在评论回复组件中声明 props 接收数据
props: {
comment: {
type: Object,
required: true
}
},
测试：点击不同的评论回复按钮，查看子组件中的 props 数据 comment 是否是当前点击回复所在的评论对象。
二、数据绑定：在评论回复组件中展示当前评论
<!-- 导航栏 -->
+
<van-nav-bar :title="comment.reply_count + '条回复'">
<van-icon slot="left" name="cross" />
</van-nav-bar>
<!-- /导航栏 -->
<!-- 当前评论 -->
<van-cell title="当前评论">
<van-image
slot="icon"
round
width="30"
height="30"
style="margin-right: 10px;"
:src="comment.aut_photo"
/>
+ <span style="color: #466b9d;" slot="title">{{ comment.aut_name }}</span>
<div slot="label">
+
<p style="color: #363636;">{{ comment.content }}</p>
<p>
+
<span style="margin-right: 10px;"
>{{ comment.pubdate | relativeTime }}</span
>
<van-button size="mini" type="default" +
>回复 {{ comment.reply_count }}</van-button
>
</p>
</div>
<van-icon slot="right-icon" />
</van-cell>
<!-- /当前评论 -->
展示评论回复列表
基本思路：
- 回复列表和文章的评论列表几乎是一样的
- 重用把之前封装的评论列表
<template>
<div class="comment-reply">
<!-- 导航栏 -->
<van-nav-bar :title="`${comment.reply_count}条回复`">
<van-icon
slot="left"
name="cross"
@click="$emit('click-close')"
/>
</van-nav-bar>
<!-- /导航栏 -->
<!-- 当前评论项 -->
<comment-item :comment="comment" />
<!-- /当前评论项 -->
<van-cell title="所有回复" />
<!-- 评论的回复列表 -->
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<comment-item
v-for="(comment, index) in list"
:key="index"
:comment="comment"
/>
</van-list>
<!-- /评论的回复列表 -->
<!-- 底部 -->
<!-- /底部 -->
</div>
</template>
<script>
import CommentItem from './comment-item'
import { getComments } from '@/api/comment'
export default {
name: 'CommentReply',
components: {
CommentItem
},
props: {
comment: {
type: Object,
required: true
}
},
data () {
return {
list: [],
loading: false,
finished: false,
offset: null,
limit: 20
}
},
computed: {},
watch: {},
created () {},
mounted () {},
methods: {
async onLoad () {
// 1. 请求获取数据
const { data } = await getComments({
type: 'c', // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
source: this.comment.com_id.toString(), // 源id，文章id或评论id
offset: this.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
limit: this.limit // 获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
})
// 2. 将数据添加到列表中
const { results } = data.data
this.list.push(...results)
// 3. 关闭 loading
this.loading = false
// 4. 判断数据是否加载完毕
if (results.length) {
this.offset = data.data.last_id
} else {
this.finished = true
}
}
}
}
</script>
<style scoped></style>
解决弹层中组件内容不更新问题
弹层组件：
- 如果初始的条件是 false，则弹层的内容不会渲染
- 程序运行期间，当条件变为 true 的时候，弹层才渲染了内容
- 之后切换弹层的展示，弹层只是通过 CSS 控制隐藏和显示
弹层渲染出来以后就只是简单的切换显示和隐藏，里面的内容也不再重新渲染了，所以会导致我们的评论的回复列表不会动态更新了。解决办法就是在每次弹层显示的时候重新渲染组件。
<!-- 评论回复 -->
<van-popup
v-model="isReplyShow"
get-container="body"
round
position="bottom"
:style="{ height: '90%' }"
>
<!-- 回复列表 -->
<comment-reply :comment="currentComment" + v-if="isReplyShow" />
<!-- /回复列表 -->
</van-popup>
<!-- 评论回复 -->
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了