父组件上的Vue.js对话框/模态关闭

Question

我试图在另一个组件中打开我的CanvasPreview组件，但它失败了，首先，如果我打开Vue Dev工具，如果我在控制台中手动编辑它，则showCanvasPreview被设置为false，它会很快显示对话框/模式后再次隐藏为了真实，模态得到了显示。 所以我猜它再次被设置为假，但我不明白为什么。

这是对话框/模态组件：

<template>
    <v-dialog
        v-model="show"
    >
        <v-card>
            <v-card-actions>
                <v-container grid-list-md text-xs-center>
                    <v-layout row wrap>

                    </v-layout>
                </v-container>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import CanvasPreviewSourceUpload from './CanvasPreviewSourceUpload';

export default {
    components: {
        'canvas-preview-source-upload': CanvasPreviewSourceUpload
    },

    props: {
        imgSrc: String,
        visible: Boolean   
    },

    computed: {
        show: {
            get () {
                return this.visible;
            },
            set (visible) {
                if (!visible) {
                    this.$emit('closePreview');
                }
            }
        }
    },
}
</script>

在我的父组件中，我调用预览组件，如下所示：

<template>
    <div>
        //... some more html
        <div id="canvas-body">
            <canvas id="pdf-render"></canvas>
            <canvas id="selectCanvas"
                @mousedown="markElementOnMouseDown"
                @mousemove="updatePreview"
                @mouseup="markElementOnMouseUp">
            </canvas>
        </div>

       <canvas-preview
            :imgSrc="this.targetImage.src"
            :visible="showCanvasPreview"
            @closePreview="showCanvasPreview=false">
        </canvas-preview>
    </div>
</template>


<script>
import CanvasPreview from '@/js/components/CanvasPreview';

export default {
    components: {
        'canvas-preview': CanvasPreview
    },

    props: {
        'name': String
    },

    data: () => ({
        showCanvasPreview: false,
        ...
    }),

    methods: {
        markElementOnMouseUp (event) {
            this.isDragging = false;
            this.targetImage.src = this.clipCanvas.toDataURL();
            this.targetImage.style.display = 'block';

            this.showCanvasPreview = true;
            console.log("mouseup: " + this.showCanvasPreview);
        },
    }
</script>

Answer 1

试试这个吧

    <v-dialog
        v-model="show"
    >
        <v-card>
            <v-card-actions>
                <v-container grid-list-md text-xs-center>
                    <v-layout row wrap>
                        <canvas-preview-source-upload 
                            :imgSrc="imgSrc"
                            @close.stop="show=false">
                        </canvas-preview-source-upload>
                    </v-layout>
                </v-container>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
import CanvasPreviewSourceUpload from './CanvasPreviewSourceUpload';

export default {
    components: {
        'canvas-preview-source-upload': CanvasPreviewSourceUpload
    },
    data: ()=> ({
      show: false
    }),
    props: {
        imgSrc: String,
        visible: Boolean   
    }, 
    watch: {
      show(isShow){
        if (!isShow) {
            this.$emit('closePreview');
        }
      }
      visible(isVisible) {
        this.show = isVisible;
      }
    }
}
</script>```

Answer 2

这样的东西应该允许你从一个单独的组件打开一个v-dialog ..

如果您提供CodePen或CodeSandbox及其中的代码，我们将能够更好地为您提供帮助。

[ CodePen镜像 ]

 const dialog = { template: "#dialog", props: { value: { type: Boolean, required: true }, }, computed: { show: { get() { return this.value; }, set(value) { this.$emit("input", value); } } }, }; const dialogWrapper = { template: "#dialogWrapper", components: { appDialog: dialog, }, data() { return { isShown: false, } } } new Vue({ el: "#app", components: { dialogWrapper } }); 

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.6/dist/vuetify.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" /> <div id="app"> <v-app> <v-content> <dialog-wrapper/> </v-content> </v-app> </div> <script type="text/x-template" id="dialog"> <v-dialog v-model="show"> <v-card> <v-card-actions pa-0> <v-spacer/> <v-btn dark small color="red" @click="show = false">Close</v-btn> <v-spacer/> </v-card-actions> <v-card-title class="justify-center"> <h2> Hello from the child dialog </h2> </v-card-title> </v-card> </v-dialog> </script> <script type="text/x-template" id="dialogWrapper"> <div> <h1 class="text-xs-center">I am the wrapper/parent</h1> <v-container> <v-layout justify-center> <v-btn color="primary" dark @click.stop="isShown = true"> Open Dialog </v-btn> </v-layout> </v-container> <app-dialog v-model="isShown"></app-dialog> </div> </script>