Как использовать nativescript-Drawingpad в Nativescript- Vue? - PullRequest
Новая
       20

Как использовать nativescript-Drawingpad в Nativescript- Vue?

0 голосов
/ 27 января 2020

Я пытаюсь использовать нативный скрипт для рисования Брэда Мартина ( github repo ) в моем приложении Nativescript- Vue. Все примеры, которые я могу найти, используют Angular для демонстрационных целей, и я не знаю Angular. На самом деле я искал некоторые инструкции для перехода Angular -to- Vue NS-кода, но ничего не нашел.

Я посмотрел видео и прочитал пост в блоге для понимания но я зеленый

Хотелось бы иметь что-то похожее на , что на этой странице .

Если бы кто-то мог помочь показать мне переход, это помогло бы с этим плагином и другими Angular -to- Vue NS translations.

В настоящее время у меня есть рабочая панель для рисования, которая принимает рисунок. Но я не уверен, как получить доступ к доступным методам (clearDrawing (), getDrawing (), et c ...).

в приложении. 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?????");
            }
        }

Я пробовал много вариантов, чтобы получить доступ к этим методам, но я откровенно колеблюсь и у меня нет примеров достойных показывая ....

Это выполняется на моей ма c с использованием nativescript-cli с использованием команды "tns run android".

Спасибо за любую помощь.

1 Ответ

0 голосов
/ 27 января 2020

С помощью плагинов пользовательского интерфейса вы в основном следовали бы стандартным инструкциям из документов NativeScript Vue, и я вижу, что вы уже это делаете.

Рассматривайте основной вкус как необработанный HTML ( XML) & CSS, Vue / Angular / Реагировать или какой-либо другой фреймворк, который вы используете, это всего лишь оболочка для вашего базового аромата.

С Vue все, на что вы ссылаетесь в шаблоне, будет Обернутый элементом Vue, вам нужно получить доступ к атрибуту nativeView, чтобы получить фактический элемент, а затем получить доступ к любым методам внутри.

Пример: 

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