Question

我有这个字段

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

使用此jQuery

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

我应该如何在Vue组件中使用jQuery代码来使输入正常工作？

Script

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

Answer 1

如果要在vue中使用datepicker，最好将其包装到这样的组件中：

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

如何将自定义脚本添加到Vue组件

1 个答案: