vue实现评论（类似于csdn里面的评论）

已于 2024-11-14 08:18:36 修改
阅读量1k 收藏 17
点赞数 3
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
于 2024-05-11 16:37:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45561885/article/details/138721141

html

<template>
  <el-drawer
    title="评论"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    append-to-body
    size="420px"
    custom-class="conmment_drawer"
  >
    <div class="conmment_box">
      <div class="my-reply">
        <div class="reply-info">
          <el-input
            @focus="focusInput"
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="1000"
            :autosize="{ minRows: 3, maxRows: 3 }"
            autofocus
            class="reply_input"
          >
          </el-input>
        </div>
        <div class="reply-btn-box">
          <div class="limit">
            还能输入
            <span class="num">{{ 1000 - inputLength }}</span>
            个字符
          </div>
          <el-button size="mini" type="primary" round @click="sendComment">
            发表评论
          </el-button>
        </div>
      </div>
      <div
        v-for="(item, i) in comments"
        :key="i"
        class="author-title reply-father"
      >
        <div class="author-info">
          <span class="author-name">{{ item.name }}</span>
          <span class="author-time">{{ item.time }}</span>
        </div>
        <div class="icon-btn">
          <span
            v-if="!item.inputShow"
            @click="showReplyInput(i, item.name, item.id)"
          >
            <i class="iconfont el-icon-s-comment"></i>
            回复
          </span>
          <span v-else @click="closeReplyInput(i, item.name, item.id)">
            <i class="iconfont el-icon-s-comment"></i>
            收起回复
          </span>
        </div>
        <div class="talk-box">
          <p>
            <span class="reply">{{ item.comment }}</span>
          </p>
        </div>
        <!-- 一级回复弹窗 -->
        <div v-show="_inputShow(i)" class="my-reply">
          <div class="reply-info">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="replytextarea"
              maxlength="1000"
              :autosize="{ minRows: 3, maxRows: 3 }"
              autofocus
              class="reply_input"
            >
            </el-input>
          </div>
          <div class="reply-btn-box">
            <div class="limit">
              还能输入
              <span class="num">{{ 1000 - inputLength2 }}</span>
              个字符
            </div>
            <el-button
              size="mini"
              type="primary"
              round
              @click="sendCommentReply(i)"
            >
              发表评论
            </el-button>
          </div>
        </div>
        <div class="reply-box">
          <div v-for="(reply, j) in item.reply" :key="j" class="author-title">
            <div class="author-info">
              <span class="author-name">{{ reply.from }}</span>
              <span class="author-time">{{ reply.time }}</span>
            </div>
            <div class="icon-btn">
              <span
                v-if="!reply.inputShow"
                @click="showReplyInput2(i, reply.from, reply.id, j)"
              >
                <i class="iconfont el-icon-s-comment"></i>
                回复
              </span>
              <span
                v-else
                @click="closeReplyInput2(i, reply.from, reply.id, j)"
              >
                <i class="iconfont el-icon-s-comment"></i>
                收起回复
              </span>
            </div>
            <div class="talk-box">
              <p>
                <span>回复 {{ reply.to }}：</span>
                <span class="reply">{{ reply.comment }}</span>
              </p>
            </div>
            <!-- 二级回复弹窗 -->
            <div v-show="_inputShow2(i, j)" class="my-comment-reply">
              <div class="reply-info">
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="replytextarea"
                  maxlength="1000"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  autofocus
                  class="reply_input"
                >
                </el-input>
              </div>
              <div class="reply-btn-box">
                <div class="limit">
                  还能输入
                  <span class="num">{{ 1000 - inputLength2 }}</span>
                  个字符
                </div>
                <el-button
                  size="mini"
                  type="primary"
                  round
                  @click="sendCommentReply(i)"
                >
                  发表评论
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

css

