Дружим JQuery Styler и Vue JS в реализации 1С Битрикс API

Всем привет!
Очень давно не писал — просто некогда. В отличие от времени когда я работал админом, сейчас, работая веб программистом свободного времени практически нет — всегда есть работа, которую нужно работать

Само по себе решение дружбы JQuery Styler и Vue JS конечно не лучший вариант, в идеале вообще нужно выкинуть JQuery и реализовать фронт на чистом Vue…
Но когда вёрстка собрана на JQuery + Styler, соответственно со стилями «подогнанными» под Styler то на подбор нужных компонентов и их стилизация потребуется довольно много времени (по крайней мере у меня т.к. готовых подобных решений я не нашел).

Проблема — при обновлении поля значение в модели не обновляется, хотя поле прикручено к модели через v-model.
Решение — в vue mounted() вешаем на изменения объекта styler-а vue метод обновления значения поля в модели + в моей реализации далее прокидываем из дочернего компонента родителю с помощью $emit

В реализации API 1С Битрикс компонент оборачиваем в BX.Vue.component()

Пример реализации для чекбокса

    BX.Vue.component(‘webslon-checkbox’, {
        props: {
            value: false,
            formstyler: false,
        },
        methods: {
            updateInput() {
                this.$emit(‘input’, !this.value);
            },
        },
        template: `
        <label>
            <input type=»checkbox» v-bind:checked=»value» v-on:change=»updateInput()»>
            <slot/>
        </label>
    `,
        mounted () {
            if (this.formstyler === true) {
                let component = this;
                jQuery(component.$el).find(‘input’).styler({
                    selectSearch: true,
                }).on(‘change’, function () {
                    component.updateInput();
                });
            }
        }
    });

BX.Vue.component(‘webslon-checkbox’, {

props: {

value: false,

formstyler: false,

methods: {

updateInput() {

this.$emit(‘input’, !this.value);

template: `

<label>

<slot/>

</label>

mounted () {

if (this.formstyler === true) {

let component = this;

jQuery(component.$el).find(‘input’).styler({

selectSearch: true,

}).on(‘change’, function () {

component.updateInput();

});

}

});

Далее уже в шаблоне основного компонента используем пользовательский vue тег данного компонента с штатной директивой v-model для связывания поля ввода и с переменной

На авторство не претендую — компоненты реализованы в одном из проектов веб студии Слон, где я в данный момент удалённо работаю.

PS
Добавлю реализацию для выбора даты

BX.Vue.component(‘webslon-datepicker’, {
    model: {
        prop: ‘modelValue’,
        event: ‘input’
    },
    data () {
        return {
            modelValue: this.value
        }
    },
    methods: {
        updateInput() {
            this.$emit(‘input’, this.value);
        },
    },
    template: `
        <input 
            type=»text» 
            readonly=»readonly» 
            v-model=»modelValue»
            v-on:input=»updateInput()»
        >
    `,
    mounted () {
        let component = this;
        jQuery(component.$el).datepicker({
            language: ‘ru’,
            autoclose: true,
        }).change(function() {
            let date = jQuery(component.$el).datepicker(‘getDate’);
            component.value = date.toLocaleDateString();
            component.updateInput();
        });
    }
});

BX.Vue.component(‘webslon-datepicker’, {

model: {

prop: ‘modelValue’,

event: ‘input’

data () {

return {

modelValue: this.value

}

methods: {

updateInput() {

this.$emit(‘input’, this.value);

template: `

<input

type=«text»

readonly=«readonly»

v—model=«modelValue»

v—on:input=«updateInput()»

mounted () {

let component = this;

jQuery(component.$el).datepicker({

language: ‘ru’,

autoclose: true,

}).change(function() {

let date = jQuery(component.$el).datepicker(‘getDate’);

component.value = date.toLocaleDateString();

component.updateInput();

});

}

});

Добавить комментарий Отменить ответ