vuetify 구성 요소에 대한 파급 효과 전역 사용 안 함

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.js 컴포넌트는 등록된 후에도 글로벌하게 수정할 수 있습니다.
이 경우는, 간단하게 다음과 같이 실행할 수 있습니다.

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

에 추가할 수 있습니다.vuetify.js에 제출하다export default new Vuetify (...)예를 들어.

- Vuetify 2.1.14로 테스트 완료

Vuetify 설명서에 따르면 Styleus 변수를 수정할 수 있습니다.이러한 변수를 다음과 같이 설정하여 사용자의 취향에 맞게 다시 정의할 수 있습니다.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 

전체 용기를 표시되지 않도록 설정할 수 있습니다.

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

main.js의 글로벌 mixin으로 리플 지시문 재정의

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

Vuetify 2.0의 릴리스에서는 글로벌하게 리플을 끌 수 있습니다.vuetify.js이렇게 파일링 합니다.

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

언급URL : https://stackoverflow.com/questions/57206378/disable-ripple-effect-on-vuetify-components-globally