Like 点赞

基础用法

<template>
  <div class="demo-like">
    <div class="demo-like__panel">
      <plv-like
        ref="like"
        :icons="icons"
        @click-button="handleClick"
        @press-hold="handleClick"
      />
      <div class="demo-like__title">基础用法</div>
    </div>

    <div class="demo-like__panel">
      <plv-like
        :icons="icons"
        :count="837777"
        @click-button="handleClick"
        @press-hold="handleClick"
      />
      <div class="demo-like__title">点赞数量</div>
    </div>

    <div class="demo-like__panel">
      <plv-like
        :icons="customIcons"
        :count="837777"
        @click-button="handleClick"
        @press-hold="handleClick"
      />
      <div class="demo-like__title">自定义宽高</div>
    </div>

    <div class="demo-like__panel">
      <div class="demo-like__btn"></div>
      <div class="demo-like__btn"></div>
      <plv-like
        :icons="icons"
        :count="837777"
        appear-mode="bottom-right"
        @click-button="handleClick"
        @press-hold="handleClick"
      />
      <div class="demo-like__title">右下角冒出</div>
    </div>

    <div class="demo-like__panel">
      <div class="demo-like__btn"></div>
      <div class="demo-like__btn"></div>
      <plv-like
        :icons="icons"
        :count="837777"
        appear-mode="bottom-left"
        @click-button="handleClick"
        @press-hold="handleClick"
      />
      <div class="demo-like__title">左下角冒出</div>
    </div>

    <div class="demo-like__panel">
      <plv-like
        :icons="icons"
        :count="837777"
        @click-button="handleClick"
        @press-hold="handleClick"
      >
        <div slot="like-button" class="demo-like__custom__btn">按</div>
        <div slot="like-count" class="demo-like__custom__count" slot-scope="scope">{{ scope.count }}</div>
      </plv-like>
      <div class="demo-like__title">自定义元素</div>
    </div>
  </div>
</template>

<script>
import crown from './imgs/icon-live-crown.png';
import rocket from './imgs/icon-like-rocket.png';
import trophy from './imgs/icon-like-trophy.png';
import gift from './imgs/icon-like-gift.png';
import donuts from './imgs/icon-like-donuts.png';
import diamond from './imgs/icon-like-diamond.png';
import heart from './imgs/icon-like-heart.png';
import star from './imgs/icon-like-star.png';
import thumb from './imgs/icon-like-thumb.png';
import watermelon from './imgs/icon-like-watermelon.png';

import airplane from './imgs/icon-sf-airplane.png';
import box from './imgs/icon-sf-box.png';
import plane from './imgs/icon-sf-plane.png';

import throttle from 'lodash-es/throttle';

const likeIcons = [
  crown,
  rocket,
  trophy,
  gift,
  donuts,
  diamond,
  heart,
  star,
  thumb,
  watermelon,
];

const customIcons = [
  {
    src: airplane,
    width: 55,
    height: 55
  },
  {
    src: box,
    width: 40,
    height: 40
  },
  {
    src: plane,
    width: 43,
    height: 43
  }
];