<style lang="scss" scoped>
>>> .conmment_drawer {
  .el-drawer__header {
    margin-bottom: 0px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
  }
}
.conmment_box {
  .my-reply {
    padding: 10px;
    background-color: rgba(245, 246, 247, 0.8);
    margin: 10px 16px;
    border-radius: 8px;
    .reply-info {
      display: inline-block;
      width: 100%;
      >>> .reply_input {
        .el-textarea__inner {
          background: rgba(245, 246, 247, 0.8);
          border: none;
          padding: 0px 6px;
        }
      }
    }
    .reply-btn-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 6px;
      margin-top: 10px;
      .limit {
        font-size: 12px;
        color: #999aaa;
        .num {
          color: #222226;
        }
      }
    }
  }
  .my-comment-reply {
    padding: 10px;
    background-color: #ffff;
    margin-top: 8px;
    border-radius: 8px;
    .reply-info {
      display: inline-block;
      width: 100%;
      >>> .reply_input {
        .el-textarea__inner {
          background: #ffff;
          border: none;
          padding: 0px 6px;
        }
      }
    }
    .reply-btn-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 6px;
      margin-top: 10px;
      .limit {
        font-size: 12px;
        color: #999aaa;
        .num {
          color: #222226;
        }
      }
    }
  }
  .author-title:not(:last-child) {
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
  }
  .author-title {
    padding: 10px 16px;
    .author-info {
      display: inline-block;
      width: 60%;
      line-height: 20px;
      > span {
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .author-name {
        color: #000;
        font-size: 16px;
        font-weight: bold;
      }
      .author-time {
        margin-left: 6px;
        font-size: 12px;
        color: #aaa4a4;
      }
    }
    .icon-btn {
      width: 30%;
      padding: 0 !important ;
      float: right;
      text-align: right;
      font-size: 12px;
      color: #999aaa;

      > span {
        cursor: pointer;
      }
      .iconfont {
        font-size: 14px;
      }
    }
    .talk-box {
      margin-top: 8px;
      font-size: 14px;
      > p {
        margin: 0;
        color: #222226;
      }
      .reply {
        font-size: 14px;
        color: #000;
      }
    }
    .reply-box {
      margin: 10px 0 0 30px;
      background-color: #efefef;
      border-radius: 4px;
    }
  }
}
</style>

js

