更新记录

1.0.0（2020-12-17）

1.组件点赞特效开发； 2.添加组件的点赞数量增加； 3.支持长按点赞； 4.根据点赞的数量，显示不同的文本。

平台兼容性

使用方法：

组件调用

<peter-dianzan :count="count" :longPress="longPress"></peter-dianzan>

在页面内添加，点赞按钮！

<button class="dianzan" type="primary" size="mini" @click="zan" @longpress="longZan" @touchend="longZanEnd">点赞</button>

js 脚本如下：

`

    },
    methods: {
        /**
         * 单次点赞
         */
        zan(e) {
            this.count++;
        },

        /**
         * 长按点赞(满屏♥)
         */
        longZan(e) {
            let self = this;
            if(e.type == 'longpress') {
                let time = setInterval(function() {
                    self.count++;
                    self.longPress = true;
                }, 100);
                this.time = time;
            }
        },

        /**
         * 长按点赞结束
         */
        longZanEnd(e) {
            clearInterval(this.time);
        }
    }
}

`

css 如下：

`<style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
}

.text-area {
    display: flex;
    justify-content: center;
}

.title {
    font-size: 36rpx;
    color: #8f8f94;
}
.dianzan {
    position: fixed;
    bottom: 30rpx;
}

</style>`

以上js，css都是演示用的，正式用的时候，可以自定义

♥是用颜色代替的，正式使用的时候可以dianzan.js中修改成图片，效果更佳！