export default {
  data() {
    return {
      icons: likeIcons,
      customIcons,

      timer: undefined,
      // 待发送的点赞数量
      waitLikeCount: 0,
      // 上一次的点击时间
      lastClickTime: undefined,
    };
  },

  mounted() {
    this.timer = setInterval(() => {
      this.joinAnimation();
    }, 3000);
  },

  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = undefined;
  },

  methods: {
    // 处理点击、按住事件
    handleClick() {
      const now = Date.now();

      // 距离上次点击时间超过 200ms 才记录
      if (!this.lastClickTime || now - this.lastClickTime > 200) {
        this.waitLikeCount += 1;
        this.sendLikeEventThrottle();
        this.lastClickTime = now;
      }
    },

    // 发送点赞事件（防抖）
    sendLikeEventThrottle: throttle(function() {
      this.sendLikeEvent();
    }, 5000, { trailing: true }),

    // 发送点赞事件
    sendLikeEvent() {
      console.log('发送到聊天室', this.waitLikeCount);
      this.waitLikeCount = 0;
    },

    // 插入一个动画到组件中
    joinAnimation() {
      if (this.$refs.like) {
        this.$refs.like.pushAnimation();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-like {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.demo-like__panel {
  height: 240px;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

.demo-like__title {
  font-size: 14px;
  margin-top: 24px;
  color: #999;
}

.demo-like__btn {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  background-image: url(./imgs/interactive-game-icon.png);
  background-size: 100% 100%;
}

.demo-like__custom__btn {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  border-radius: 50%;
  background: red;
  color: #fff;
}

.demo-like__custom__count {
  color: #2196f3;
}
</style>

显示代码

点赞动画

注意，时间为每隔 n 毫秒弹出一个动画，速度介于 0~1，值越大，动画速度越快，默认：0.018

<template>
  <div class="demo-like-animation">
    <div class="demo-like-animation__area">
      <plv-like-animation
        ref="animation"
        :icons="likeIcons"
        :max-count="maxCount"
        :animation-options="commonOptions"
        @queue-count-change="handleCountChange"
      />
    </div>

    <div class="demo-like-animation__control">
      <plv-button @click="callback1">随机动画</plv-button>
      <plv-button @click="callback2">指定图标和尺寸</plv-button>

      <plv-form label-width="80px" label-height="32px">
        <div>
          <plv-form-item label="最大数量">
            <plv-input-number
              v-model="maxCountVal"
              size="small"
            />
          </plv-form-item>
          <plv-form-item label="时间(ms)">
            <plv-input-number
              v-model="pushMs"
              size="small"
            />
          </plv-form-item>
        </div>
        <div>
          <plv-form-item label="速度">
            <plv-input-number
              v-model="speedVal"
              size="small"
            />
          </plv-form-item>
          <plv-form-item label="当前数量">
            <plv-input-number
              v-model="queueCount"
              size="small"
              disabled
            />
          </plv-form-item>
        </div>
      </plv-form>

      <plv-button @click="start">开启</plv-button>
      <plv-button type="cancel" @click="close">关闭</plv-button>
    </div>
  </div>
</template>

<script>
import crown from './imgs/icon-live-crown.png';
import rocket from './imgs/icon-like-rocket.png';
import trophy from './imgs/icon-like-trophy.png';
import gift from './imgs/icon-like-gift.png';
import donuts from './imgs/icon-like-donuts.png';
import diamond from './imgs/icon-like-diamond.png';
import heart from './imgs/icon-like-heart.png';
import star from './imgs/icon-like-star.png';
import thumb from './imgs/icon-like-thumb.png';
import watermelon from './imgs/icon-like-watermelon.png';

const likeIcons = [
  crown,
  rocket,
  trophy,
  gift,
  donuts,
  diamond,
  heart,
  star,
  thumb,
  watermelon,
];

export default {
  data() {
    return {
      likeIcons,

      commonOptions: {
        speed: 0.018,
      },
      speedVal: 0.018,
      maxCountVal: 50,
      maxCount: 50,
      queueCount: 0,
      pushMs: 100,
      pushTimer: undefined,
    };
  },

  beforeDestroy() {
    this.close();
  },

  methods: {
    callback1() {
      this.$refs.animation.pushAnimation();
    },

    callback2() {
      this.$refs.animation.pushAnimation({
        src: thumb,
        width: 50,
        height: 50,
      });
    },

    handleCountChange(count) {
      this.queueCount = count;
    },

    /**
     * 关闭自动点赞
     */
    close() {
      clearInterval(this.pushTimer);
      this.pushTimer = undefined;
    },

    /**
     * 启动自动点赞
     */
    start() {
      this.close();

      let maxCount = parseInt(this.maxCountVal);
      if (!maxCount || maxCount <= 0 || isNaN(maxCount)) {
        maxCount = 50;
      }
      this.maxCount = maxCount;

      let pushMs = parseInt(this.pushMs);
      if (!pushMs || pushMs <= 0 || isNaN(pushMs)) {
        pushMs = 100;
      }
      this.pushMs = pushMs;

      let speedVal = Number(this.speedVal);
      console.log('speedVal', speedVal);
      if (!speedVal || speedVal <= 0 || isNaN(speedVal)) {
        speedVal = 0.018;
      }
      this.speedVal = speedVal;
      this.commonOptions = {
        speed: this.speedVal,
      };

      this.pushTimer = setInterval(() => {
        this.$refs.animation.pushAnimation();
      }, this.pushMs);
    },
  },
}
</script>

<style lang="scss" scoped>
.demo-like-animation {
  display: flex;

  .plv-button {
    margin-right: 8px;
  }
}
.demo-like-animation__area {
  margin-right: 8px;
  border-right: 1px solid #ddd;
  flex-shrink: 0;
}
.demo-like-animation__control {
  flex: 1;

  .plv-form {
    margin-top: 16px;
  }

  .plv-form-item {
    display: inline-block;
    margin-right: 8px;
  }
}
</style>

显示代码

LikeButton Attributes

参数	说明	类型	可选值	默认值
count	点赞数量	Number	-	0
vibrate	移动端按下时是否震动手机	Boolean	-	true
readonly	是否只读无法点击	Boolean	-	false

LikeButton Events

事件名称	说明	回调参数
click-button	点击按钮	-
press-hold	按住按钮	-

LikeAnimation Attributes

参数	说明	类型	可选值	默认值
width	动画区宽度	Number	-	80
height	动画区高度	Number	-	180
max-count	动画最大显示数量	Number	-	50
icons	随机图标列表	Array<string | { src, width, height }>	-	-
appear-mode	出现方式，底部居中 / 左下角 / 右下角	String	bottom-center / bottom-left / bottom-right	bottom-center
animation-options	动画公用配置，详细可见 AnimationOptions	Obejct	-	-

LikeAnimation Events

事件名称	说明	回调参数
queue-count-change	动画队列数改变	count-数量

Animation Options

参数	说明	类型	可选值	默认值
width	动画宽度	Number	-	32
height	动画高度	Number	-	32
bezierPoint	三阶贝塞尔曲线点 { p0, p1, p2, p3 }	Object	-	-
speed	速度	Number	0~1	0.018
progress	初始动画进度	Number	0~1	0
rotate	是否进行旋转	Boolean	-	false
appearMode	出现方式，底部居中 / 左下角 / 右下角	String	bottom-center / bottom-left / bottom-right	bottom-center
rotateDirection	初始旋转方向，顺时针 / 逆时针	String	cw / ccw	cw
rotateAngle	初始旋转角度	Number	-	0
angleSectionBeign	旋转角度开始区间	Number	-	-20
angleSectionEnd	旋转角度结束区间	Number	-	20
scale	初始缩放倍数	Number	-	0
scaleSection	缩放区间，动画进度达到某个值时缩放达到最大值	Number	0~1	0.4
startHideSection	开始隐藏的动画区间，动画进度达到某个值时开始渐变隐藏	Number	0~1	0.8