Vue .native для событий, которые иногда необходимы, а иногда нет (в пределах одного компонента) - PullRequest
Новая
       28

Vue .native для событий, которые иногда необходимы, а иногда нет (в пределах одного компонента)

0 голосов
/ 14 февраля 2020

Я только что испытал то, чего не понимаю, с запущенным приложением vue. У меня есть кнопка, которая входит в состав нескольких родительских компонентов. Я просто добавил несколько списков событий для mouseover и mouseout.

. В одном случае мне нужно вызывать функцию с помощью .native, а когда компонент кнопки используется в другом родительском элементе, я должен оставить его в стороне. чтобы быть вызванным.

Ради полноты я оставляю здесь все из моего шаблона: 

<template>
  <component
    :is="computedType"
    ref="button"
    :class="[$options.name, { 'is-reversed': reversed, 'is-naked': naked, 'is-disabled': disabled, 'has-inverted-textcolor': invertedTextColor }]"
    :style="backgroundColor ? `background-color: ${backgroundColor}` : false"
    :disabled="disabled"
    :aria-disabled="disabled"
    :to="!external ? to : false"
    :aria-controls="ariaControls"
    :aria-expanded="ariaExpanded"
    :target="!target && external && mailto ? '_blank' : target"
    :type="computedType === 'button' ? buttonType : false"
    :rel="external ? 'noopener' : false"
    @click="click"
    @mouseover.native="triggerHover"
    @mouseout.native="releaseHover"
    @mouseover="triggerHover"
    @mouseout="releaseHover"
  >
    <slot />
  </component>
</template>

Вы можете видеть, что я теперь добавил @mouseover и @mouseover.native для покрытия оба случая.

Мне было бы действительно интересно, что вызывает здесь разницу. Честно говоря, я не полностью понимаю часть в vue документах .

Я также понял, что регистрирую разницу в том, как я могу получить доступ к свойствам стиля моей DOM элемент. Я дал ему ссылку: ref="button", и я обычно получал бы к ней доступ через:

this.$refs.button.style.backgroundColor Но в случае, когда мне нужно .native для вызова метода, мне также нужно $el для доступа the stlye propperty: this.$refs.button.$el.style.backgroundColor.

Теперь я не только не понимаю, что именно происходит, но у меня также есть проблема, что мой компонент кнопки потерпит неудачу в одном из двух случаев, потому что я не могу получить доступ к свойству стиля таким же образом.

Единственное различие в том, как я использую компонент, состоит в том, что в одном случае кнопка появляется в v-for -l oop. Все остальное точно так же. Это вызывает другое поведение?

Спасибо за некоторую справочную информацию об этом. Приветствия

Редактировать

Вот мои шаблоны родительских компонентов:

Здесь я должен использовать @mouseout без родного: 

<template>
  <div class="TwoColumnModule">
    <div class="TwoColumnModule__text">
      <BRichtext v-if="component.text" class="TwoColumnModule__richtext TwoColumnModule__BRichtext" :content="component.text" />
      <BBtn
        v-if="component.button_checkbox"
        class="TwoColumnModule__BBtn"
        :inverted-text-color="component.button_text_color"
        :background-color="component.button_color"
        :target="component.button_link.target"
        :to="checkLinkIfInternal(component.button_link.url) ? prepareNuxtLink(component.button_link.url) : component.button_link.url"
        :external="typeButton"
        :href="checkLinkIfInternal(component.button_link.url) ? false : component.button_link.url"
        :hover-color="component.button_color_hover"
      >
        {{ component.button_link.title }}
      </BBtn>
    </div>


    <!-- eslint-disable vue/no-v-html -->
    <div
      v-else
      class="TwoColumnModule__video"
      v-html="component.vimeo_video"
    />
  </div>
</template>

И здесь мне нужно .native, и я должен получить доступ к ссылке через this.$refs.button.$el: 

<template>
  <div class="Storyboard">

    <BHeading v-if="component.main_title" :level="3" class="Storyboard__heading Storyboard__BHeading">{{ component.main_title }}</BHeading>

    <div v-for="(item, index) in component.four_column_layout" :key="index" class="Storyboard__item--four-columns">

      <BRichtext v-if="item.text" class="Storyboard__richtext Storyboard__BRichtext" :content="item.text" />
      <BBtn
        v-if="item.button.button_checkbox"
        class="TwoColumnModule__BBtn"
        :inverted-text-color="item.button.button_text_color"
        :background-color="item.button.button_color"
        :target="item.button.button_link.target"
        :to="checkLinkIfInternal(item.button.button_link.url) ? prepareNuxtLink(item.button.button_link.url) : item.button.button_link.url"
        :external="checkIfTypeButton()"
        :href="checkLinkIfInternal(item.button.button_link.url) ? false : item.button.button_link.url"
        :hover-color="item.button.button_color_hover"
      >
        {{ item.button.button_link.title }}
      </BBtn>
    </div>

  </div>
</template>
...