javascript - Vue Js 在 vue-js-modal 中打开画板
问题描述
我是新手Vue
并试图在里面打开画板vue-js-modal
。
我不确定我在这里做错了什么。
我正在使用VueModal和vue-signature-pad。
它在页面上运行良好,但我无法让它在模式中运行。
App.vue
代码如下
<template>
<div id="app">
<v-dialog />
<div class="container">
<div class="row">
<div class="col-12 mt-2">
<div class="col-6 mt-2">
<button class="btn btn-secondary" @click="showButtonsDialog">
Open Dialog
</button>
</div>
</div>
<div class="col-12 mt-2">
<VueSignaturePad
id="signature"
width="100%"
height="100%"
ref="signaturePad"
/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
showButtonsDialog() {
this.$modal.show("dialog", {
title: "Some Title",
text:'<VueSignaturePad id="signature" width="100%" height="200px" ref="signaturePad"/>',
buttons: [
{
title: "CANCEL",
handler: () => {
this.$modal.hide("dialog");
}
}]
});
}
}
};
</script>
我在这里做错了什么?
谢谢
解决方案
我认为text
只能使用纯文本,而不是 Vue 组件。要将 Vue 组件包含在您的模态中,您可以在模板中声明它
<modal name="example"
width="80%"
height="80%">
<VueSignaturePad
id="signature"
width="100%"
height="100%"
ref="signaturePad"
/>
</modal>
当你想展示它时
showButtonsDialog() {
this.$modal.show("example")
}
推荐阅读
- sql - 如何使用 if 语句触发表上的删除操作?
- python - net.forward() 的返回类型
- html - 想要在我的导航栏下有一条虚线,但边框底部样式:虚线;不为我做吗?
- javascript - 如何在它的静态方法中引用当前类?
- java - JavaPoet中如何添加参数化的超接口?
- javascript - 将 Json 数据传递给handsontable
- java - 在运行时获取服务器上的 Corba 客户端活动
- mysql - Terraform mysql 提供程序。多个端点?
- vba - 在运行时模式下从 Access 表单中填写 word 文档
- c++ - 如何将不可复制的对象“推回”到向量中