vue.js นำ 3d.js มาใช้ซ้ำ

นี่คือตัวอย่างของตัวเลือกวันที่ JQuery ที่รวมอยู่ในองค์ประกอบ vue วิธีนี้คุณสร้างส่วนประกอบที่ใช้ซ้ำได้ซึ่งคุณสามารถใช้ '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>