15 Июнь 2022

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

posted in Bitrix, Javascript - JQuery, VUE JS |

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

Само по себе решение дружбы 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();

});

}

});

Запись опубликована on 15.06.2022 at 07:35 and is filed under Bitrix, Javascript - JQuery, VUE JS. Вы можете читать комментарии, используя RSS-ленту. Вы можете оставить комментарий, или отправить трекбек с Вашего сайта.

Пн	Вт	Ср	Чт	Пт	Сб	Вс
« Мар
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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

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