全局禁用 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.

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

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 测试

Answer 2

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

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