Новое в Vue.js (используется версия 2).
Я хотел бы повторно использовать проект bubble-chart в vue js. В нем есть много вкусностей, таких как 3D.js и немного jQuery, но меня пока это устраивает (не Vue.js).
Я понимаю, что один из способов — создать параллельный компонент Vue.js с нуля.
Каков правильный способ импорта/повторного использования проектов Vue?
Вот пример средства выбора даты JQuery, завернутого в компонент vue. Таким образом, вы создали повторно используемый компонент, в котором вы можете использовать «реквизиты» для передачи значений из остальной части проекта vue. То же самое вы можете сделать для пузырьковой диаграммы. Это самая простая реализация для ваших нужд.
<template>
<input class="datepicker-input btn-gray-gredient" type="text" readonly/>
</template>
<script>
export default {
props: ['value'],
mounted: function () {
/**
* Getting today's date
*/
var today = new Date();
today.setHours(0, 0, 0, 0);
today = ((today.getDate() < 10) ? ('0' + today.getDate()) : today.getDate()) + '-' + ((today.getMonth() + 1) < 10 ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1)) + '-' + today.getFullYear();
/**
* JQuery wrapped date picker
*/
var self = this;
$('.datepicker-input').on('click', function() {
$('.fa-calendar').click();
});
/**
* Setting up datepicker with default properties
*/
$(self.$el)
.datepicker({ value: today, iconsLibrary: 'fontawesome', format: 'dd-mm-yyyy' }) // init datepicker
.trigger('change')
.on('change', function () { // emit event on change.
self.$emit('input', this.value);
});
},
watch: {
value: function (value) {
$(this.$el).val(value);
}
},
destroyed: function () {
$(this.$el).datepicker('destroy');
}
}
</script>
