Question

问题

当我第一次在本地加载应用程序时，第一次单击将画布向下移动工具栏的高度。

这是它的外观=> https://screencast-o-matic.com/watch/cqiF1UOT0C

这是应该如何工作=> https://screencast-o-matic.com/watch/cqiF1vOT0m

有了这个错误，第一次点击甚至不会触发，并且不会在画布上创建黑色方块。

当我禁用工具栏时，此错误不存在。

该如何解决？我需要工具栏可见。

技术

Vue.js，Vuetify.js，Babylon.js

App.vue

kw-Editor是下面的画布组件

<template>
  <v-app>
    <v-toolbar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>KW2</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        flat
        href=""
        target="_blank"
      >
        <span class="mr-2">Test</span>
      </v-btn>
    </v-toolbar>

    <v-content>
      <kw-Editor/>
    </v-content>
  </v-app>
</template>

<script>
import kwEditor from './views/Editor'

export default {
  name: 'App',
  components: {
    kwEditor
  },
  data () {
    return {
      //
    }
  }
}
</script>

<style>
  html, body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
    }
</style>

kwCanvas.vue

<template>
    <canvas id="renderCanvas" touch-action="none"></canvas>
</template>

<script>
    import { render } from './editor/render';

    export default {
        methods: {
            init() {
                render();
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

<style scoped>
    /* div {
        height: 100%;
        width: 100%;
    } */
</style>

Answer 1

我能够通过从//li[@id='li_myaccount']//ancestor::ul删除此行来解决此问题

溢出：隐藏；

画布在首次点击[BabylonJS，Vue，Vuetify]时向下移动

1 个答案: