feat(邀请BDLeader、BD、代理): 搜索对接防抖功能,并为防抖功能新增第一次立即执行功能
This commit is contained in:
parent
9575165640
commit
b93d12680d
@ -1,43 +1,57 @@
|
||||
import { getCurrentInstance, onUnmounted } from 'vue';
|
||||
import { getCurrentInstance, onUnmounted } from 'vue'
|
||||
|
||||
// 防抖
|
||||
export function useDebounce(fn, delay = 500) {
|
||||
let timer = null;
|
||||
let instance = getCurrentInstance(); // 获取当前组件实例
|
||||
export function useDebounce(fn, delay = 500, immediate = false) {
|
||||
let timer = null
|
||||
let instance = getCurrentInstance() // 获取当前组件实例
|
||||
|
||||
const debounced = (...args) => {
|
||||
if (timer) clearTimeout(timer);
|
||||
if (timer) clearTimeout(timer)
|
||||
|
||||
if (immediate && !timer) {
|
||||
// 立即执行
|
||||
fn.apply(this, args)
|
||||
}
|
||||
|
||||
timer = setTimeout(() => {
|
||||
fn(...args);
|
||||
}, delay);
|
||||
};
|
||||
if (!immediate) fn.apply(this, args)
|
||||
timer = null // 清理timer引用
|
||||
}, delay)
|
||||
}
|
||||
|
||||
// 取消防抖执行
|
||||
debounced.cancel = () => {
|
||||
clearTimeout(timer)
|
||||
timer = null
|
||||
}
|
||||
|
||||
// 立即执行
|
||||
debounced.flush = (...args) => {
|
||||
clearTimeout(timer)
|
||||
timer = null
|
||||
fn.apply(this, args)
|
||||
}
|
||||
|
||||
if (instance) {
|
||||
// 自动注册卸载钩子(仅组件内生效)
|
||||
onUnmounted(() => {
|
||||
clearTimeout(timer); // 清理定时器
|
||||
timer = null;
|
||||
});
|
||||
} else {
|
||||
// 非组件环境返回手动清理方法
|
||||
debounced.cancel = () => {
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
};
|
||||
debounced.cancel()
|
||||
})
|
||||
}
|
||||
|
||||
return debounced;
|
||||
return debounced
|
||||
}
|
||||
|
||||
// 节流
|
||||
export function useThrottle(fn, delay = 1000) {
|
||||
let lastCall = 0;
|
||||
let lastCall = 0
|
||||
|
||||
const throttled = (...args) => {
|
||||
const now = Date.now();
|
||||
if (now - lastCall < delay) return;
|
||||
lastCall = now;
|
||||
fn(...args);
|
||||
};
|
||||
const now = Date.now()
|
||||
if (now - lastCall < delay) return
|
||||
lastCall = now
|
||||
fn(...args)
|
||||
}
|
||||
|
||||
return throttled;
|
||||
return throttled
|
||||
}
|
||||
|
||||
@ -218,9 +218,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
import { showError, showSuccess } from '@/utils/toast.js'
|
||||
import { useDebounce } from '@/utils/useDebounce'
|
||||
|
||||
import { searchUser } from '@/api/userInfo'
|
||||
import {
|
||||
invitedList,
|
||||
@ -229,8 +232,8 @@ import {
|
||||
handleInvite,
|
||||
cancelInvite,
|
||||
} from '@/api/bdCenter.js'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
@ -278,19 +281,28 @@ const handleInputChange = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 回车搜索
|
||||
const handleEnterPress = async () => {
|
||||
console.log('搜索用户id:', searchQuery.value)
|
||||
searchResults.value = []
|
||||
selectedUser.value = {}
|
||||
disInvite.value = true
|
||||
if (searchQuery.value.trim()) {
|
||||
const resSearchUser = await searchUser(searchQuery.value)
|
||||
if (resSearchUser.status && resSearchUser.body) {
|
||||
let targetUserInfo = { userProfile: resSearchUser.body }
|
||||
searchResults.value.push(targetUserInfo)
|
||||
// 创建防抖版本的搜索函数
|
||||
const debouncedSearch = useDebounce(
|
||||
async () => {
|
||||
console.log('搜索用户id:', searchQuery.value)
|
||||
searchResults.value = []
|
||||
selectedUser.value = {}
|
||||
disInvite.value = true
|
||||
if (searchQuery.value.trim()) {
|
||||
const resSearchUser = await searchUser(searchQuery.value)
|
||||
if (resSearchUser.status && resSearchUser.body) {
|
||||
let targetUserInfo = { userProfile: resSearchUser.body }
|
||||
searchResults.value.push(targetUserInfo)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
500,
|
||||
true
|
||||
)
|
||||
|
||||
// 回车防抖搜索
|
||||
const handleEnterPress = async () => {
|
||||
debouncedSearch()
|
||||
}
|
||||
|
||||
// 选择用户
|
||||
|
||||
@ -217,17 +217,20 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
import { showError, showSuccess } from '@/utils/toast.js'
|
||||
import { useDebounce } from '@/utils/useDebounce'
|
||||
|
||||
import { searchUser } from '@/api/userInfo'
|
||||
import {
|
||||
invitedList, // 获取已邀请列表
|
||||
inviteToBeBD, // 邀请代理
|
||||
cancelInvite, // 处理邀请(取消邀请)
|
||||
} from '@/api/bdLeaderCenter.js'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
@ -275,19 +278,28 @@ const handleInputChange = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 回车搜索
|
||||
const handleEnterPress = async () => {
|
||||
console.log('搜索用户id:', searchQuery.value)
|
||||
searchResults.value = []
|
||||
selectedUser.value = {}
|
||||
disInvite.value = true
|
||||
if (searchQuery.value.trim()) {
|
||||
const resSearchUser = await searchUser(searchQuery.value)
|
||||
if (resSearchUser.status && resSearchUser.body) {
|
||||
let targetUserInfo = { userProfile: resSearchUser.body }
|
||||
searchResults.value.push(targetUserInfo)
|
||||
// 创建防抖版本的搜索函数
|
||||
const debouncedSearch = useDebounce(
|
||||
async () => {
|
||||
console.log('搜索用户id:', searchQuery.value)
|
||||
searchResults.value = []
|
||||
selectedUser.value = {}
|
||||
disInvite.value = true
|
||||
if (searchQuery.value.trim()) {
|
||||
const resSearchUser = await searchUser(searchQuery.value)
|
||||
if (resSearchUser.status && resSearchUser.body) {
|
||||
let targetUserInfo = { userProfile: resSearchUser.body }
|
||||
searchResults.value.push(targetUserInfo)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
500,
|
||||
true
|
||||
)
|
||||
|
||||
// 回车防抖搜索
|
||||
const handleEnterPress = async () => {
|
||||
debouncedSearch()
|
||||
}
|
||||
|
||||
// 选择用户
|
||||
|
||||
@ -221,6 +221,7 @@ import { computed, onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
import { showError, showSuccess } from '@/utils/toast.js'
|
||||
import { useDebounce } from '@/utils/useDebounce'
|
||||
|
||||
import { searchUser } from '@/api/userInfo'
|
||||
import {
|
||||
@ -277,19 +278,28 @@ const handleInputChange = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 回车搜索
|
||||
const handleEnterPress = async () => {
|
||||
console.log('搜索用户id:', searchQuery.value)
|
||||
searchResults.value = []
|
||||
selectedUser.value = {}
|
||||
disInvite.value = true
|
||||
if (searchQuery.value.trim()) {
|
||||
const resSearchUser = await searchUser(searchQuery.value)
|
||||
if (resSearchUser.status && resSearchUser.body) {
|
||||
let targetUserInfo = { userProfile: resSearchUser.body }
|
||||
searchResults.value.push(targetUserInfo)
|
||||
// 创建防抖版本的搜索函数
|
||||
const debouncedSearch = useDebounce(
|
||||
async () => {
|
||||
console.log('搜索用户id:', searchQuery.value)
|
||||
searchResults.value = []
|
||||
selectedUser.value = {}
|
||||
disInvite.value = true
|
||||
if (searchQuery.value.trim()) {
|
||||
const resSearchUser = await searchUser(searchQuery.value)
|
||||
if (resSearchUser.status && resSearchUser.body) {
|
||||
let targetUserInfo = { userProfile: resSearchUser.body }
|
||||
searchResults.value.push(targetUserInfo)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
500,
|
||||
true
|
||||
)
|
||||
|
||||
// 回车防抖搜索
|
||||
const handleEnterPress = async () => {
|
||||
debouncedSearch()
|
||||
}
|
||||
|
||||
// 选择用户
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user