Question

我正在尝试制作可从组件外部触发的模态组件。

我创建了一个ModalComponent.vue文件，其中包含：

<template>
    <v-dialog persistent max-width="290">
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="primary"
            dark
            v-bind="attrs"
            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" text @click="dialog = false">Disagree</v-btn>
            <v-btn color="green darken-1" text @click="dialog = false">Agree</v-btn>
          </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        name: 'modal-component',
        data() {
            return {

            }
        },
    }
</script>

我正在做父母的事情：

<modal-component v-if="this.showDialog"></modal-component>

，并从父级触发showDialog。但是，所要做的只是显示“打开对话框”按钮。我不确定从父母那里实际打开模态会缺少什么。

Answer 1

您应该尝试

<modal-component v-if="showDialog"></modal-component>

Answer 2

Vuetify的<v-dialog>组件默认情况下处于关闭状态。您需要将其打开。您可以通过向其传递值来实现。

但是您还需要让父母知道对话框是否打开，因此您需要为modal-component创建一个支持。

Vue.component('modal-component', {
  template: `
<v-dialog max-width="290" :value="value" @input="v => $emit('input', v)">
  <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" text @click="$emit('input', false)">Disagree</v-btn>
      <v-btn color="green darken-1" text @click="$emit('input', false)">Agree</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
`,
  props: ['value']
});

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    showDialog: false,
  }
})

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main class="pa-5">
        <modal-component v-model="showDialog"></modal-component>
        <v-btn @click="showDialog = true">Show modal</v-btn>
        <p>
          Modal is {{ showDialog ? 'open' : 'closed' }}
        </p>
      </v-main>
    </v-app>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
</body>

Vue：在组件内部放置Vuetify模态

2 个答案: