vue.js - Vuetify dialog and vue-signature-pad draw problems
问题描述
I try to use vue-signature-pad inside my Vuetify UI and its working 100% when i don't use dialog, so i want to open a dialog and use the vue-signature-pad plugin but now i can't draw on it.
hope someone can help me with my issue
my dialog code look like this:
<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>
解决方案
使用它对我有帮助。希望这对你有用
<VueSignaturePad :options="{onBegin: () => {$refs.signaturePad.resizeCanvas()}}" ref="signaturePad"/>
推荐阅读
- text - 如何使用 Flutter 编写带有要点的段落?
- javascript - 在组合中使用 Object.assign() 时可以使用相同的函数名称吗?
- python - Django媒体未加载,静态文件工作
- linux - 查找linux中两个文件夹之间更改的行数
- sql - 将 SQL 转换为 eloquent
- .htaccess - .htaccess 中的多个条件重定向 301 和 404
- python - 使用 fsolve 查找 Python 中两个平均值相交所需的价格
- vhdl - VHDL在详细说明之前无法调用子程序“log2”
- node.js - Mongoose 查找数组字段包含数组中所有值的对象
- ios - 在资产库中播放音频