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

Posted 2023-02-23

【中文标题】使用 Vue.js 创建可重用的按钮组件

【英文标题】：Create Reusable Button Component with Vue.js

【发布时间】：2019-03-24 20:33:45

【问题描述】：

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

按钮是一个链接，带有一个svg path和一个span。我还有按钮动画，它在 mouse over 和 mouse out 事件 上触发。

这是我的按钮代码。

<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

【参考方案1】：

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

您在代码中唯一需要做的就是使用name key 命名组件。例如，让我们调用我们的可重用组件自定义按钮：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 我们想要注册一个新组件以在标记中使用。使用您希望在特定页面上使用的组件对象添加 components 键。

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>

【参考方案2】：

只需将index.vue 中的内容放在components 文件夹下名为custombtn.vue 的新文件中，您的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'

检查这个sandbox