vue封裝點贊👍特效元件

如圖所示，部落客封裝一個vue點贊效果的元件，由于網上很少有這種插件樣式，是以今天出一個點贊教程。

*注意：本次使用兩個img标簽（兩個顔色小手svg），如果你希望用到icon，也可自己更改代碼實作。

點贊效果主要用到css，是以，你需要知道的css3知識：

1、animation 動畫配合 keyframes 規則使用。
2、box-shadow 陰影與 transition 過渡效果的妙用。           

思路：（兩種樣式，一個控制開關）

1、點贊，出現縮放的紅色小手，通過 animation 從0%～50%～100% 的縮放效果。
2、周邊向外擴充的光暈效果，使用陰影box-shadow的第四個屬性（陰影擴充半徑）
   和第五個屬性（顔色）來實作。
3、使用vue @click事件，點選控制變量，通過三目運算，控制樣式變化。           

不多說了，直接看代碼：

⚠️注意：img标簽中的圖檔請更換自己的本地圖檔路徑，否則會報錯。

<!-- 點贊 -->
<template>
  <div id=''>
    <div class="circle flex-h" @click="handleClick" :class="isUp?'check':''">
      <div class="img-box" :class="isUp?'img-box-check':''">
        <img v-if="isUp" src="@/assets/images/fab.svg" alt="" />
        <img v-else src="@/assets/images/fab2.svg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  data () {
    return {
      isUp: false
    };
  },
  created () {

  },
  mounted () {

  },
  computed: {},
  watch: {},
  methods: {
    handleClick () {
      this.isUp = !this.isUp
    }
  },
}
</script>
<style lang='less' scoped>
.circle {
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 0px 0px 0px rgba(223, 46, 58, 0.5);
  .img-box {
    width: 20px;
    height: 20px;
    margin: 5px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none; // 防止快速點選圖檔被選中，可不加，為提高體驗，部落客加上了這幾行代碼。
    & img {
      width: 100%;
      height: 100%;
    }
  }
}
.check {
  -webkit-transition: box-shadow 0.5s;
  -moz-transition: box-shadow 0.5s;
  -o-transition: box-shadow 0.5s;
  transition: box-shadow 0.5s;
  box-shadow: 0px 0px 0px 1em rgba(226, 32, 44, 0);
}
.img-box-check {
  animation: anm 0.5s;
  -moz-animation: anm 0.5s;
  -webkit-animation: anm 0.5s;
  -o-animation: anm 0.5s;
}
@keyframes anm {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
  50% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}

// 以下為處理相容代碼，可不看。

@-moz-keyframes anm {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
  50% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}

@-webkit-keyframes anm {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
  50% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}

@-o-keyframes anm {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
  }
  50% {
    transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
  }
}
</style>           

以上就是點贊效果案例，自己加上 props 封裝下，喜歡請點贊。

wechat:villinwechat