sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改下拉框显示逻辑

master
于肖磊 2026-02-12 09:55:15 +08:00
parent b882f62bb5
commit da373bc72e
2 changed files with 75 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
pages/plugins/video/components/comment-info.vue
View File

@ -54,11 +54,15 @@
propReplyContent: {
type: String,
default: '回复'
},
// 新增props：控制下拉菜单显示状态
propDropDownVisible: {
type: Boolean,
default: false
}
},
data() {
return {
drop_down_visible: false,
// 下拉菜单选项数据
dropdownOptions: [
{ label: '删除', type: 'delete' },
@ -66,6 +70,12 @@
]
};
},
computed: {
// 使用computed属性映射props状态
drop_down_visible() {
return this.propDropDownVisible;
}
},
methods: {
// 回复
comment_reply(e) {
@ -84,41 +94,21 @@
},
// 切换下拉菜单
toggle_dropdown() {
this.drop_down_visible = !this.drop_down_visible;
// 管理全局点击监听器
if (this.drop_down_visible) {
// 延时添加，确保元素已渲染
setTimeout(() => {
uni.$on('global-click', this.handle_global_click);
}, 100);
} else {
uni.$off('global-click', this.handle_global_click);
}
},
// 处理全局点击
handle_global_click() {
if (this.drop_down_visible) {
this.drop_down_visible = false;
uni.$off('global-click', this.handle_global_click);
}
// 通知父组件切换当前组件的下拉菜单状态
this.$emit('toggle-dropdown', this.propId);
},
// 处理下拉菜单项点击
handle_dropdown_item_click(e) {
const item = e.currentTarget.dataset.value || {};
console.log('点击:', item.label);
uni.showToast({ title: item.label, icon: 'none' });
this.drop_down_visible = false;
uni.$off('global-click', this.handle_global_click);
// 通知父组件关闭下拉菜单
this.$emit('close-dropdown', this.propId);
this.$emit('dropdown-item-click', { command: item.command, label: item.label });
}
},
mounted() {
console.log('CommentInfo 组件已挂载');
},
beforeDestroy() {
// 组件销毁前移除全局监听器
uni.$off('global-click', this.handle_global_click);
}
}
</script>

61
pages/plugins/video/detail/detail.vue
View File

@ -97,12 +97,12 @@
<scroll-view class="comment-list" scroll-y show-scrollbar="false" @scrolltolower="handle_comment_to_lower_scroll" @scroll="handle_comment_scroll">
<view class="comment-scroll">
<view class="comment-item flex-col" v-for="(comment_item, index) in active_comments" :key="index">
<commentInfoComponent class="wh-auto ht-auto" :propComment="comment_item" :propId="comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like"></commentInfoComponent>
<commentInfoComponent class="wh-auto ht-auto" :propComment="comment_item" :propId="comment_item.id" :propDropDownVisible="active_dropdown_id === comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like" @toggle-dropdown="handle_toggle_dropdown" @close-dropdown="handle_close_dropdown"></commentInfoComponent>
<!-- 子评论 -->
<view class="sub-comment flex-col jc-c gap-10 mt-10">
<view v-if="comment_item.sub_comments && comment_item.sub_comments.length > 0 && comment_item.show_sub_comment" class="sub-comment-list flex-col jc-c">
<view class="sub-comment-item flex-row align-s gap-10" v-for="(sub_comment_item, sub_comment_index) in comment_item.sub_comments" :key="sub_comment_index">
<commentInfoComponent class="wh-auto ht-auto" :propComment="sub_comment_item" :propId="sub_comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like"></commentInfoComponent>
<commentInfoComponent class="wh-auto ht-auto" :propComment="sub_comment_item" :propId="sub_comment_item.id" :propDropDownVisible="active_dropdown_id === sub_comment_item.id" @comment_reply="comment_reply" @comment_like="comment_like" @toggle-dropdown="handle_toggle_dropdown" @close-dropdown="handle_close_dropdown"></commentInfoComponent>
</view>
</view>
<template v-if="comment_item.comments_count > 0">
@ -237,6 +237,8 @@
},
video_switch_debounce_timer: null, // 视频切换防抖定时器
video_cleanup_timer: null, // 视频清理定时器
// 添加下拉菜单状态管理
active_dropdown_id: null, // 当前显示下拉菜单的评论ID
}
},
computed: {
@ -1218,7 +1220,62 @@
console.error('清理视频资源时出错:', error);
}
},
// 新增方法：处理下拉菜单切换
handle_toggle_dropdown(comment_id) {
// 如果点击的是同一个组件，则切换状态；否则关闭其他组件并打开当前组件
if (this.active_dropdown_id === comment_id) {
this.active_dropdown_id = null;
} else {
this.active_dropdown_id = comment_id;
}
},
// 新增方法：关闭下拉菜单
handle_close_dropdown(comment_id) {
if (this.active_dropdown_id === comment_id) {
this.active_dropdown_id = null;
}
},
// 新增方法：处理全局点击事件
handle_global_click(e) {
// 检查点击目标是否在下拉菜单相关元素内
const target = e.target || e.srcElement;
// 查找点击元素是否在comment-option或dropdown-menu内
let isInDropdown = false;
let currentElement = target;
while (currentElement && currentElement !== document) {
// 检查是否点击了下拉菜单触发器或菜单本身
if (currentElement.classList &&
(currentElement.classList.contains('comment-option') ||
currentElement.classList.contains('dropdown-menu') ||
currentElement.closest('.comment-option') ||
currentElement.closest('.dropdown-menu'))) {
isInDropdown = true;
break;
}
currentElement = currentElement.parentNode;
}
// 如果点击的不是下拉菜单相关元素，则关闭所有下拉菜单
if (!isInDropdown && this.active_dropdown_id !== null) {
this.active_dropdown_id = null;
}
},
},
mounted() {
// 添加全局点击事件监听
document.addEventListener('click', this.handle_global_click);
// 添加触摸事件监听（移动端兼容）
document.addEventListener('touchstart', this.handle_global_click);
},
beforeDestroy() {
// 移除全局事件监听器
document.removeEventListener('click', this.handle_global_click);
document.removeEventListener('touchstart', this.handle_global_click);
}
};
</script>