Remove $listeners and the redundant v-bind="$attrs"

This commit is contained in:
timongh 2023-02-07 00:47:26 +08:00
parent 74267e5531
commit 7a91728e29
14 changed files with 38 additions and 52 deletions

View File

@ -1,5 +1,5 @@
<template>
<a v-bind="$attrs" :target="newTab ? '_blank' : null" v-on="$listeners">
<a :target="newTab ? '_blank' : null">
<slot />
</a>
</template>

View File

@ -11,6 +11,7 @@ export default defineComponent({
components: {
VideoCard,
},
inheritAttrs: false,
})
</script>
<style lang="scss">

View File

@ -13,7 +13,7 @@
<template v-else class="status">
<div class="status-dot disconnected" />
<div class="status-text">未连接</div>
<AsyncButton title="连接" @click="connect">
<AsyncButton title="连接" wait-on-click="connect">
<VIcon icon="mdi-play" :size="14" />
连接
</AsyncButton>

View File

@ -1,14 +1,10 @@
<template>
<VButton
v-bind="$attrs"
:disabled="disabled || internalDisabled"
v-on="listeners"
@click="onClick"
>
<VButton :disabled="disabled || isWaitingClickEnd" @click="onClick">
<slot>Button</slot>
</VButton>
</template>
<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent } from 'vue'
import VButton from './VButton.vue'
@ -21,26 +17,22 @@ export default defineComponent({
type: Boolean,
default: false,
},
waitOnClick: {
type: Function as PropType<() => Promise<void>>,
default: undefined,
},
},
data() {
return {
internalDisabled: false,
isWaitingClickEnd: false,
}
},
computed: {
// eslint-disable-next-line @typescript-eslint/ban-types
listeners(): Record<string, Function | Function[]> {
return lodash.omit(this.$listeners, 'click')
},
onClick(): (...args: unknown[]) => Promise<void> {
return async (...args: unknown[]) => {
try {
this.internalDisabled = true
await this.$listeners.click?.(...args)
} finally {
this.internalDisabled = false
}
}
methods: {
onClick(): void {
this.isWaitingClickEnd = true
this.waitOnClick().finally(() => {
this.isWaitingClickEnd = false
})
},
},
})

View File

@ -5,7 +5,6 @@
role="checkbox"
:aria-checked="checked"
type="transparent"
v-bind="$attrs"
@click="$emit('update:checked', !checked)"
>
<div class="text-container">

View File

@ -1,5 +1,5 @@
<template>
<VButton class="default-widget" v-bind="$attrs" v-on="$listeners">
<VButton class="default-widget">
<div class="widget-icon">
<slot name="icon">
<VIcon :type="iconType" :icon="icon"></VIcon>

View File

@ -1,6 +1,5 @@
<template>
<img
v-bind="$attrs"
:width="width"
:height="height"
:srcset="srcset"

View File

@ -2,7 +2,6 @@
<CheckBox
class="be-radio-button"
role="radio"
v-bind="$attrs"
:checked="checked"
:checked-icon="checkedIcon"
:not-checked-icon="notCheckedIcon"

View File

@ -3,9 +3,8 @@
<textarea
ref="input"
type="text"
v-bind="$attrs"
v-bind="restattrs"
:value="text"
v-on="restListeners"
@change.stop="change"
@input.stop="input"
@compositionstart="compositionStart"

View File

@ -3,9 +3,8 @@
<input
ref="input"
type="text"
v-bind="$attrs"
v-bind="restAttrs"
:value="text"
v-on="restListeners"
@change.stop="change"
@input.stop="input"
@compositionstart="compositionStart"

View File

@ -5,9 +5,9 @@
:aria-disabled="disabled"
:tabindex="disabled ? -1 : 0"
:class="{ [type]: true, disabled, round, icon }"
v-on="disabled ? null : $listeners"
@keydown.enter.prevent="$listeners.click && $listeners.click($event)"
@keydown.space.prevent="$listeners.click && $listeners.click($event)"
v-bind="attrs"
@keydown.enter.prevent="$emit('click')"
@keydown.space.prevent="$emit('click')"
>
<div class="content-container">
<slot>Button</slot>
@ -20,6 +20,7 @@ import { defineComponent } from 'vue'
export default defineComponent({
name: 'VButton',
inheritAttrs: false,
props: {
type: {
type: String,
@ -34,7 +35,13 @@ export default defineComponent({
default: false,
},
},
emits: ['click'],
computed: {
attrs(): Record<string, unknown> {
return this.disabled
? lodash.omitBy(this.$attrs, (value, key) => key.startsWith('on'))
: this.$attrs
},
disabled(): boolean {
return Boolean(this.$attrs.disabled)
},

View File

@ -1,9 +1,5 @@
<template>
<div
class="be-popup"
:class="{ open, fixed, close: !open, 'closed-style': closedStyle }"
v-on="$listeners"
>
<div class="be-popup" :class="{ open, fixed, close: !open, 'closed-style': closedStyle }">
<slot v-if="loaded"></slot>
</div>
</template>

View File

@ -1,11 +1,5 @@
<template>
<i
class="be-icon"
:class="classes"
:style="{ '--size': size + 'px' }"
v-bind="$attrs"
v-on="$listeners"
>
<i class="be-icon" :class="classes" :style="{ '--size': size + 'px' }">
<slot></slot>
<div
v-if="icon in $options.static.customIcons"

View File

@ -2,6 +2,7 @@ import { defineComponent } from 'vue'
import type { PropType } from 'vue'
export const textControlMixin = defineComponent({
inheritAttrs: false,
props: {
text: {
type: String,
@ -22,12 +23,12 @@ export const textControlMixin = defineComponent({
data() {
return {
composing: false,
restListeners: lodash.omit(
this.$listeners,
'change',
'input',
'compositionstart',
'compositionend',
restAttrs: lodash.omit(
this.$attrs,
'onChange',
'onInput',
'onCompositionstart',
'onCompositionend',
),
}
},