Đưa các thư viện vào VueJs Component

Tiền đâu

Lúc mới bắt đầu dùng VueJs, việc sử dụng VueJs cùng với các thư viện khác đôi lúc làm cho các huynh đệ bối rối. Vì để sử dùng được các thư viện khác thì cần đưa nó vào VueJS, tuy nhiên kĩ năng đơn giản đó đôi khi lại khiến các huynh đệ mới bắt đầu với VueJS bị bối rối. Vậy nên tại hạ mạnh bạo chia sẻ đoạn code để huynh đệ nào cần tham khảo thì tham khảo, ko cần tham khảo thì cười đếu cái rồi đi.

Vue Component Datepicker

• DatepickerThư viện: https://jqueryui.com/datepicker/
• Html Template

  <script type="text/x-template" id="date-picker">
      <input placeholder="YYYY-MM-DD" style="width: 100%" type="text">
  </script>

• Tạo Component tại Javascript

    Vue.component('datepicker', {
        props: ['value'],
        template: '#date-picker',
        mounted: function () {
            var vm = this;
            // Init datepicker
            $(this.$el).datepicker({
                dateFormat: 'yy-mm-dd',
                onSelect: function(dateText) {
                    vm.$emit('input', dateText);
                }
            });
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el).val(value)
            }
        },
        destroyed: function () {
            //$(this.$el).off().select2('destroy')
        }
    });

• html thực thi Component

<datepicker v-bind:value="value" v-model="value"></datepicker>

Vue Component Select2

• Select2Thư viện: https://select2.org/
• Html Template

    <script type="text/x-template" id="select2-template">
        <select style="width: 100%">
            <slot></slot>
        </select>
    </script>

• Tạo Component tại Javascript

    Vue.component('select2', {
        props: ['options', 'value'],
        template: '#select2-template',
        mounted: function () {
            var vm = this;
            $(this.$el)
            // init select2
                .select2({ data: this.options })
                .val(this.value)
                .trigger('change')
                // emit event on change.
                .on('change', function () {
                    vm.$emit('input');
                });
        },
        watch: {
            value: function (value) {
                // update value
                $(this.$el).val(value)
            },
            options: function (options) {
                // update options
                $(this.$el).empty().select2({ data: options })
            }
        },
        destroyed: function () {
            $(this.$el).off().select2('destroy')
        }
    });

• Html thực thi Component

 options = [
    {
        id: 0,
        text: 'enhancement'
    },
    {
        id: 1,
        text: 'bug'
    },
    {
        id: 2,
        text: 'duplicate'
    },
    {
        id: 3,
        text: 'invalid'
    },
    {
        id: 4,
        text: 'wontfix'
    }
  ];

    <select2 :options="options" v-model="idValue">
    </select2>

Lời cuối

Trên đây là chia sẻ đoạn code để componetent hoá 2 thư viện Select2vàDatepickertuy nhiên với các thư viện khác cũng hoàn toàn tương tự vậy.

Cuối lời, chém gió thế thôi chứ thực tế kiểu thư viện tích hợp sẵn cho VueJs cũng có sẵn rồi, trước lúc component hoá thư viện gì thì huynh đệ nên google trước xem vueJs đã có sẵn chưa rồi hẵng làm nhé.

Ví dụ:

• Vue Select https://sagalbot.github.io/vue-select/
• Vuejs-datepicker https://www.npmjs.com/package/vuejs-datepicker