<script>
import request from "@/utils/request";
export default {
  computed: {
    inputLength () {
      return this.textarea.length;
    },
    inputLength2 () {
      return this.replytextarea.length;
    },
  },
  props: {
    direction: {
      type: String,
      default: "rtl"
    }
  },
  data () {
    return {
      textarea: '',
      replytextarea: '',
      drawer: true,
      closeInput: true,
      index: '0',
      index1: '0',
      index2: '0',
      replyComment: '',
      myName: 'Lana Del Rey',
      myId: 19870621,
      to: '',
      toId: -1,
      comments: [
        {
          name: '小明',
          id: 19870621,
          comment: '我发布一张新电影我不是小三,大家快来看啊',
          time: '2019年9月16日 18:43',
          commentNum: 2,
          like: 15,
          inputShow: false,
          reply: [
            {
              from: '小华',
              fromId: 19891221,
              to: '小明',
              toId: 19870621,
              comment: '我很喜欢你的新电影！！',
              time: '2019年9月16日 18:43',
              commentNum: 1,
              like: 15,
              inputShow: false
            },
            {
              from: '小红',
              fromId: 1123,
              to: '小明',
              toId: 19870621,
              comment: '别忘记宣传我们的新电影啊',
              time: '2019年9月16日 18:43',
              commentNum: 0,
              like: 5,
              inputShow: false

            }
          ]
        },
        {
          name: '小张',
          id: 19891221,
          comment: '我发行了我的新电影Lover',
          time: '2019年9月16日 18:43',
          commentNum: 1,
          like: 5,
          inputShow: false,
          reply: [
            {
              from: '小红',
              fromId: 19870621,
              to: '小张',
              toId: 19891221,
              comment: '新电影和speak now 一样棒！',
              time: '2019年9月16日 18:43',
              commentNum: 25,
              like: 5,
              inputShow: false

            }
          ]
        },
        {
          name: '小丽',
          id: 20190830,
          comment: 'ckwell on everywhere',
          time: '2019年9月16日 18:43',
          commentNum: 0,
          like: 5,
          inputShow: false,
          reply: []
        },
      ]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    /**
     * 获取列表
     */
    getList () {
      let id = '334551';
      let _query = {};
      request({
        url: `/api/plan/Comment/getListById/${id}`,
        method: 'post',
        data: _query
      }).then((res) => {
        console.log(res)
      })
    },
    handleClose () {

    },
    focusInput () {
      this.closeInput = false
    },
    hideReplyBtn () {
      replyInput.style.padding = "10px"
      replyInput.style.border = "none"
    },
    showReplyInput (i, name, id) {
      this.closeInput = true
      this.comments[this.index1].reply[this.index2].inputShow = false
      this.comments[this.index].inputShow = false
      this.index = i
      this.comments[i].inputShow = true
      this.to = name
      this.toId = id
    },
    closeReplyInput (i, name, id) {
      this.closeInput = false
      this.comments[this.index].inputShow = false
    },
    showReplyInput2 (i, name, id, j) {
      this.closeInput = true
      this.comments[this.index].inputShow = false
      this.comments[this.index1].reply[this.index2].inputShow = false
      this.index1 = i
      this.index2 = j
      this.comments[i].reply[j].inputShow = true
      this.to = name
      this.toId = id
    },
    closeReplyInput2 (i, name, id, j) {
      this.closeInput = false
      this.comments[i].reply[j].inputShow = false
    },
    _inputShow (i) {
      return this.comments[i].inputShow && this.closeInput
    },
    _inputShow2 (i, j) {
      return this.comments[i].reply[j].inputShow && this.closeInput
    },
    sendComment () {
      if (!this.textarea) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '评论不能为空'
        })
      } else {
        let a = {}
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.name = this.myName
        a.comment = this.textarea
        a.time = time
        a.commentNum = 0
        a.like = 0
        this.comments.push(a)
        this.replyComment = ''
        this.textarea = '';
      }
    },
    sendCommentReply (i) {
      if (!this.replytextarea) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '评论不能为空'
        })
      } else {
        let a = {}
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.from = this.myName
        a.to = this.to
        a.comment = this.replytextarea
        a.time = time
        a.commentNum = 0
        a.like = 0
        this.comments[i].reply.push(a)
        this.replytextarea = ''
      }
    },
    dateStr (date) {
      //获取js 时间戳
      var time = new Date().getTime();
      //去掉 js 时间戳后三位，与php 时间戳保持一致
      time = parseInt((time - date) / 1000);
      //存储转换值 
      var s;
      if (time < 60 * 10) {//十分钟内
        return '刚刚';
      } else if ((time < 60 * 60) && (time >= 60 * 10)) {
        //超过十分钟少于1小时
        s = Math.floor(time / 60);
        return s + "分钟前";
      } else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
        //超过1小时少于24小时
        s = Math.floor(time / 60 / 60);
        return s + "小时前";
      } else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
        //超过1天少于30天内
        s = Math.floor(time / 60 / 60 / 24);
        return s + "天前";
      } else {
        //超过30天ddd
        var date = new Date(parseInt(date));
        return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
      }
    }

  }
}
</script>

完整代码

<template>
  <el-drawer
    title="评论"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    append-to-body
    size="420px"
    custom-class="conmment_drawer"
  >
    <div class="conmment_box">
      <div class="my-reply">
        <div class="reply-info">
          <el-input
            @focus="focusInput"
            type="textarea"
            placeholder="请输入内容"
            v-model="textarea"
            maxlength="1000"
            :autosize="{ minRows: 3, maxRows: 3 }"
            autofocus
            class="reply_input"
          >
          </el-input>
        </div>
        <div class="reply-btn-box">
          <div class="limit">
            还能输入
            <span class="num">{{ 1000 - inputLength }}</span>
            个字符
          </div>
          <el-button size="mini" type="primary" round @click="sendComment">
            发表评论
          </el-button>
        </div>
      </div>
      <div
        v-for="(item, i) in comments"
        :key="i"
        class="author-title reply-father"
      >
        <div class="author-info">
          <span class="author-name">{{ item.name }}</span>
          <span class="author-time">{{ item.time }}</span>
        </div>
        <div class="icon-btn">
          <span
            v-if="!item.inputShow"
            @click="showReplyInput(i, item.name, item.id)"
          >
            <i class="iconfont el-icon-s-comment"></i>
            回复
          </span>
          <span v-else @click="closeReplyInput(i, item.name, item.id)">
            <i class="iconfont el-icon-s-comment"></i>
            收起回复
          </span>
        </div>
        <div class="talk-box">
          <p>
            <span class="reply">{{ item.comment }}</span>
          </p>
        </div>
        <!-- 一级回复弹窗 -->
        <div v-show="_inputShow(i)" class="my-reply">
          <div class="reply-info">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="replytextarea"
              maxlength="1000"
              :autosize="{ minRows: 3, maxRows: 3 }"
              autofocus
              class="reply_input"
            >
            </el-input>
          </div>
          <div class="reply-btn-box">
            <div class="limit">
              还能输入
              <span class="num">{{ 1000 - inputLength2 }}</span>
              个字符
            </div>
            <el-button
              size="mini"
              type="primary"
              round
              @click="sendCommentReply(i)"
            >
              发表评论
            </el-button>
          </div>
        </div>
        <div class="reply-box">
          <div v-for="(reply, j) in item.reply" :key="j" class="author-title">
            <div class="author-info">
              <span class="author-name">{{ reply.from }}</span>
              <span class="author-time">{{ reply.time }}</span>
            </div>
            <div class="icon-btn">
              <span
                v-if="!reply.inputShow"
                @click="showReplyInput2(i, reply.from, reply.id, j)"
              >
                <i class="iconfont el-icon-s-comment"></i>
                回复
              </span>
              <span
                v-else
                @click="closeReplyInput2(i, reply.from, reply.id, j)"
              >
                <i class="iconfont el-icon-s-comment"></i>
                收起回复
              </span>
            </div>
            <div class="talk-box">
              <p>
                <span>回复 {{ reply.to }}：</span>
                <span class="reply">{{ reply.comment }}</span>
              </p>
            </div>
            <!-- 二级回复弹窗 -->
            <div v-show="_inputShow2(i, j)" class="my-comment-reply">
              <div class="reply-info">
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="replytextarea"
                  maxlength="1000"
                  :autosize="{ minRows: 3, maxRows: 3 }"
                  autofocus
                  class="reply_input"
                >
                </el-input>
              </div>
              <div class="reply-btn-box">
                <div class="limit">
                  还能输入
                  <span class="num">{{ 1000 - inputLength2 }}</span>
                  个字符
                </div>
                <el-button
                  size="mini"
                  type="primary"
                  round
                  @click="sendCommentReply(i)"
                >
                  发表评论
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import request from "@/utils/request";
export default {
  computed: {
    inputLength () {
      return this.textarea.length;
    },
    inputLength2 () {
      return this.replytextarea.length;
    },
  },
  props: {
    direction: {
      type: String,
      default: "rtl"
    }
  },
  data () {
    return {
      textarea: '',
      replytextarea: '',
      drawer: true,
      closeInput: true,
      index: '0',
      index1: '0',
      index2: '0',
      replyComment: '',
      myName: 'Lana Del Rey',
      myId: 19870621,
      to: '',
      toId: -1,
      comments: [
        {
          name: '小明',
          id: 19870621,
          comment: '我发布一张新电影我不是小三,大家快来看啊',
          time: '2019年9月16日 18:43',
          commentNum: 2,
          like: 15,
          inputShow: false,
          reply: [
            {
              from: '小华',
              fromId: 19891221,
              to: '小明',
              toId: 19870621,
              comment: '我很喜欢你的新电影！！',
              time: '2019年9月16日 18:43',
              commentNum: 1,
              like: 15,
              inputShow: false
            },
            {
              from: '小红',
              fromId: 1123,
              to: '小明',
              toId: 19870621,
              comment: '别忘记宣传我们的新电影啊',
              time: '2019年9月16日 18:43',
              commentNum: 0,
              like: 5,
              inputShow: false

            }
          ]
        },
        {
          name: '小张',
          id: 19891221,
          comment: '我发行了我的新电影Lover',
          time: '2019年9月16日 18:43',
          commentNum: 1,
          like: 5,
          inputShow: false,
          reply: [
            {
              from: '小红',
              fromId: 19870621,
              to: '小张',
              toId: 19891221,
              comment: '新电影和speak now 一样棒！',
              time: '2019年9月16日 18:43',
              commentNum: 25,
              like: 5,
              inputShow: false

            }
          ]
        },
        {
          name: '小丽',
          id: 20190830,
          comment: 'ckwell on everywhere',
          time: '2019年9月16日 18:43',
          commentNum: 0,
          like: 5,
          inputShow: false,
          reply: []
        },
      ]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    /**
     * 获取列表
     */
    getList () {
      let id = '334551';
      let _query = {};
      request({
        url: `/api/plan/Comment/getListById/${id}`,
        method: 'post',
        data: _query
      }).then((res) => {
        console.log(res)
      })
    },
    handleClose () {

    },
    focusInput () {
      this.closeInput = false
    },
    hideReplyBtn () {
      replyInput.style.padding = "10px"
      replyInput.style.border = "none"
    },
    showReplyInput (i, name, id) {
      this.closeInput = true
      this.comments[this.index1].reply[this.index2].inputShow = false
      this.comments[this.index].inputShow = false
      this.index = i
      this.comments[i].inputShow = true
      this.to = name
      this.toId = id
    },
    closeReplyInput (i, name, id) {
      this.closeInput = false
      this.comments[this.index].inputShow = false
    },
    showReplyInput2 (i, name, id, j) {
      this.closeInput = true
      this.comments[this.index].inputShow = false
      this.comments[this.index1].reply[this.index2].inputShow = false
      this.index1 = i
      this.index2 = j
      this.comments[i].reply[j].inputShow = true
      this.to = name
      this.toId = id
    },
    closeReplyInput2 (i, name, id, j) {
      this.closeInput = false
      this.comments[i].reply[j].inputShow = false
    },
    _inputShow (i) {
      return this.comments[i].inputShow && this.closeInput
    },
    _inputShow2 (i, j) {
      return this.comments[i].reply[j].inputShow && this.closeInput
    },
    sendComment () {
      if (!this.textarea) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '评论不能为空'
        })
      } else {
        let a = {}
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.name = this.myName
        a.comment = this.textarea
        a.time = time
        a.commentNum = 0
        a.like = 0
        this.comments.push(a)
        this.replyComment = ''
        this.textarea = '';
      }
    },
    sendCommentReply (i) {
      if (!this.replytextarea) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '评论不能为空'
        })
      } else {
        let a = {}
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.from = this.myName
        a.to = this.to
        a.comment = this.replytextarea
        a.time = time
        a.commentNum = 0
        a.like = 0
        this.comments[i].reply.push(a)
        this.replytextarea = ''
      }
    },
    dateStr (date) {
      //获取js 时间戳
      var time = new Date().getTime();
      //去掉 js 时间戳后三位，与php 时间戳保持一致
      time = parseInt((time - date) / 1000);
      //存储转换值 
      var s;
      if (time < 60 * 10) {//十分钟内
        return '刚刚';
      } else if ((time < 60 * 60) && (time >= 60 * 10)) {
        //超过十分钟少于1小时
        s = Math.floor(time / 60);
        return s + "分钟前";
      } else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
        //超过1小时少于24小时
        s = Math.floor(time / 60 / 60);
        return s + "小时前";
      } else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
        //超过1天少于30天内
        s = Math.floor(time / 60 / 60 / 24);
        return s + "天前";
      } else {
        //超过30天ddd
        var date = new Date(parseInt(date));
        return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
      }
    }

  }
}
</script>

