提交

pages/component/commonComponents/comment-like-popup.vue

@@ -0,0 +1,92 @@
+<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>
+