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 { getHistoryItems, group, HistoryType, types } from './types'
function search(this: InstanceType<typeof ThisComponent>) {
this.reloadHistoryItems()
}
const ThisComponent = defineComponent({
components: {
VButton,
@ -155,12 +158,7 @@ const ThisComponent = defineComponent({
},
},
watch: {
search: lodash.debounce(
function search(this: InstanceType<typeof ThisComponent>) {
this.reloadHistoryItems()
} as unknown as () => void,
200,
),
search: lodash.debounce(search, 200) as unknown as () => void,
},
async created() {
try {

View File

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

View File

@ -71,6 +71,14 @@ interface WatchlaterCard {
upFaceUrl: string
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({
components: {
VLoading,
@ -165,15 +173,7 @@ const ThisComponent = defineComponent({
await this.toggleWatchlater(aid)
}
},
updateFilteredCards: lodash.debounce(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),
)
}, 100) as unknown as () => void,
updateFilteredCards: lodash.debounce(updateFilteredCards, 100) as unknown as () => void,
},
})
export default ThisComponent

View File

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