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

根据Vuetify documentation，您可以修改Stylus变量-因此您可以尝试根据自己的喜好重新定义这些变量，例如通过将它们设置为none：

$ripple-animation-transition-in := transform .25s $transition.fast-out-slow-in, opacity .1s $transition.fast-out-slow-in
$ripple-animation-transition-out := opacity .3s $transition.fast-out-slow-in
$ripple-animation-visible-opacity := .15

Answer 2

在main.js中使用全局mixin覆盖涟漪指令

let overrideRipple = {
 directives:{
   ripple:{
     inserted: ()=> {
      console.log("Ripple overrided")
     }
   }
 }
}
Vue.mixin(overrideRipple);

Answer 3

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

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

Answer 4

即使已注册Vue.js组件，也可以对其进行全局修改。
在这种情况下，您只需执行以下操作：

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

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

-使用Vuetify 2.1.14进行测试

Answer 5

随着Vuetify 2.0的发布，您实际上可以像这样修改vuetify.js文件来全局关闭波纹。

export default new Vuetify({
  global: {
    ripples: false
  },
  icons: {
    iconfont: 'mdi',
  },
});

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

5 个答案: