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

Question

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

我已经观看了视频并通读了博客 post 以获取见解，但我是新手。

很想拥有类似于 what is on this page 的东西。

如果有人可以协助向我展示转换过程，这将有助于此插件和其他 Angular-to-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 height="150" width="90%" 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" 命令。

感谢您的帮助。

Answer 1

使用 UI 插件，您将主要遵循 NativeScript Vue 文档中的 standard instructions，我看到您已经在这样做了。

将核心风味视为原始 HTML (XML) & CSS、Vue / Angular / React 或您使用的任何框架，它只是您的包装器核心风味

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

示例：

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

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

How to use nativescript-drawingpad in Nativescript-Vue?

nativescript

nativescript-angular

nativescript-vue