全局禁用vuetify组件上的涟漪效应

9avjhtql 于 6个月前发布在 Vue.js

关注(0)|答案(7)|浏览(86)

我在我的应用程序上使用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的所有 prop 。
我尝试过的所有解决方案都失败了。

vue.js

来源：https://stackoverflow.com/questions/57206378/disable-ripple-effect-on-vuetify-components-globally

7条答案

按热度按时间

bfhwhh0e1#

您可以在注册后全局修改Vue.js组件。
在这种情况下，您可以简单地这样做：

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

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

使用Vuetify 2.1.14进行测试

赞(0）回复(0）举报 6个月前

dgtucam12#

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

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

字符串

赞(0）回复(0）举报 6个月前

n6lpvg4x3#

根据Vuetify文档，您可以修改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

字符串

赞(0）回复(0）举报 6个月前

gk7wooem4#

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

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

字符串

赞(0）回复(0）举报 6个月前

mdfafbf15#

添加一个类到按钮并使用CSS..

<v-btn class="custom-btn">Button</v-btn>

.custom-btn:deep(.v-btn__overlay) {
   display: none;
}
.custom-btn:deep(.v-btn__underlay) {
   display: none;
}
.custom-btn:deep(.v-ripple__container) {
   display: none;
}

字符串

赞(0）回复(0）举报 6个月前

4c8rllxm6#

在Vuetify 3.3.22上，prop默认值接受组件键引用，以根据组件层次结构应用样式更改。更多信息请参阅文档
范例：

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'

export default createVuetify({
  defaults: {
    VBtn: {
      ripple: false,
    },
  },
})

字符串

赞(0）回复(0）举报 6个月前

uurv41yg7#

随着Vuetify 2.0的发布，你实际上可以通过修改你的vuetify.js文件来全局关闭ripple。

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

字符串

赞(0）回复(0）举报 6个月前

我来回答

全局禁用vuetify组件上的涟漪效应

7条答案

相关问题

热门标签

最新问答