<style lang="scss" scoped>
>>> .conmment_drawer {
  .el-drawer__header {
    margin-bottom: 0px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
  }
}
.conmment_box {
  .my-reply {
    padding: 10px;
    background-color: rgba(245, 246, 247, 0.8);
    margin: 10px 16px;
    border-radius: 8px;
    .reply-info {
      display: inline-block;
      width: 100%;
      >>> .reply_input {
        .el-textarea__inner {
          background: rgba(245, 246, 247, 0.8);
          border: none;
          padding: 0px 6px;
        }
      }
    }
    .reply-btn-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 6px;
      margin-top: 10px;
      .limit {
        font-size: 12px;
        color: #999aaa;
        .num {
          color: #222226;
        }
      }
    }
  }
  .my-comment-reply {
    padding: 10px;
    background-color: #ffff;
    margin-top: 8px;
    border-radius: 8px;
    .reply-info {
      display: inline-block;
      width: 100%;
      >>> .reply_input {
        .el-textarea__inner {
          background: #ffff;
          border: none;
          padding: 0px 6px;
        }
      }
    }
    .reply-btn-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 6px;
      margin-top: 10px;
      .limit {
        font-size: 12px;
        color: #999aaa;
        .num {
          color: #222226;
        }
      }
    }
  }
  .author-title:not(:last-child) {
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
  }
  .author-title {
    padding: 10px 16px;
    .author-info {
      display: inline-block;
      width: 60%;
      line-height: 20px;
      > span {
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .author-name {
        color: #000;
        font-size: 16px;
        font-weight: bold;
      }
      .author-time {
        margin-left: 6px;
        font-size: 12px;
        color: #aaa4a4;
      }
    }
    .icon-btn {
      width: 30%;
      padding: 0 !important ;
      float: right;
      text-align: right;
      font-size: 12px;
      color: #999aaa;

      > span {
        cursor: pointer;
      }
      .iconfont {
        font-size: 14px;
      }
    }
    .talk-box {
      margin-top: 8px;
      font-size: 14px;
      > p {
        margin: 0;
        color: #222226;
      }
      .reply {
        font-size: 14px;
        color: #000;
      }
    }
    .reply-box {
      margin: 10px 0 0 30px;
      background-color: #efefef;
      border-radius: 4px;
    }
  }
}
</style>

