在Vue-Fulpage.js模板上实现Vuetify对话框/弹出模式

Question

我试图实现一个对话框/弹出模式，从Vuetify在一个Vue-Fulpage.js滚动网站。我希望模态按钮在登陆页上，而不是在肚脐上。到目前为止，我已经尝试在一个名为Modal.vue的单独组件中设置该模型，然后将该组件导入到Body.vue中，在Vue-Fulpage.js容器中嵌套modal标记，但是即使Vuetify安装正确，该按钮也不会在页面上呈现。我怎样才能使Vue-Fulpage.js的Vuetify模式工作呢？请参阅下面的代码。非常感谢！

//Modal.vue

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="290">
      <template v-slot:activator="{ on }">
        <v-btn class="modal-btn" color="primary" dark v-on="on">Open Dialog</v-btn>
      </template>
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog = false">Disagree</v-btn>
          <v-btn color="green darken-1" flat @click="dialog = false">Agree</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false
      }
    }
  }
</script>

<style>
</style>

//Body.vue

<template>
  <div class="body">
    <full-page :options="options" id="fullpage">
        <div class="section">
            <Modal></Modal>
        </div>
        <div class="section">
            <h3>Section 2</h3>
        </div>
        <div class="section">
            <h3>Section 3</h3>
        </div>
    </full-page>

  </div>
</template>

<script>
import Modal from './Modal'
export default {
  name: 'Body',
  Components: {
    Modal
  },
  data () {
    return {
      options: {
        afterLoad: this.afterLoad,
        scrollOverflow: true,
        scrollBar: false,
        menu: '#menu',
        navigation: true,
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#fec401', '#1bcee6', '#ee1a59']
      },
      logo: { width: 500 },
      dialog: false
    }
  }
}
</script>

<style>
</style>

Answer 1

!！编辑!!:

我刚注意到你的Components大写了。这很可能是它不适合你的原因。

这里：

  Components: {
    Modal
  },

应该是：

  components: {
    Modal
  },

此外，我不知道this.afterLoad在做什么。您是否有未显示的方法，或者它是否试图调用自己？这也可能是一个妨碍正确渲染的问题。

我怀疑这是你所有的代码，但似乎你哪里都没有v-app。

我能够通过创建一个环绕vue-full-page的组件并在vue-full-page组件中利用slots来实现这一点。

如果我正确地理解了这件事，这样的事情应该会奏效.

示例：

​

// VUE-FULL-PAGE COMPONENT
const vueFullPage = {
  template: "#vue-fullpage",
  data() {
    return {
      options: {
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec']
      },
    }
  }
}


// DIALOG COMPONENT
const vueDialog = {
  template: "#vue-dialog",
  data() {
    return {
      isShown: false,
    }
  }
}


// MAIN VUE APP
const vm = new Vue({
  el: "#app",
  components: {
    vueFullPage,
    vueDialog
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/fullpage.js/dist/fullpage.min.css" rel="stylesheet"/>

<!-- ---------------------------------- -->
<!-- MAIN VUE APP -->
<!-- ---------------------------------- -->
<div id="app">
  <v-app>
    <vue-full-page>
      <template v-slot:section-one>
        <vue-dialog></vue-dialog>
      </template>
    </vue-full-page>
  </v-app>
</div>
<!-- ---------------------------------- -->


<!-- ---------------------------------- -->
<!-- SIMULATES VUE-FULL-PAGE COMPONENT -->
<!-- ---------------------------------- -->
<script type="text/x-template" id="vue-fullpage">
  <div>
    <full-page ref="fullpage" :options="options">
      <div class="section">
        <h1>Section 1</h1>
        <slot name="section-one"></slot>
        <v-btn class="next" @click="$refs.fullpage.api.moveSectionDown()">Next</v-btn>
      </div>
      <div class="section">
        <h1>Section 2</h1>
        <v-btn class="prev" @click="$refs.fullpage.api.moveSectionUp()">Prev</v-btn>
      </div>
    </full-page>
  </div>
</script>
<!-- ---------------------------------- -->


<!-- ---------------------------------- -->
<!-- SIMULATES DIALOG COMPONENT -->
<!-- ---------------------------------- -->
<script type="text/x-template" id="vue-dialog">
  <div>
    <v-dialog v-model="isShown">
      <template v-slot:activator="{ on }">
        <v-btn
          color="red lighten-2"
          dark
          v-on="on"
        >Open Dialog</v-btn>
      </template>
      <v-card>
        <v-card-actions pa-0>
          <v-spacer/>
          <v-btn dark small color="red" @click="isShown = !isShown">Close</v-btn>
          <v-spacer/>
        </v-card-actions>
        <v-card-title class="justify-center">
          <h2>
            Hello from the dialog
          </h2>
        </v-card-title>
      </v-card>
    </v-dialog>
  </div>
</script>

​

CodePen镜