全局禁用对 vuetify 组件的连锁反应

Question

我在我的应用程序中使用 vuetify 。设计团队创建了一个平面设计，我想更改 vuetify 的主题以匹配模型

我试图找到一个选项来轻松禁用整个应用程序的连锁反应，但它不存在。

我尝试创建一个组件扩展以避免在我使用的每个组件上重复 :ripple="false" 。

我将以按钮组件为例。

 <v-btn :ripple="false">My Button</v-btn>

我的应用程序上的每个按钮都需要有 ripple=false 我的目标是创建这样的组件

<my-button>My Button</my-button>

我尝试像这样在另一个组件中扩展 v-btn 。

 <template>
    <v-btn v-bind="options" :ripple="false"></v-btn>
</template>

<script>
  import { VBtn } from 'vuetify';

  export default {
  name: 'MyButton',
  extend: VBtn,
  computed: {
    options() {
      return this.props;
    },
  },

};

</script>

<style scoped>

我尝试这种方式来避免复制/粘贴 v-btn 的所有道具。

我尝试过的所有解决方案都失败了。

原文由 Mantalo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

即使在注册后，您也可以全局修改 Vue.js 组件。

在这种情况下，您可以简单地这样做：

 const VBtn = Vue.component('VBtn')
VBtn.options.props.ripple.default = false

例如，您可以在 vuetify.js 文件中将其添加到 export default new Vuetify (...) 之前。

- 使用 Vuetify 2.1.14 测试

原文由 Philoozushi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以将整个容器设置为不可见。

 .v-ripple__container {
    display:none !important;
}

原文由 Peter 发布，翻译遵循 CC BY-SA 4.0 许可协议