Vue - 使用prop将类名添加到组件

Question

我想在Vue中使用以下道具制作自定义组件:

• text =要在链接中显示的文本.
• icon =链接旁边显示的图标的标识符.

<sidebar-link text ="Home"icon ="fa-home">

我有我的组件的以下.Vue模板.

<template>
    <div id="sidebarItem">  
        <a href="/index.php">
            <div id="sidebarIcon"><i :class="{fa : true}" aria-hidden="true"></i></div>
            <div id="sidebarText">{{ text }}</div>
        </a> 
    </div>
</template>

<script>
export default {
    props: ['text', 'icon'],
    data () {return {}}
}
</script>

基本上我在我的模板中有默认的Font-Awesome代码:

<i class="fa fa-home" aria-hidden="true"></i>

我希望通过使用它的prop来为我的组件添加一个类.

<sidebar-link text="Home" icon="fa-home"></sidebar-link>

谢谢.

Answer 1

因此,当您的属性icon持有该值时,home您可以使用一些类绑定,如下所示(感谢上帝js表达式在Vue.js中的属性中是允许的):

v-bind:class="[{'fa': true}, icon ? 'fa-' + icon : '']"

甚至更短

:class="[{'fa': true}, icon ? 'fa-' + icon : '']"

这将导致

class="fa fa-home"

Answer 2

如果要添加fa-home到您的 您可以将其传递给父组件，例如：

<sidebar-link text="Home" :icon="'fa-home'"></sidebar-link>

你可以通过其他的图标，如fa-plus，fa-blutooth....代替

并在您的组件内部将其用作：

<div id="sidebarIcon">
   <i class='fa' :class="icon" aria-hidden="true"></i>
</div>

tbh：对我来说有点道理，为什么你需要保持 fa

您仍然需要道具，''但默认值为

icon: {
  type: String,
  required: false,
  default: ''
}