项目效果

项目实现

html

autofocus html5新特性，文本域自动聚焦
@focus 聚焦事件， @blur 失焦事件， @input 文本域输入事件
v-model.trim trim修饰符，去掉首尾空格
用了动态class，还有用v-for遍历的元素，其他都是一些常用的标签

<div class="comment-container">
    <!-- 表单域 -->
    <div class="comment-box">
        <textarea  placeholder="请留下你的足迹！"
        :class="{'text-active': textActive, 'textarea-box': true}" autofocus
        @focus="textFocusFn" @blur="textBlurFn" v-model.trim="valueIpt"
        @input="changeIptFn"></textarea>
        <span class="box-number" >{{currentNum}}/1000</span>
        <button @click="clickBtnFn">发布</button>
    </div>
    <!-- 评论列表区域 -->
    <h3>评论</h3>
    <div class="comment-list">
        <p v-for="item in commentList" :key="item.id">
          {{item.content}}
          <button class="remove" @click="removeFn(item.id)">删除</button>
        </p>
    </div>
  </div>

script

注意向评论列表中加入元素，要用unshift() 方法
因为unshift() 方法可以向数组的开头添加一个或更多元素，并返回新的长度
提示都写在代码旁边，都是一些简单逻辑

data () {
    return {
      textActive: false, // 文本域聚焦时显示
      currentNum: 0, // 记录文本域输入文字长度，不能超过1000
      valueIpt: '', // 文本域输入
      commentList: [], // 评论列表
      commentIndex: 1 // 评论索引
    }
  },
  methods: {
    // 聚焦
    textFocusFn () {
      this.textActive = true // 显示激活时样式
    },
    // 失焦
    textBlurFn () {
      this.textActive = false // 隐藏激活时样式
    },
    // 文本域输入事件
    changeIptFn () { // 记录文本域输入文字长度，不能超过1000
      if (this.valueIpt.trim() === '') {
        this.currentNum = 0
        return
      }
      this.currentNum = this.valueIpt.length
    },
    // 点击删除小按钮
    removeFn (index) { // 删除对应评论
      this.commentList = this.commentList.filter(item => {
        return item.id !== index
      })
    },
    // 点击发布按钮
    clickBtnFn () {
      if (this.valueIpt === '') return
      const obj = {
        id: this.commentIndex++,
        content: this.valueIpt
      }
      this.commentList.unshift(obj) // 添加到评论列表
      this.valueIpt = ''
      this.currentNum = 0 // 重置文本域和记录文字数
    }
  }

css

只贴了一部分重要的css
box-sizing: border-box; 元素的总高度和宽度包含内边距和边框(padding 与 border)

.textarea-box{ // 文本域样式
    width: 100%;
    height: 120px;
    padding: 10px 20px;
    background-color: #f2f3f5;
    border: 0;
    outline: none; // 无轮廓样式
    resize: none;  // 不允许拉动文本域
    font-size: 14px;
    box-sizing: border-box; // css3盒子模型
}
.text-active{ // 激活时样式
    border: 1px solid pink;
    background-color: #fff;
}
.remove{ // 删除按钮一部分样式
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) // 自身高度的50%
}

vue2防掘金评论留言项目

项目效果

项目实现

html

script

css