如何在 Vue 中顯示模態框？

Question

由於某些我無法理解的原因，我無法讓 Vue Modal 在我的 Vue-cli 安裝中工作。 嘗試從以下位置運行模態示例： https ://v2.vuejs.org/v2/examples/modal.html

我對 Vue 還是很陌生，所以請原諒我的簡單問題。

任何幫助將不勝感激。

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
      <script type="text/x-template" id="modal-template">
        <transition name="modal">
          <div class="modal-mask">
            <div class="modal-wrapper">
              <div class="modal-container">
      
                <div class="modal-header">
                  <slot name="header">
                    default header
                  </slot>
                </div>
      
                <div class="modal-body">
                  <slot name="body">
                    default body
                  </slot>
                </div>
      
                <div class="modal-footer">
                  <slot name="footer">
                    default footer
                    <button class="modal-default-button" @click="$emit('close')">
                      OK
                    </button>
                  </slot>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </script>
    <main id="app"></main>
  </body>
</html>

主.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.component('modal', {
  template: '#modal-template'
})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data: {
    showModal: false
  }
})

頁面.vue

<template>
<div>
  <button id="show-modal" @click="showModal = true">Show Modal</button>
  <!-- use the modal component, pass in the prop -->
  <modal v-if="showModal" @close="showModal = false">
    <!--
      you can use custom content here to overwrite
      default content
    -->
    <h3 slot="header">custom header</h3>
  </modal>
</div>
</template>

<script>
  export default {
    name: 'VueModal',
    methods: {
      hideModal () {
        return this.$store.commit('hideModal')
      }
    }
  }
</script>

Answer 1

似乎您沒有使用Vuex ，因此代碼行

return this.$store.commit('hideModal')

不會工作。

此外，您的showModal在Main.js而不是您的Page.vue中，並且您實際上沒有使用方法hideModal() ，請在Page.vue中修改您的腳本，如下所示：

<script>
  export default {
    name: 'VueModal',
    data() {
      return { showModal: false };
    }
  }
</script>

如何在 Vue 中顯示模態框？

問題描述

1 個解決方案

解決方案1
1 已采納 2018-02-09 03:26:15

如何在 Vue 中顯示模態框？

問題描述

1 個解決方案

解決方案1 1 已采納 2018-02-09 03:26:15

解決方案1
1 已采納 2018-02-09 03:26:15