92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<view class="tool uni-row uni-center" ref="commentElement">
|
|
<view class="zan uni-row uni-center" @click="dianzan">
|
|
<uni-icons type="heart" color="#fff"></uni-icons>
|
|
<text class="color-white font-14">赞</text>
|
|
</view>
|
|
<view class="comment uni-row uni-center" @click="pinglun">
|
|
<uni-icons type="chat" color="#fff"></uni-icons>
|
|
<text class="color-white font-14">评论</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'commentPopup',
|
|
data() {
|
|
return {
|
|
commentToolStatus: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
// 监听显示点赞/评论浮窗事件
|
|
uni.$on('showCommentPopup', this.showCommentPopup);
|
|
},
|
|
beforeDestroy() {
|
|
// 组件销毁时注销事件监听，防止内存泄漏
|
|
uni.$off('showCommentPopup', this.showCommentPopup);
|
|
},
|
|
methods: {
|
|
dianzan() {
|
|
this.hideCommentPopup();
|
|
uni.showToast({ title: "点赞", icon: "none" });
|
|
},
|
|
pinglun(e) {
|
|
this.hideCommentPopup();
|
|
// e.y 可能在 Vue 2 中无法直接获得，可以自己传递参数或用其他方式
|
|
// 这里假设你发射事件时传入的是 y 坐标
|
|
uni.$emit('commentScrollEvent', e && e.y ? e.y : 0);
|
|
uni.showToast({ title: "评论", icon: "none" });
|
|
},
|
|
showCommentPopup(y) {
|
|
if (!this.commentToolStatus) {
|
|
const element = this.$refs.commentElement;
|
|
if (element && element.style) {
|
|
element.style.top = y + 'px';
|
|
element.style.width = '160px';
|
|
element.style.opacity = '1';
|
|
}
|
|
this.commentToolStatus = true;
|
|
} else {
|
|
this.hideCommentPopup();
|
|
}
|
|
},
|
|
hideCommentPopup() {
|
|
if (!this.commentToolStatus) return;
|
|
const element = this.$refs.commentElement;
|
|
if (element && element.style) {
|
|
element.style.width = '0px';
|
|
element.style.opacity = '0';
|
|
}
|
|
this.commentToolStatus = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tool {
|
|
position: absolute;
|
|
right: 60px;
|
|
z-index: 999;
|
|
|
|
width: 0;
|
|
height: 35px;
|
|
background-color: #666;
|
|
border-radius: 3px;
|
|
opacity: 0;
|
|
transition-property: width, opacity;
|
|
transition-duration: 100ms;
|
|
|
|
.comment,
|
|
.zan {
|
|
width: 80px;
|
|
}
|
|
|
|
.zan {
|
|
border-right: 0.5px solid #555;
|
|
}
|
|
}
|
|
</style>
|
|
|