Как заставить Gridstack (плагин jquery) и Vue.js работать вместе? - PullRequest
Новая
       40

Как заставить Gridstack (плагин jquery) и Vue.js работать вместе?

0 голосов
/ 25 июня 2019

Я использую вместе gridstack (плагин jquery) и vue.js. Я знаю, что jquery и vuejs не созданы для сотрудничества. Но мне нужно это сделать.

У меня есть виджет vue.js, в который я добавил некоторые свойства, чтобы иметь возможность привязать его к сетке и использовать сетку для управления положением.

Gridstack переместить мой виджет и изменить его атрибуты gs-x, gs-y, gs-with и gs-height. Но мои атрибуты vuejs не меняются.

Каков наилучший способ изменить мои свойства vuejs при изменении свойств данных сетки?

Мой виджет (vue): 

    Vue.component('mini-widget', {
        template: '#mini-widget-preview-item-template',
        props: ['miniwidget'],
        data() {
            return {};
        },
        methods: {

        },
        destroyed() {

        }
    });

Шаблон html: 

<template id="mini-widget-preview-item-template">
    <div v-bind:data-gs-id="miniwidget.Id"
         v-bind:data-gs-x="miniwidget.Position.x"
         v-bind:data-gs-y="miniwidget.Position.y"
         v-bind:data-gs-width="miniwidget.Position.Width"
         v-bind:data-gs-min-width="miniwidget.Position.MinWidth"
         v-bind:data-gs-max-width="miniwidget.Position.MaxWidth"
         v-bind:data-gs-height="miniwidget.Position.Height"
         v-bind:data-gs-min-height="miniwidget.Position.MinHeight"
         v-bind:data-gs-max-height="miniwidget.Position.MaxHeight"  
         class="grid-stack-item mini-widget-preview-item p-2 card mini-widget-card">

        <div class="card-body flex-grow-0 p-0 m-0">
            <h5 class="text-center m-0 text-truncate">{{ miniwidget.Name }}</h5>
        </div>

    </div>

</template>

HTML: 

<widget :is="widget.Type"
    v-bind:key="widget.Id"
    v-on:edit="editWidget(widget)"
    v-on:remove="removeWidget(index)"
    v-on:makewidget="makeWidget(widget.Id)"
    v-bind:widget="widget">
</widget>

HTML-результат этих элементов vuejs: 

<div id="fb833d4c" 
    data-gs-id="fb833d4c" 
    data-gs-x="1" 
    data-gs-y="0" 
    data-gs-width="4" 
    data-gs-min-width="1" 
    data-gs-max-width="12" 
    data-gs-height="4" 
    data-gs-min-height="1" 
    data-gs-max-height="12" 
    class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide">
    ...
</div>

В документации по сетке есть два события:

  • gsresizestop(event, ui)
  • dragstop(event, ui)

Я мог бы вернуть событие jquery в моем виджете vue.js, чтобы назначить хорошие свойства, но эти события не инициируются, и, возможно, есть другой способ сделать это?

Примечание для других людей : Если вы можете избежать использования библиотек jquery с vue.js, сделайте это. Это на самом деле не работает вместе и приведет к проблемам с производительностью. Если вы ищете что-то вроде гридстака или гридстера, чтобы иметь сетки внутри вашего приложения, вы можете попробовать использовать vue grid layout (сделано для vue.js)

...