扩展 Vuetify 的 VBtn 组件以创建可重用的图标按钮组件

Question

我一直在使用示例 Codepen (https://codepen.io/whoistobias/pen/yLNgjwy) 来尝试扩展 Vuetify VBtn 组件以创建可重用的按钮图标组件。

我非常接近，但像往常一样我在最后一个障碍上绊倒了。

主要代码是这样的：

const VBtn = Vue.options.components["VBtn"];
const VIcon = Vue.options.components["VIcon"];

const ButtonIcon = {
  name: 'ButtonIcon',
  
  extends: VBtn,

  props: {
    icon: {
      default: true,
      type: Boolean
    },
    iconColor: {
      default: 'info',
      type: String
    },
    iconName: {
      default: 'help',
      type: String
    },
    outline: {
      default: true,
      type: Boolean
    }
  },

  methods: {
    genContent () {
      return this.$createElement('div', {
        class: 'v-btn__content'
      }, this.$slots.default || [this.$createElement(
        VIcon,
        {
          props: {
            color: this.iconColor
          }
        },
        this.iconName
      )])
    }
  }
};

不太正确的地方是 this.iconName 插入 VIcon 的位置。当 prop iconName 的值为 add.

时，它的输出是 "add" 而不是 add

我已尽力尝试在 Vue 文档中消化有关使用 createElement 的帮助文档的内容 - https://v2.vuejs.org/v2/guide/render-function.html?redirect=true#createElement-Arguments

这是我的工作代码的分支 Codepen：https://codepen.io/scp-nm/pen/PoQPVEP

如有任何帮助，我们将不胜感激。

Answer 1

问题是您的图标名称不正确。默认图标名称以 mdi- 为前缀。您可以从 https://materialdesignicons.com/.

查看可用图标列表

我假设 mdi-plus 是“添加”的好图标，mdi-help-circle-outline 是“帮助”的好图标：

                                               
<ButtonIcon icon-color="success" icon-name="mdi-plus" title="Icon Button (custom prop values)" />

const ButtonIcon = {
  ⋮
  props: {
    iconName: {   
      default: 'mdi-help-circle-outline',
      type: String
    },
  },
}

demo

扩展 Vuetify 的 VBtn 组件以创建可重用的图标按钮组件

Extending Vuetify's VBtn component to create a reusable icon button component

javascript

extend

vue.js

vuetify.js