Vue поддерживает «валидацию» в компоненте «BaseButton» оболочки, который проверяет $ attrs родителя - PullRequest
Новая
       23

Vue поддерживает «валидацию» в компоненте «BaseButton» оболочки, который проверяет $ attrs родителя

0 голосов
/ 31 января 2020

У меня есть компонент-обертка BaseButton, который используется во всем приложении. Я хочу добавить gaLabel реквизит с валидатором или каким-либо другим способом валидации, который учитывает $attrs родителя для меток aria. Это должно в основном требоваться, если на родительском компоненте нет метки aria. Вот пример компонента оболочки BaseButton: 

<template>
    <button
        :class="{ 'focus:highlight': !noFocusHighlight }"
        v-bind="$attrs"
        :type="type"
        class="input-transition"
        v-on="$listeners"
    >
        <slot/>
    </button>
</template>

<script>
export default {
    name: 'BaseButton',
    inheritAttrs: false,
    props: {
        noFocusHighlight: {
            type: Boolean,
            default: false,
        },
        gaLabel: {
            validator: prop => <SOME VALIDATION HERE>,
        },
        type: {
            type: String,
            validator: value => ['button', 'submit', 'reset'].includes(value),
            default: 'button',
        },
    },
};
</script>

Я знаю, что у меня нет доступа к this внутри валидатора реквизита, и поэтому у меня нет доступа к $attrs, но кто-нибудь видит способ, которым я могу сохранить этот компонент как есть, но есть ли в gaLabel реквизит $ attrs родителя для существования метки aria?

Многие применения этого компонента имеют метку арии, но не все, и это не обязательно для всех. В конечном итоге gaLabel и метка aria говорят одно и то же для разных целей, поэтому я теоретически мог бы разрешить метку aria по умолчанию для gaLabel и в противном случае потребовать gaLabel. Я хотел бы извлечь эту логику c для этого компонента, чтобы, если бы кто-то использовал ее и установил метку арии, им не нужно было бы учитывать опору gaLabel.

...