ArticleComment.vue

/* eslint-disable vue/valid-template-root */
<template>
  <div class="articleCommentsClass">
    <div class="showComment">
      <div class="contentClass">
        <template v-if="contentRes.length">
          <div v-for="(item, key) in contentRes" :key="key">
            <h5>{{ item.user }}({{ item.date }}):</h5>
            <p>{{ item.content }}</p>
          </div>
        </template>
        <template v-else>
          <h5>{{ noneMsg }}</h5>
        </template>
      </div>
    </div>
    <div class="postComment">
      <div style="position: relative; display: flex; width: 100%">
        <el-input
          type="text"
          :rows="2"
          placeholder="填写评论(20字以内)"
          v-model="articleCommit"
          maxlength="20"
        >
        </el-input>
        <el-button
          type="primary"
          style="margin-left: 5px"
          @click="increment(userId, articleId, articleCommit)"
          v-loading="submitLoading"
          >提交评论</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'ArticleComment',
    props: ['articleId'],
    // props定义则data()无需定义
    data () {
        return {
            submitLoading: false,
            noneMsg: '还没人评论>_<',
            msg: '评论区',
            baseurl: '/api/',
            // baseurl: "http://yongma16.xyz/comment/",
            userImg: '',
            username: '匿名',
            contentRes: [],
            userId: '匿名',
            articleCommit: '',
            childArticleId: ''
        }
    },
    watch: {
        articleId: function (newData) {
            this.childArticleId = newData
            return newData
        }
    },
    mounted () {
        this.childArticleId && this.getComments(this.childArticleId)
    },
    methods: {
        dateToString (dateValue) {
            let timeCreate = new Date(dateValue)
            let year = timeCreate.getFullYear(),
                month = timeCreate.getMonth() + 1,
                day = timeCreate.getDate(),
                hour =
          timeCreate.getHours() > 9
              ? timeCreate.getHours()
              : '0' + timeCreate.getHours(),
                minute =
          timeCreate.getMinutes() > 9
              ? timeCreate.getMinutes()
              : '0' + timeCreate.getMinutes(),
                second =
          timeCreate.getSeconds() > 9
              ? timeCreate.getSeconds()
              : '0' + timeCreate.getSeconds()
            return (
                year +
        '年' +
        month +
        '月' +
        day +
        '日' +
        ' ' +
        hour +
        ':' +
        minute +
        ':' +
        second
            )
        },
        getComments (articleId) {
            let that = this
            let params = {
                articleId: articleId || that.articleId
            }
            this.$axios
                .post(that.baseurl + 'comment/get/', params)
                .then((res) => {
                    try {
                        let resData = res.data
                        that.contentRes = resData.content
                        that.contentRes.map((item) => {
                            item.date = that.dateToString(item.date)
                        })
                    } catch (e) {
                        throw Error(e)
                    }
                })
                .catch((r) => {
                    throw Error(r)
                })
        },
        increment (userId, articleId, content) {
            let that = this
            if (!localStorage.getItem('yma16siteUserInfo')) {
                that.$router
                    .push({
                        path: '/login'
                    })
                    .catch((error) => {
                        throw Error(error)
                    })
            } else {
                if (content === '' || !content) {
                    that.$notify({
                        title: '评论失败！',
                        message: '评论内容不能为空',
                        position: 'top-left'
                    })
                    return false
                }
                that.submitLoading = true
                const userInfo = JSON.parse(localStorage.getItem('yma16siteUserInfo'))
                that.userId = userInfo.username
                let params = {
                    username: that.userId,
                    articleId: articleId,
                    content: content
                }
                this.$axios
                    .post(that.baseurl + 'comment/post/', params)
                    .then((res) => {
                        that.submitLoading = false
                        that.articleCommit = null
                        try {
                            let resData = res.data
                            that.contentRes = resData.content
                            that.contentRes.map((item) => {
                                item.date = that.dateToString(item.date)
                            })
                        } catch (e) {
                            that.submitLoading = false
                            throw Error(e)
                        }
                    })
                    .catch((r) => {
                        that.submitLoading = false
                        that.$router
                            .push({
                                path: '/login'
                            })
                            .catch((error) => {
                                throw Error(error)
                            })
                        throw Error(r)
                    })
            }
        }
    }
}
</script>

<style scoped>
.articleCommentsClass {
  position: relative;
  widows: 100%;
  height: 100%;
  /* background: burlywood; */
  margin-bottom: 10px;
}

.showComment {
  position: relative;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  background: rgba(187, 168, 164, 0.8);
}

.contentClass {
  position: relative;
  width: 100%;
  overflow: auto;
}

.postComment {
  position: relative;
  width: 100%;
  height: auto;
  line-height: 10px;
  display: flex;
  width: 100%;
  margin-top: 10px;
}

.loginUsernameClass {
  display: block;
  width: 20px;
  /*内联对象需加*/
  word-break: keep-all;
  /* 不换行 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}
</style>