点赞功能

src/components/livedModel/livedControls.vue

 <template>
-    <div class="livedControls">
-      <!-- 公告层 -->
-      <livedAnnouncement></livedAnnouncement>
-      <!-- 评论层 -->
-      <livedIsMsg></livedIsMsg>
-      <!-- 底部控制层 -->
-      <div class="control flex">
-        <div class="goodsImg">
-          <img src="../../../static/images/lived/goodsImg.png" alt="">
-          <p class="goodsNum">99</p>
-        </div>
-        <div class="iptCopy">
-          跟主播说点什么...
-        </div>
-        <div class="shareIcon">
-          <van-icon name="share" />
-        </div>
-        <div class="heardIcon">
-          <van-icon name="like" class="like"/>
-          <p class="heardNum">99.9w</p>
+  <div class="livedControls">
+    <!-- 公告层 -->
+    <livedAnnouncement></livedAnnouncement>
+    <!-- 评论层 -->
+    <livedIsMsg></livedIsMsg>
+    <!-- 底部控制层 -->
+    <div class="control flex">
+      <div class="goodsImg">
+        <img src="../../../static/images/lived/goodsImg.png" alt />
+        <p class="goodsNum">99</p>
+      </div>
+      <div class="iptCopy">跟主播说点什么...</div>
+      <div class="shareIcon">
+        <van-icon name="share" />
+      </div>
+      <div class="heardIcon" @click="addLike(1)">
+        <van-icon name="like" class="like" />
+        <p class="heardNum">{{likeNumCopy}}</p>
+        <div class="box">
+          <div class="img" v-for="(item,index) in imgList" :key="index">
+            <img :src="item.img" alt />
+          </div>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
 import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
 import livedIsMsg from "@/components/livedModel/livedIsMsg";
 export default {
-    name: "",
-    data() {
-        return {}
+  name: "",
+  data() {
+    return {
+      likeNum: 9997, //点赞数
+      imgList: [],
+      iconList: [
+        "https://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
+        "https://img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg",
+        "https://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
+        "https://img2.imgtn.bdimg.com/it/u=1354268575,1268995723&fm=26&gp=0.jpg"
+      ],
+      num: 0
+    };
+  },
+  components: {
+    livedAnnouncement,
+    livedIsMsg
+  },
+  computed: {
+    likeNumCopy() {
+      return this.watchMan(this.likeNum);
+    }
+  },
+  created() {},
+  mounted() {
+    setInterval(() => {
+      this.getAdd();
+    }, 5000);
+  },
+  methods: {
+    // 数量大于1w
+    watchMan(val) {
+      return val - 0 > 10000 ? Math.floor(val / 10000 * 100) / 100 + "w" : val;
     },
-    components: {
-      livedAnnouncement,
-      livedIsMsg
+    // 点赞
+    addLike(val) {
+      if (val == 1) {
+        this.likeNum++;
+      }
+      setTimeout(() => {
+        this.num++;
+        if (this.num >= 4) {
+          this.num = 0;
+        }
+        this.imgList.push({
+          img: this.iconList[this.num]
+        });
+      }, 300);
     },
-    computed: {},
-    created() {},
-    mounted() {},
-    methods: {}
-}
+    // 接口获取触发点赞
+    getAdd() {
+      if (this.imgList.length > 20) {
+        this.imgList = [];
+      }
+      for (let i = 0; i < this.iconList.length; i++) {
+        setTimeout(() => {
+          this.addLike(2);
+        }, 200 * i);
+      }
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-.flex{
+.flex {
   display: flex;
 }
-.livedControls{
+.livedControls {
   position: absolute;
   bottom: 10px;
   left: 0;
   width: 100vw;
-  .control{
+  .control {
     height: 40px;
     align-items: center;
     justify-content: space-around;
     padding: 0 12px;
-    .goodsImg{
+    .goodsImg {
       width: 30px;
       height: 30px;
       position: relative;
-      img{
+      img {
         width: 30px;
         height: 30px;
         position: absolute;
@@ -69,17 +121,17 @@ export default {
         left: 0;
         z-index: -1;
       }
-      .goodsNum{
+      .goodsNum {
         color: #fff;
         font-size: 14px;
         text-align: center;
         margin-top: 10px;
       }
     }
-    .iptCopy{
+    .iptCopy {
       margin: 0 10px;
       width: 50vw;
-      background: rgba(#000,0.4);
+      background: rgba(#000, 0.4);
       color: #999;
       font-size: 16px;
       height: 38px;
@@ -87,27 +139,76 @@ export default {
       line-height: 38px;
       text-indent: 1em;
     }
-    .shareIcon,.heardIcon{
+    .shareIcon,
+    .heardIcon {
       color: #fff;
       font-size: 30px;
       position: relative;
       width: 50px;
       height: 30px;
     }
-    .heardIcon{
-      .like{
+    .heardIcon {
+      .like {
         position: absolute;
         top: 0;
         left: 20%;
       }
-      .heardNum{
+      .heardNum {
         text-align: center;
         transform: translateY(-5px);
-        background: rgba(#E60012,0.5);
+        background: rgba(#e60012, 0.5);
         border-radius: 4px;
         padding: 1px 2px;
         font-size: 12px;
       }
+      .box {
+        width: 100px;
+        height: 260px;
+        position: absolute;
+        overflow: hidden;
+        bottom: 0;
+        right: -30px;
+        .img {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          margin-left: -20px;
+          width: 40px;
+          height: 40px;
+          animation: moveImg 1.5s linear 0.1s;
+          opacity: 0;
+          border-radius: 50%;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          img {
+            width: 40px;
+            height: 40px;
+          }
+        }
+        @keyframes moveImg {
+          0% {
+            opacity: 1;
+          }
+          20% {
+            transform: translateY(-40px) translateX(-5px) scale(1);
+          }
+          40% {
+            transform: translateY(-80px) translateX(0) scale(1);
+          }
+          60% {
+            transform: translateY(-120px) translateX(0) scale(1);
+          }
+          80% {
+            transform: translateY(-160px) translateX(5px) scale(1);
+          }
+          100% {
+            opacity: 0;
+            transform: translateY(-200px) translateX(0) scale(1);
+          }
+        }
+      }
     }
   }
 }