Всем привет!
Очень давно не писал — просто некогда. В отличие от времени когда я работал админом, сейчас, работая веб программистом свободного времени практически нет — всегда есть работа, которую нужно работать 🙂
Само по себе решение дружбы JQuery Styler и Vue JS конечно не лучший вариант, в идеале вообще нужно выкинуть JQuery и реализовать фронт на чистом Vue…
Но когда вёрстка собрана на JQuery + Styler, соответственно со стилями «подогнанными» под Styler то на подбор нужных компонентов и их стилизация потребуется довольно много времени (по крайней мере у меня т.к. готовых подобных решений я не нашел).
Проблема — при обновлении поля значение в модели не обновляется, хотя поле прикручено к модели через v-model.
Решение — в vue mounted() вешаем на изменения объекта styler-а vue метод обновления значения поля в модели + в моей реализации далее прокидываем из дочернего компонента родителю с помощью $emit
В реализации API 1С Битрикс компонент оборачиваем в BX.Vue.component()
Пример реализации для чекбокса
|
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 |
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(); }); } } }); |
Далее уже в шаблоне основного компонента используем пользовательский vue тег данного компонента
На авторство не претендую — компоненты реализованы в одном из проектов веб студии Слон, где я в данный момент удалённо работаю.
PS
Добавлю реализацию для выбора даты
|
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 31 32 33 34 35 |
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(); }); } }); |