首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vue.js对话框/模式在父组件上关闭

Vue.js对话框/模式在父组件上关闭
EN

Stack Overflow用户
提问于 2019-04-25 04:02:46
回答 2查看 849关注 0票数 0

我试图在另一个组件中打开我的CanvasPreview组件,但失败了,首先,它很快显示对话框/模式,然后如果我打开Vue Dev工具,它又被隐藏了,如果我在控制台中手动编辑它,showCanvasPreview设置为false,则显示模式。所以我猜它又被设置为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>
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55837739

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档