Vue компоненты обработки событий - PullRequest
Новая
       17

Vue компоненты обработки событий

0 голосов
/ 20 марта 2019

У меня есть кнопка компонента, где я использую эту кнопку почти везде на моем сайте.

Это кнопка SVG с анимацией при наведении курсора. Кнопка отлично работает. 

<template>	
	<a class="button"
		@mouseover="buttonEnter"
		@mouseout="buttonLeave">
		<svg viewBox="0 0 180 60">
			<path ref="btnPath" d="..." />
		</svg>
		<span ref="btnSpan">
			<slot>Button slot</slot>
		</span>
	</a>
</template>

<script>
import { buttonEnter, buttonleave } from '../assets/animate'

export default {
	name: 'AnimButton',
	methods: {
		buttonEnter(event) {
			buttonEnter(this.$refs.btnPath, this.$refs.btnSpan)
		},
		buttonLeave(event) {
			const buttonSpan = event.currentTarget.querySelector('span')
			buttonleave(this.$refs.btnPath, this.$refs.btnSpan)
		},
	},
}
</script>

Теперь я хочу использовать эту кнопку в качестве кнопки отправки в моей форме. События наведения происходят, но кажется, что событие @ click не запускается.

Вероятно, мне не хватает чего-то плохого. 

<form>
  <input type="email">
  <input type="subject">
  <input type="message">
  
  <anim-button type="submit" @click="submit">
			Submit
	</anim-button>

</form>

<script>
import AnimButton from '~/components/AnimButton.vue'

export default {
	components: {
		AnimButton,
	},
	methods: {
		submit: function() {
			console.log('submit')
		},
}
</script>

1 Ответ

1 голос
/ 20 марта 2019

Вы можете использовать @click.native, как предложено в комментарии ( см. Здесь ), или поместить @click в ваше AnimButton , $emit какое-то событие и перехватить это событие в родительском. компонент.

...