Как добавить собственный скрипт в компонент vue - PullRequest
Новая
       14

Как добавить собственный скрипт в компонент vue

0 голосов
/ 27 августа 2018

У меня есть это поле 

<input type="text" class="form-control" id="datepicker-example">

с этим jQuery 

$('#datepicker-example').datepicker({});

Как мне использовать мой код jQuery в компоненте Vue для правильной работы ввода?

Script

export default {
        data() {
          return {
               // my data
            }
          };
        },
        components: {
            // my components
        },
        methods: {
          //my methods
        }
    }

1 Ответ

0 голосов
/ 27 августа 2018

если вы хотите использовать datepicker в vue, лучше всего обернуть его в такой компонент: 

Vue.component('datepicker', {
    props: ['dateformat','defaultdate','minDate','maxDate'],
    template: '<input type="text" />',
    mounted: function() {
        var dateformat = this.dateformat;
        var defaultdate = this.defaultdate;
        $(this.$el).datepicker({
            minDate: this.minDate,
            maxDate: this.maxDate,
            dateFormat: dateformat,
            onClose: this.onClose,
            defaultDate: defaultdate
        });
    },
    methods: {
        onClose: function(date) {
            this.$emit('input', date);
        }
    }
});

По сути, вы делаете реквизит для любых необходимых настроек, и компонент может использоваться в любом проекте.

использование: 

 <datepicker v-model="input.date"></datepicker>

Если вам не нужен jquery datepicker, но возможна другая библиотека, я бы порекомендовал: http://element.eleme.io/#/en-US/component/date-picker

...