Vuetify v-btn 如何删除后续插槽跨度标签

Question

我正在尝试删除 span 标签，它在 Vuetify 提供的 v-btn 组件中跟进，即 通过分析中的 HTML id 属性妨碍跟踪

下面使用来自 Vuetify

的 UI 组件 (v-btn) 提供的代码

<v-btn
   id="btn-home-sectionSix-partner"
   to="/about/partnership"
   class="ma-2 HomeLastBtn textBtn text-center"
   outlined
   style="text-align: -webkit-center;"
 >Become a partner
</v-btn>

在浏览器中呈现以下内容

<a data-v-fae5bece="" 
 href="/about/partnership" 
 class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
 id="btn-home-sectionSix-partner" 
 style="text-align: -webkit-center;"
>
 <span class="v-btn__content">
   Become a partner
 </span>
</a>

上面说了，我不要span标签里的文字，而是直接在a标签里

<a data-v-fae5bece="" 
 href="/about/partnership" 
 class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
 id="btn-home-sectionSix-partner" 
 style="text-align: -webkit-center;"
 >
  Become a partner
</a>

我参考了以下资源，但没有得到我想要的答案。

• Vuetify V-Btn API

也试过以下

<a data-v-fae5bece="" 
  href="/about/partnership" 
  class="ma-2 HomeLastBtn textBtn text-center v-btn v-btn--outlined v-btn--router theme--light v-size--default" 
  id="btn-home-sectionSix-partner" 
  style="text-align: -webkit-center;"
>
 <template v-slot:default>
   Try For Free Now
 </template>
</a>

但导致与上面相同的结果。

感谢并感谢我能得到的所有帮助。

Answer 1

V-Btn 组件有一个 genContent 函数实现，将在渲染根组件时调用它来生成子元素。默认情况下，它提供以下 implementation.

genContent (): VNode {
  return this.$createElement('span', {
    staticClass: 'v-btn__content',
  }, this.$slots.default)
}

如您所见，它创建了一个带有静态 class v-btn__content 的 span 元素。这就是文本在 span 标记中呈现的原因。

因此，要回答您的问题，您可能需要扩展 V-btn 组件并提供您自己的 genContent 函数实现。 official doc provides a sample example(codepen) 关于如何扩展组件和覆盖 genContent（复制在下面）

// src/components/ActivateBtn
import { VBtn } from 'vuetify/lib'

export default {
  extends: VBtn,

  methods: {
    // Here we overwrite the genContent method of VBtn
    // to override the default genContent method
    genContent() {
      return this.$createElement('div', {
        staticClass: 'v-btn__contents'
      }, [
        'Activate ',
        this.$slots.default
      ])
    }
  }
}