sourcecode

스낵바 Vuetify - 시간 초과 후 메서드 재정의

copyscript 2022. 8. 16. 23:33
반응형

스낵바 Vuetify - 시간 초과 후 메서드 재정의

나는 당신에게 묻고 싶습니다 어떻게 내가 실행 방법을 정의할 수 있는지timeout그 후에?timeout실행하고 싶다$emit이벤트인데 어떻게 해야 할지...

<v-snackbar
  v-model="snackbar"
  :color="primary"
  :timeout="5000"
>
  {{ text }}
  <v-btn
    dark
    flat
    @click="snackbar = false"
  >
    Close
  </v-btn>
</v-snackbar>

https://vuetifyjs.com/en/components/snackbars

설명서에 따르면 해당 숙박업소에 이벤트는 없지만, 고객님의 사용 사례에 맞는 솔루션을 제공하겠습니다.timeout다음과 같이 데이터 객체에 속성을 지정합니다.

   data() {
         return {
          snackbar:false,
          timeout:6000,
          ....
         }
    }

이벤트 핸들러를 버튼에 이벤트핸들러를 추가합니다.

     <v-btn block
       color="primary" 
       dark
       @click="showSnackbar">
       Show Snackbar
    </v-btn>

메서드에서 추가showSnackbar방법

    methods: {
         showSnackbar() {
           this.snackbar=true;
           setTimeout(() => { this.$emit("yourEvent"); },this.timeout);
         }
       }

펜으로 당신의 사례를 시뮬레이션합니다.

감시자가 필요할 수도 있어요주의:snackbar === false그런 다음 기능을 실행합니다.

언급URL : https://stackoverflow.com/questions/53073055/snackbar-vuetify-override-method-after-timeout

반응형