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> <template>
<a v-bind="$attrs" :target="newTab ? '_blank' : null" v-on="$listeners"> <a :target="newTab ? '_blank' : null">
<slot /> <slot />
</a> </a>
</template> </template>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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