如何在 Nativescript-Vue 中使用 nativescript-drawingpad？

Posted 2023-04-14

【中文标题】如何在 Nativescript-Vue 中使用 nativescript-drawingpad？

【英文标题】：How to use nativescript-drawingpad in Nativescript-Vue?

【发布时间】：2020-05-13 01:31:34

【问题描述】：

我正在尝试在我的 Nativescript-Vue 应用程序中使用 Brad Martin 的 nativescript-drawingpad (github repo)。我能找到的所有示例都使用 Angular 进行演示，但我不了解 Angular。我实际上已经在寻找一些将 Angular 转换为 Vue NS 代码的方法，但没有找到任何东西。

我已经观看了视频并通读了博客文章以获取见解，但我是绿色的。

希望有类似于what is on this page 的东西。

如果有人可以帮助我向我展示过渡，它将有助于此插件和其他 Angular 到 Vue NS 的翻译。

目前我有一个可以工作的绘图板，可以接受绘图。但我不确定如何访问可用的方法（clearDrawing()、getDrawing() 等...）。

在App.js中注册为：

Vue.registerElement('DrawingPad', () => require('nativescript-drawingpad').DrawingPad);

我在 Home.vue 中以如下方式访问它：

        <GridLayout rows="*,auto" columns="*" backgroundColor="#FFFFFF">
            <StackLayout col="0" row="0" horizontalAlignment="center" verticalAlignment="center" backgroundColor="#FFFFFF">
                <Label text="Sign/Update below" textWrap="true" horizontalAlignment="center" verticalAlignment="center" marginTop="20"></Label>
                <DrawingPad   id="drawingPad" ref="drawingPad" penColor="#FF6B6B" penWidth="2" borderColor="black"
                            borderWidth="2">
                </DrawingPad>

            </StackLayout>
            <GridLayout col="0" row="1" rows="auto,*" columns="*,*">
                <Button col="0" row="0" colSpan="2" class="btn" text="Clear Signature" @tap="clearMyDrawing"></Button>


                <Button col="0" colSpan="2" row="1" class="btn btn-primary" text="Done" @tap="onDoneTap"></Button>
            </GridLayout>
        </GridLayout>

我的方法连接正确，因为警报会适当地弹出......

methods:  
            clearMyDrawing(args) 
                alert("So long, and thanks for all the tacos.");

            ,
            onDoneTap() 
                alert("Done?????");
            
        

我已经尝试了很多变体来访问这些方法，但坦率地说，我没有任何值得展示的例子......

这是在我的 Mac 上使用 nativescript-cli 使用“tns run android”命令运行的。

感谢您的帮助。

【参考方案1】：

使用 UI 插件，您通常会遵循 NativeScript Vue 文档中的 standard instructions，我看到您已经这样做了。

将 Core 风格视为原始 html (XML) 和 CSS、Vue / Angular / React 或您使用的任何框架，它只是您的 Core 风格的包装器。

使用 Vue，您在模板上引用的所有内容都将被 Vue 元素包装，您必须访问 nativeView 属性以获取实际元素，然后访问其中的任何方法。

示例：

 clearMyDrawing(args) 
    this.$refs.drawingPad.nativeView.clearDrawing();
 ,

【讨论】：

不幸的是，这不起作用。我假设您的意图是这个clearMyDrawing(args) 可以按原样使用。如果没有，我很抱歉。尽管如此，当按下“清除签名”按钮时，插入它会导致应用程序崩溃，详细信息An uncaught Exception occurred on "main" thread. Calling js method onClick failed TypeError: Cannot read property 'drawingPad' of undefined

对不起，我想应该是 $refs。

哈哈。对。出于完全相同的原因，我回来接受答案。谢谢。

你们在vue下有nativescript-drawingpad的样板吗？我无法设置一个正常工作的应用程序。