Создайте повторно используемый компонент кнопки с Vue.js

Question

У меня есть проект Nuxt.js, где я использую пользовательскую кнопку.

Кнопка представляет собой ссылку с svg путь и span .У меня также есть анимация для кнопки, где она срабатывает на мыши над и событие мыши .

вот мой код кнопки.

<template>  
        <a class="button green" href="/"
            @mouseover="buttonEnter"
            @mouseout="buttonLeave">
            <svg viewBox="0 0 180 60">
                <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"/>
            </svg>
            <span>Go Home</span>
        </a>
</template>


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

export default {
    methods: {
        buttonEnter(event) {
            const buttonPath = event.currentTarget.querySelector('path')
            const buttonSpan = event.currentTarget.querySelector('span')
            buttonEnter(buttonPath, buttonSpan)
        },
        buttonLeave(event) {
            const buttonPath = event.currentTarget.querySelector('path')
            const buttonSpan = event.currentTarget.querySelector('span')
            buttonleave(buttonPath, buttonSpan)
        },
    },
}
</script>

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

здесь также есть функции buttonEnter и buttonleave для анимации.

import anime from "animejs";

export function buttonEnter(buttonPath, buttonSpan) {
  anime.remove([buttonPath, buttonSpan]);
  anime({
    targets: buttonPath,
    d:
      "M10,10 C10,10 50,7 90,7 C130,7 170,10 170,10 C170,10 172,20 172,30 C172,40 170,50 170,50 C170,50 130,53 90,53 C50,53 10,50 10,50 C10,50 8,40 8,30 C8,20 10,10 10,10 Z",
    elasticity: 700,
    offset: 0
  });
  anime({
    targets: buttonSpan,
    scale: 1.15,
    duration: 800,
    offset: 0
  });
}

export function buttonleave(buttonPath, buttonSpan) {
  anime.remove([buttonPath, buttonSpan]);
  anime({
    targets: buttonPath,
    d:
      "M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z",
    elasticity: 700,
    offset: 0
  });
  anime({
    targets: buttonSpan,
    scale: 1,
    duration: 800,
    offset: 0
  });
}

вот демо кнопки codesandbox

Answer 1

Просто поместите содержимое, которое у вас есть в index.vue, в новый файл с именем custombtn.vue в папке components, и ваш index.vue должен выглядеть следующим образом:

<template>	
  <div>
    test btn
    <custombtn />
    it done ! 
  </div>
</template>


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

  export default {
    components: {
      custombtn
    }
  }
</script>

в custombtn.vue Вы можете импортировать buttonEnter, buttonleave следующим образом:

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

проверить эту песочницу

Answer 2

Создание компонента - это то, что вам нужно.К счастью, это очень просто сделать в Vue.js.

Единственное, что вам нужно в вашем коде - это присвоить компоненту имя имя ключа .Для примера давайте назовем нашу настраиваемую кнопку многоразового использования: name: 'custom-button'

custom-button.vue

<template>
        <a class="button green" href="/"
            @mouseover="buttonEnter"
            @mouseout="buttonLeave">
            <svg viewBox="0 0 180 60">
                <path d="M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10 C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983 90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20 10,10 10,10 Z"/>
            </svg>
            <span>Go Home</span>
        </a>
</template>


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

export default {
    name: 'custom-button',
    methods: {
        buttonEnter(event) {
            const buttonPath = event.currentTarget.querySelector('path')
            const buttonSpan = event.currentTarget.querySelector('span')
            buttonEnter(buttonPath, buttonSpan)
        },
        buttonLeave(event) {
            const buttonPath = event.currentTarget.querySelector('path')
            const buttonSpan = event.currentTarget.querySelector('span')
            buttonleave(buttonPath, buttonSpan)
        },
    },
}
</script>

Единственное, что вам нужно сделать сейчасэто импортировать файл на странице (страницах), которую вы хотите использовать.Поскольку мы уже экспортировали его по умолчанию, мы можем просто импортировать его, используя import.И последнее, но не менее важное: нам нужно сообщить Vue, что мы хотим зарегистрировать новый компонент, который будет использоваться в разметке.Добавьте ключ компонентов с объектом компонентов, который вы хотите использовать на конкретной странице.

about.vue

<template>
  <div class="container">
    <div>
      <h1>About us</h1>
      <custom-button></custom-button>
    </div>
  </div>
</template>

<script>
import customButton from './pathToCustomButton.vue'
export default {
    name: 'about',
    components: { customButton }
}
</script>