Question

Vue.js新手（使用版本2）。

我想在vue js中重用bubble-chart项目。它有像3D.js和一些jQuery一样的好东西，但它现在对我来说没问题（不是Vue.js）。

据我所知，一种方法是从头开始创建Vue.js的并行组件导入/重用任何Vue项目的正确方法是什么？

Answer 1

这是包装在vue组件中的JQuery日期选择器的示例。这样，您创建了可重用的组件，可以在其中使用“ props”从其余的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>

vue.js重用3d.js

1 个答案: