Question

我有一个Nuxt.js项目，正在使用自定义按钮。

该按钮是一个链接，带有 svg 路径和跨度。我还为按钮制作了动画，它在鼠标移过和鼠标移出事件上触发。

这是我的按钮代码。

<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

创建component是您的追求。幸运的是，这在Vue.js中非常简单。

代码中唯一需要做的就是用name key命名组件。例如，我们将可重用组件的自定义按钮称为：name: '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>

Answer 2

只需将您在operator^(nullptr, prev->both); nullptr ^ prev->both;中拥有的内容放在名为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

选中此sandbox

使用Vue.js创建可重复使用的按钮组件

2 个答案: