Question

我正在尝试在Vue-fullpage.js滚动网站中从Vuetify实现对话框/弹出模式。我希望模式按钮位于登录页面上，而不是导航栏上。到目前为止，我已经尝试在名为Modal.vue的单独组件中设置模态，然后将该组件导入到Body.vue中，并将Modal标记嵌套在Vue-fullpage.js容器中，但是按钮不会呈现即使正确安装了Vuetify，页面上也没有。如何使用Vue-fullpage.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的组件并在slots组件中利用vue-full-page来使它工作。

如果我正确地理解了这一点，那么类似的东西应该可以工作...

示例：

// 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 mirror

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

1 个答案: