Vuetify 对话框和 vue-signature-pad 绘制问题

Question

我尝试在我的 Vuetify UI 中使用 vue-signature-pad，当我不使用对话框时它 100% 工作，所以我想打开一个对话框并使用 vue-signature-pad 插件，但现在我可以'不要在上面画画。

希望有人能帮我解决我的问题

我的对话框代码如下所示：

<v-dialog v-model="dialog" persistent max-width="600px">
    <v-card>
        <v-card-title>
        <span class="headline">Underskrift</span>
        </v-card-title>
        <v-card-text>
        <v-container grid-list-md>
            <VueSignaturePad id="signature" width="100%"  height="300px" ref="signaturePad" />
            <br />

            <v-layout wrap>
            <v-flex xs12 sm6 md4>
                <v-text-field label="Legal first name*" required></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field label="Legal middle name"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field
                label="Legal last name*"
                persistent-hint
                required
                ></v-text-field>
            </v-flex>
            <v-flex xs12>
                <v-text-field label="Email*" required></v-text-field>
            </v-flex>
            </v-layout>
        </v-container>

        </v-card-text>
        <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
        <v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>

Answer 1

使用它对我有帮助。希望对你有用

<VueSignaturePad :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}" ref="signaturePad"/>