秃头小薛
关注
博文评论与在线消息提示[开发日志-SpringBoot+Vue]
`or 1 or 不正经の泡泡
12-27 1115
没想到就两个礼拜左右没有碰一起的项目代码，就忘得差不多了。还熟悉了一下代码，跪了。okey~接下来的话，来看到今天实现的效果：每次就是这样的一个评论区 并且在评论成功之后，还要发送消息给博主。 然后如果博主在线的话，那么就要实时进行一个推送，告诉博主，然后博主可以在消息的一个页面看到这个消息： 整个过程的话，和一个正常的博文社区，例如CSDN，掘金，思否，知乎是类似的。然后我们要做的就是实现这个东西。那么实现这个功能的话，大概由一下几个点需要明确一下：那么在这里的话，由于篇幅问题，加上这个消息推送服务并不
Vue2 实现电影院座位选择功能：完整代码与实现解析 用 Vue2 开发动态座位选择系统：从场次切换到座位确认 电影院选座页面开发：Vue2 项目实战（附代码） 基于 Vue2 的座位选择组件开发：详
南北极之间
11-23 955
Vue2 实现电影院座位选择功能：完整代码与实现解析 用 Vue2 开发动态座位选择系统：从场次切换到座位确认 电影院选座页面开发：Vue2 项目实战（附代码） 基于 Vue2 的座位选择组件开发：详细功能与实现 Vue2 前端实战：电影选座与动态交互设计Vue2 实现电影院座位选择功能：完整代码与实现解析 用 Vue2 开发动态座位选择系统：从场次切换到座位确认 电影院选座页面开发：Vue2 项目实战（附代码） 基于 Vue2 的座位选择组件开发：详细功能与实现 Vue2 前端实战：电影选座与动态交互设计
Vue.js实现文章评论和回复评论功能
10-19
主要为大家详细介绍了Vue.js实现文章评论和回复评论功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现评论功能
热门推荐
原地起飞
05-10 1万+
实现评论功能最开始确实是令我头疼的一件时间，因为不确定评论的字数，就要自适应高度，还不确定评论的层级，这看起来就很令人头疼。评论功能麻烦在于它是由层次的，有不停的回复功能，这点是令人比较头疼的地方，我在写这个功能的时候做了比较笨的一个方法去处理它。 我先选择了布局页面，先把页面布局好以后在去想怎么发表评论怎么回复评论一起渲染不确定层次的评论内容。 1、布局页面 想要实现以上布局方式，我在这个地方采取了flex布局， 让他自己去撑开盒子，这样就实现了高度自适应的一个方式，我在每一条评论内容下面隐藏.
评论区实现 前端Vue
最新发布
weixin_63023132的博客
07-06 453
根据后端部分定义，重点需要实现三个部分，1.当前用户发起新根评论请求；2.评论区展示部分；3.某一根评论的子评论展示以及回复组件显示。
vue简单的实现评论功能
l8023lzy的博客
09-20 752
简单实现了评论功能
vue里完成一个简单的评论功能，博客必备
Zwwxd666的博客
07-15 1325
效果展示 步骤 1-表单收集输入信息 <div class="commentorInfo"> <div style="position: relative"> <i class="fa fa-user" style="position:absolute;top: 50%;transform: translateY(-50%)transl
多级留言/评论的功能实现——Vue3前端篇
道阻且长 心态要好
05-25 5763
使用vue3对多级留言的功能前端实现
vue实现移动端悬浮窗效果
12-08
在Vue.js中实现移动端的悬浮窗效果...通过以上步骤，我们可以成功地在Vue移动端应用中实现一个可拖动的悬浮窗效果，类似于iPhone上的设计。这个悬浮窗可以根据用户的触摸操作自由移动，并在触摸结束时保持在相应位置。
vue项目或网页上实现文字转换成语音播放功能
10-15
在Vue项目或网页上实现文字转换成语音（Text-to-Speech，TTS）的功能，能够让用户通过听觉获取信息，这对于视力受限的用户、多任务处理或提升用户体验非常有益。本文将介绍在Vue项目中实现文字转语音的两种主要方式...
vs-code里面 vue代码提示插件
03-14
这样的快捷方式能极大地减少手动输入的时间，使开发者可以更加专注于逻辑实现，而非基础语法的编写。 接下来，我们来看看 VueHelper。VueHelper 由 xiaoxiaojun0756 开发，除了提供类似 Vue 2 Snippets 的代码片段...
vuejs实现用户登录注册及评论功能代码
04-28
vuejs实现用户登录注册及评论功能代码,可编辑修改用户部分信息。
vue实现评论列表功能
10-16
本文通过实例代码给大家介绍了vue实现评论列表功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue实现评论列表功能.docx
01-21
vue实现评论列表功能.docx
vue实现简单评论功能
菜鸟不菜
11-20 5392
先看效果图吧！！！！ 1.添加一条信息 接下来让我们看代码吧！ <style type="text/css"> *{ padding: 0;margin: 0; } .box{ margin: 30px; width: 500px; height: 500px; display: flex; } p{ margin-top: 10px; } a{ text-decoration: none;
使用vue写一个评论功能
weixin_42593130的博客
02-09 1737
在Vue中实现评论功能需要以下几个步骤： 创建一个评论组件：在Vue中，通常可以使用单文件组件的形式创建一个评论组件，该组件负责渲染评论的内容和表单。 在Vue实例中使用该组件：在需要评论功能的页面上使用该组件。 绑定评论数据：在Vue实例中使用数据绑定，将评论内容和评论表单与Vue实例绑定。 实现评论提交功能：在评论组件中，使用Vue中的方法实现评论提交功能，该方法负责将评论内容发送到后...
【vue】vue组件发表评论功能
ljs_coding
04-11 6559
今天看了vue相关的视频，所以跟着做一个小demo把知识串联起来，内容很简单但是也算是学习道路上的一点进步。 1 思路分析 发表评论模块写入一个组件，提高复用性。 关键点： 子组件通过localStorage向父组件传值 子组件有自己的data存储user和content，即评论人和评论内容，也就是dom元素绑定的数据。 点击‘发表评论’后，首先是将各条评论存入localStorage,然后通过...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值