Событие запускается, когда нижний лист активен или скрыт - Vuetify

Question

Я использую Vuetify для создания своего SPA. При использовании компонента нижнего листа для моего приложения я наткнулся на ситуацию, когда я хочу запустить событие, когда нижний лист скрыт. Как запустить событие, когда нижний лист скрыт другим лучшим подходом?

Мой подход с использованием vue watch:

<v-bottom-sheet v-model="sheet">
          <v-sheet class="text-center" height="50vh" tile>

          </v-sheet>
        </v-bottom-sheet>



new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
        return {
            sheet: false,
        }
    },
    watch: {
        sheet: function () {
            if (this.sheet == false) {
               alert("Bottom sheet closed");
            }
        }
    }
})

Answer 1

Ваш подход верен, если вы видите источник v-bottom-sheet . Он расширяет события из V-диалога, вы можете использовать @input, @keydown или @click:outside

@input может работать для вас, но только нанимает, когда активен:

<v-bottom-sheet v-model="sheet" @input="onInput">
   <v-sheet class="text-center" height="50vh" tile>

   </v-sheet>
</v-bottom-sheet>



new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
        return {
            sheet: false,
        }
    },
    watch: {
        sheet: function () {
            if (this.sheet == false) {
               alert("Bottom sheet closed");
            }
        }
    },

    methods:{
      onInput(bol){
        console.log('v-model change to', bol)
      }
    }
})

Если вы хотите проверить, когда активен, а нет, часы - единственный подход.