Baru di Vue.js (menggunakan versi 2).
Saya ingin menggunakan kembali proyek bubble-chart di vue js. Ini memiliki banyak barang di dalamnya seperti 3D.js dan beberapa jQuery tetapi tidak masalah bagi saya untuk saat ini (bukan Vue.js).
Saya memahami bahwa salah satu caranya adalah dengan membuat komponen paralel Vue.js dari awal.
Apa cara yang benar untuk mengimpor/menggunakan kembali tidak ada proyek Vue?
Berikut adalah contoh pemilih tanggal JQuery yang dibungkus dengan komponen vue. Dengan cara ini Anda membuat komponen yang dapat digunakan kembali di mana Anda dapat menggunakan 'props' untuk meneruskan nilai dari proyek vue lainnya. Hal yang sama dapat Anda lakukan untuk bagan gelembung. Ini adalah implementasi termudah untuk kebutuhan Anda.
<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>
