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

我正在进行一个

numxt.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.js中非常简单

代码中唯一需要的就是使用。例如，让我们调用可重用组件自定义按钮：

name:'custom button'

自定义按钮.vue

从“~/assets/animate”导入{buttonEnter}
从“~/assets/animate”导入{buttonleave}
导出默认值{
名称：“自定义按钮”，
方法：{
按钮输入（事件）{
const buttonPath=event.currentTarget.querySelector（'path'））
const buttonSpan=event.currentTarget.querySelector（'span'）
按钮输入（按钮路径、按钮扫描）
},
按钮leave（事件）{
const buttonPath=event.currentTarget.querySelector（'path'））
const buttonSpan=event.currentTarget.querySelector（'span'）
按钮页（按钮页，按钮页）
},
},
}

现在唯一需要做的就是将文件导入到要使用它的页面中。由于我们已经将其作为默认值导出，因此可以使用

import

简单地导入它。最后但并非最不重要的一点是，我们需要告诉Vue，我们希望注册一个新组件，以便在标记中使用。添加一个组件键，其中包含您希望在特定页面上使用的组件对象

关于.vue

关于我们
从“./pathToCustomButton.vue”导入自定义按钮
导出默认值{
姓名：'关于'，
组件：{customButton}
}

只需将

index.vue

中的内容放在名为

custombtn.vue

的新文件

components

文件夹下，您的

index.vue

应该如下所示：

测试基站
完成了！
从“~/components/custombtn.vue”导入custombtn
导出默认值{
组成部分：{
客户电话
}
}

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
  });
}