web-dev-qa-db-ja.com

Vuetifyコンポーネントに対するリップル効果をグローバルに無効化

アプリケーションで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のすべての小道具をコピー/貼り付けしないようにこの方法を試みます。

私が試したすべての解決策は失敗しました。

vue.jsvuejs2vuetify.js
8
Mantalo

登録後でも、Vue.jsコンポーネントをグローバルに変更できます。
この場合、これを行うことができます：

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

これは、たとえば_vuetify.js_ファイルのexport default new Vuetify (...)の前に追加できます。

-Vuetify 2.1.14でテスト済み

5
Philoozushi

Vuetifyのドキュメント によると、スタイラス変数を変更できます-したがって、これらを好みに応じて再定義することができます。それらを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
3
IVO GELOV

完全なコンテナを非表示に設定できます。

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