Fix type errors when lodash.debounce used in vue component definition

This commit is contained in:
timongh 2023-02-09 19:52:02 +08:00
parent 99cb6c92c5
commit 4789110236
4 changed files with 26 additions and 25 deletions

View File

@ -124,6 +124,9 @@ import { popupProps, usePopup } from '../mixins'
import type { HistoryItem, TypeFilter } from './types' import type { HistoryItem, TypeFilter } from './types'
import { getHistoryItems, group, HistoryType, types } from './types' import { getHistoryItems, group, HistoryType, types } from './types'
function search(this: InstanceType<typeof ThisComponent>) {
this.reloadHistoryItems()
}
const ThisComponent = defineComponent({ const ThisComponent = defineComponent({
components: { components: {
VButton, VButton,
@ -155,12 +158,7 @@ const ThisComponent = defineComponent({
}, },
}, },
watch: { watch: {
search: lodash.debounce( search: lodash.debounce(search, 200) as unknown as () => void,
function search(this: InstanceType<typeof ThisComponent>) {
this.reloadHistoryItems()
} as unknown as () => void,
200,
),
}, },
async created() { async created() {
try { try {

View File

@ -81,6 +81,9 @@ import { VIcon, VLoading, VPopup, VSlider } from '@/ui'
import { CustomNavbarItem, CustomNavbarRenderedItems } from '../custom-navbar-item' import { CustomNavbarItem, CustomNavbarRenderedItems } from '../custom-navbar-item'
import { checkSequentialOrder, sortItems } from './orders' import { checkSequentialOrder, sortItems } from './orders'
function padding(this: InstanceType<typeof ThisComponent>, newValue: number) {
navbarOptions.padding = newValue
}
const { navbarOptions } = CustomNavbarItem const { navbarOptions } = CustomNavbarItem
const [rendered] = getData(CustomNavbarRenderedItems) as [ const [rendered] = getData(CustomNavbarRenderedItems) as [
{ {
@ -114,9 +117,7 @@ const ThisComponent = defineComponent({
} }
}, },
watch: { watch: {
padding: lodash.debounce((this: InstanceType<typeof ThisComponent>, newValue: number) => { padding: lodash.debounce(padding, 200) as unknown as (newValue: number) => void,
navbarOptions.padding = newValue
}, 200) as unknown as (newValue: number) => void,
}, },
async mounted() { async mounted() {
addComponentListener('customNavbar.padding', (newValue: number) => { addComponentListener('customNavbar.padding', (newValue: number) => {

View File

@ -71,6 +71,14 @@ interface WatchlaterCard {
upFaceUrl: string upFaceUrl: string
upID: number upID: number
} }
function updateFilteredCards(this: InstanceType<typeof ThisComponent>) {
const search = this.search.toLowerCase()
const cardsList = this.$el.querySelector('.watchlater-list-content') as HTMLElement
cardsList.scrollTo(0, 0)
this.filteredCards = (this.cards as WatchlaterCard[]).filter(
card => card.title.toLowerCase().includes(search) || card.upName.toLowerCase().includes(search),
)
}
const ThisComponent = defineComponent({ const ThisComponent = defineComponent({
components: { components: {
VLoading, VLoading,
@ -165,15 +173,7 @@ const ThisComponent = defineComponent({
await this.toggleWatchlater(aid) await this.toggleWatchlater(aid)
} }
}, },
updateFilteredCards: lodash.debounce(function updateFilteredCards(this: InstanceType<typeof ThisComponent>) { updateFilteredCards: lodash.debounce(updateFilteredCards, 100) as unknown as () => void,
const search = this.search.toLowerCase()
const cardsList = this.$el.querySelector('.watchlater-list-content') as HTMLElement
cardsList.scrollTo(0, 0)
this.filteredCards = (this.cards as WatchlaterCard[]).filter(
card =>
card.title.toLowerCase().includes(search) || card.upName.toLowerCase().includes(search),
)
}, 100) as unknown as () => void,
}, },
}) })
export default ThisComponent export default ThisComponent

View File

@ -91,8 +91,14 @@ import ComponentTags from './ComponentTags.vue'
import type { SearchBarActionContext } from './search-bar-actions' import type { SearchBarActionContext } from './search-bar-actions'
import { searchBarActions } from './search-bar-actions' import { searchBarActions } from './search-bar-actions'
function searchKeywordWatch(this: InstanceType<typeof ThisComponent>) {
// if (this.searchKeyword !== '') {
// this.componentTags?.reset()
// }
this.updateRenderedComponents()
}
const defaultSearchFilter = (items: ComponentMetadata[]) => items const defaultSearchFilter = (items: ComponentMetadata[]) => items
export default defineComponent({ const ThisComponent = defineComponent({
name: 'SettingsPanel', name: 'SettingsPanel',
components: { components: {
VIcon, VIcon,
@ -155,12 +161,7 @@ export default defineComponent({
}, },
}, },
watch: { watch: {
searchKeyword: lodash.debounce(function searchKeywordWatch() { searchKeyword: lodash.debounce(searchKeywordWatch, 200) as unknown as () => void,
// if (this.searchKeyword !== '') {
// this.componentTags?.reset()
// }
this.updateRenderedComponents()
}, 200),
searchFilter() { searchFilter() {
// if (this.searchFilter !== defaultSearchFilter) { // if (this.searchFilter !== defaultSearchFilter) {
this.searchKeyword = '' this.searchKeyword = ''
@ -272,6 +273,7 @@ export default defineComponent({
}, },
}, },
}) })
export default ThisComponent
</script> </script>
<style lang="scss"> <style lang="scss">