vue-父子关系模板详情
父亲：
<template>
<div class="comment-post">
<van-field class="post-field"
v-model.trim="message"
rows="2"
autosize
type="textarea"
maxlength="1000"
placeholder="请输入留言"
show-word-limit />
<van-button class="post-btn"
@click="onPost"
:disabled="!message.length">发布</van-button>
</div>
</template>
<script>
import { postarticle } from '@/api/article.js'
export default {
name: 'commentPost',
props: {
target: {
type: [Number, String, Object],
required: true
},
art_id: {
type: [Number, String, Object],
default: null
}
},
components: {},
data () {
return {
message: ''
}
},
created () {
},
mounted () {
},
methods: {
async onPost () {
try {
const { data } = await postarticle({
target: this.target.toString(), // 评论的目标 id（评论文章即为文章id，对评论进行回复则为评论id）
content: this.message, // 评论内容
art_id: this.art_id // 文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
})
this.message = ''
this.$emit('input-success', data.data)
console.log(data)
} catch (error) {
this.$toast.fail('发布失败' + error)
this.message = ''
}
}
},
computed: {
}
}
</script>
<style scoped lang="less">
.comment-post {
display: flex;
align-items: center;
padding: 32px 0 32px 32px;
.post-field {
background-color: #f5f7f9;
}
.post-btn {
150px;
border: none;
padding: 0;
color: #6ba3d8;
&::before {
display: none;
}
}
}
</style>
儿子：
<template>
<div class="article-container">
<!-- 导航栏 -->
<van-nav-bar class="page-nav-bar"
left-arrow
title="猫咪新闻"
@click-left="onClickLeft"></van-nav-bar>
<div class="main-wrap">
<!-- 加载中 -->
<div class="loading-wrap"
v-if='loading'>
<van-loading color="#3296fa"
vertical>加载中</van-loading>
</div>
<!-- 加载完成-文章详情 -->
<div class="article-detail"
v-else-if="article.title">
<!-- 文章标题 -->
<h1 class="article-title">{{article.title}}</h1>
<!-- 用户信息 -->
<van-cell class="user-info"
center
:border="false">
<van-image class="avatar"
slot="icon"
round
fit="cover"
:src="article.aut_photo" />
<div slot="title"
class="user-name">{{article.aut_name}}</div>
<div slot="label"
class="publish-date">{{article.pubdate | dateformat}}</div>
<attentionUser v-model="article.is_followed"
@update-is_followed='article.is_followed = $event'
:user-id="article.aut_id"></attentionUser>
<!-- <van-button class="follow-btn"
v-if="article.is_followed"
type="info"
color="#3296fa"
round
size="small"
icon="plus"
@click="attention" :loading="followLoading">关注</van-button>
<van-button class="follow-btn"
v-else
round
size="small"
@click="attention" :loading="followLoading">已关注</van-button> -->
</van-cell>
<!-- 文章内容 -->
<div class="article-content markdown-body"
v-html='article.content'
ref="article-content"></div>
<van-divider>the end</van-divider>
<!-- 文章评论列表 -->
<comment-list :articleId='article.art_id'
:list="commentList"
@onload-success='totalCommentCount = $event.total_count'
@rply-click="onReplyClick($event)"></comment-list>
<!-- 底部区域 -->
<!-- 评论回复 -->
<van-popup v-model="isReplyShow"
position="bottom"
style="height: 90%">
<comment-reply v-if="isReplyShow"
:current="currentComment"
@closereply='closereply($event)' />
</van-popup>
<!-- 添加评论弹出框 -->
<van-popup v-model="Ispopshow"
closeable
position="bottom">
<comment-post :target="article.art_id"
@input-success='onposeseces($event)'></comment-post>
</van-popup>
<div class="article-bottom">
<van-button class="comment-btn"
type="default"
round
size="small"
@click="Ispopshow = true">写评论</van-button>
<van-icon name="comment-o"
:info="totalCommentCount"
color="#777" />
<articleCollect v-model="article.is_collected"
:article-id="article.art_id"></articleCollect>
<!-- 点赞的组件 -->
<article-like v-model="article.attitude"
:article-id="article.art_id"></article-like>
<van-icon name="share"
color="#777777"></van-icon>
</div>
</div>
<!-- 加载失败：404 -->
<div class="error-wrap"
v-else-if="errStatus === 404">
<van-icon name="failure" />
<p class="text">该资源不存在或已删除！</p>
</div>
<!-- 加载失败：其它未知错误（例如网络原因或服务端异常） -->
<div class="error-wrap"
v-else>
<van-icon name="failure" />
<p class="text">内容加载失败！</p>
<van-button class="retry-btn">点击重试</van-button>
</div>
</div>
</div>
</template>
<script>
import CommentReply from './components/comment-reply'
import commentPost from './components/article-pop'
import CommentList from '@/components/article-list/index.vue'
import articleLike from './components/article-like'
import attentionUser from '@/components/attention-use/index.vue'
import articleCollect from '@/components/article-collect/index.vue'
import { getAriticle, getattention, deleteFollow } from '@/api/article.js'
import { ImagePreview } from 'vant'
export default {
name: 'ArticleIndex',
provide: function () {
return {
art_id: this.articleId
}
},
props: {
articleId: {
type: [Number, String, Object],
required: true
}
},
components: {
attentionUser,
articleCollect,
CommentList,
articleLike,
commentPost,
CommentReply
},
data () {
return {
article: {}, // 文章详情
loading: true, // 加载中的状态
errStatus: 0, // 失败的状态码
followLoading: false, // loading效果防止网络慢用户多次点击按钮导致重复触发点击事件
commentList: [], // 评论列表
totalCommentCount: 0, // 评论的数量
Ispopshow: false,
isReplyShow: false, // 弹出层的激活
currentComment: {} // 当前点击回复的评论项
}
},
created () {
this.loadArticle()
},
mounted () {
},
methods: {
async loadArticle () {
this.loading = true
try {
const { data: res } = await getAriticle(this.articleId)
this.article = res.data
setTimeout(() => {
this.previewImage()
}, 0)
} catch (err) {
if (err.response && err.response.status === 404) {
this.errStatus = 404
}
this.$toast('获取数据失败!' + err)
}
this.loading = false
},
// onClickLeft点击导航栏右边返回
onClickLeft () {
this.$router.back()
},
// 预览图片
previewImage () {
const articleContent = this.$refs['article-content']
const imgs = articleContent.querySelectorAll('img')
const images = []
imgs.forEach((item, index) => {
images.push(item.src)
item.onclick = () => {
ImagePreview({
images: images,
startPosition: index
})
}
})
},
// 弹出框评论成功后
onposeseces (data) {
this.Ispopshow = false
this.commentList.unshift(data.new_obj)
},
onReplyClick (item) {
this.currentComment = item
// 显示评论回复弹出层
this.isReplyShow = true
},
closereply (value) {
this.isReplyShow = value
}
// // 关注事件
// async attention () {
// this.followLoading = true
// // 已关注
// try {
// if (this.article.is_followed) {
// const { data: res } = await deleteFollow(this.article.aut_id)
// // this.loadArticle()
// } else {
// const { data: res } = await getattention(this.article.aut_id)
// // this.loadArticle()
// }
// this.article.is_followed = !this.article.is_followed
// } catch (err) {
// let message = '操作失败，请重试'
// if (err.response && err.response.status === 400) {
// message = '你不能关注你自己！'
// }
// this.$toast(message)
// }
// this.followLoading = false
// }
}
}
</script>
<style scoped lang="less">
@import './github-markdown.css';
.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 {
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 {
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 {
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 {
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>