时间戳

首页 > 解决方案 > 我怎么知道何时显示对话框

javascript - 我怎么知道何时显示对话框

问题描述

我正在用 vue + Vuetify 制作电子应用程序。使用对话框，可以制作模态，但要在对话框中显示后修改一些div。

使用$refs，在打开对话框之前找不到。我想在对话框像绑定事件一样打开时触发一些事件show.bs.modal作为引导程序。对话框显示时有什么方法可以触发吗？

我可以使用 Update with$nextTick但它不是一个好的解决方案，也可以触发其他值已更新。

<v-dialog ref="alarmModal"> <-- okay
  <v-card-text ref="alarmModalPrices" style="height:300px"> <-- undefinded in methods or mounted
  </v-card>
</v-dialog>

<script>
export default {
mounted(){
  this.$refs.alarmModal.show = function () {  //<-- okay

   }
  this.$refs.alarmModalPrices.show = function () {  //<-- error

   }
},
updated () {
    this.$nextTick(function () {
      this.$refs.tempAlarmPrices.scrollTop = 50 // <-- okay, but also triggered when other values updated
    })
  }

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

我还使用 Eventbus 来触发事件。仍然不明白让事件触发并访问其 DOM

<v-dialog ref="alarmModal" easer>
  <v-card-text ref="alarmModalPrices" style="height:300px">
  </v-card>
</v-dialog>
<script>
import { EventBus } from '../plugins/event-bus'
export default {
mounted(){
  this.$refs.alarmModal.show = function () {
    EventBus.$emit('fire') // <-- work
  }
}
updated(){
  this.$nextTick(function () {
      this.$refs.tempAlarmPrices.scrollTop = 300 // <-- work
      console.log(this.$refs.tempAlarmPrices.scrollTop) // return 300
      var root = this
      EventBus.$on('fire', function () { // <-- called when event fired
        root.$refs.tempAlarmPrices.scrollTop = 500 // <-- not work
        console.log(root.$refs.tempAlarmPrices.scrollTop) // return 0
      })
    })
}
}
</script>

推荐阅读