mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Remove $listeners and the redundant v-bind="$attrs"
This commit is contained in:
parent
74267e5531
commit
7a91728e29
@ -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>
|
||||||
|
|||||||
@ -11,6 +11,7 @@ export default defineComponent({
|
|||||||
components: {
|
components: {
|
||||||
VideoCard,
|
VideoCard,
|
||||||
},
|
},
|
||||||
|
inheritAttrs: false,
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<img
|
<img
|
||||||
v-bind="$attrs"
|
|
||||||
:width="width"
|
:width="width"
|
||||||
:height="height"
|
:height="height"
|
||||||
:srcset="srcset"
|
:srcset="srcset"
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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)
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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',
|
||||||
),
|
),
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user