小编Man*_*alo的帖子

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

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

我试图找到一个选项来在整个应用程序中轻松禁用涟漪效应,但它不存在。

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

我以一个按钮组件为例。

<v-btn :ripple="false">My Button</v-btn>
Run Code Online (Sandbox Code Playgroud)

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

<my-button>My Button</my-button>
Run Code Online (Sandbox Code Playgroud)

我尝试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>
Run Code Online (Sandbox Code Playgroud)

我尝试这种方式来避免复制/粘贴v-btn.

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

vue.js vuejs2 vuetify.js

10
推荐指数
2
解决办法
1万
查看次数

标签 统计

vue.js ×1

vuejs2 ×1

vuetify.js ×1