vue.js项目实战运用篇之抖音视频APP-第七节： 视频点评快捷功能

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

---

第七节： 视频点评快捷功能

功能介绍

此功能是在视频列表的右侧功能栏中的内容，其中包括关注、点赞、评论、分享、及音乐播放器效果于一体的功能点，在这一章中我们将介绍及实现右侧功能栏，为了使代码利用率更强，我们会使用组件进行封装处理。
【温馨提示】由于时间分配原因，在本章中将进行评论、音乐播放器功能的实现。关注、点赞、分享功能后续更新。

视频店铺快捷功能组件结构分析

1.组件结构

2.组件布局及实现

/*
右侧功能组件
author:enjsky.g
time:2021-05-06
*/
<template>
<!-- 右侧内容 -->
  <div class="right-bar">
    <div class="rightbar-item">
      <div class="avatar-border">
        <!-- 头像 -->
        <img
          src="../../../assets/images/avatar.png"
          style="width: 40px;height: 40px; border-radius: 50%"
          alt
        />
        <!-- 添加关注按钮 -->
        <span
          class="iconfont icon-jia2"
          style="color:#FE2C5A;position: absolute;left: 15px;bottom: -12px;font-size: 20px"
        ></span>
      </div>
    </div>
    <!-- 点赞图标 -->
    <div class="item-icon">
      <span class="iconfont icon-dianzan"