Всем привет Делаю поле ввода с форматированием на 3 версии. Форматирование

Question

Всем привет Делаю поле ввода с форматированием на 3 версии. Форматирование

работает, но возникло два вопроса
1. Почему не сохраняется введённое значение?
2. Почему изменение значения в компоненте не доходит до основного приложения?

https://codepen.io/sm1thana/pen/dyOwwEB

#frontend #javascript #programming #russian #vue.js

0

11.03.2021

10 ответов

6 просмотров

Meow Автор вопроса

Всем ещё раз привет. Так и не добил вчера. Оба косяка исправляются если я меняю текущий :value на v-model. Но как тогда форматировать видимое значение при потере фокуса? Копать в сторону computed get/set?

0

12.03.2021

Meow Автор вопроса

Vladimir Voytenko ️
да

Спс

0

12.03.2021

Meow Автор вопроса

Vladimir Voytenko ️
да

Не подскажите почему тогда в компоненте этого примера вариант с аналогичным :value работает на инпуте? https://codepen.io/scorch/pen/oZLLbv Beeaking в третьей версии?

0

12.03.2021

Vladimir Voytenko ️

Meow
Не подскажите почему тогда в компоненте этого прим...

да

0

12.03.2021

Meow Автор вопроса

Vladimir Voytenko ️
да

Спс!

0

12.03.2021

Андрей Полевой

Meow
Всем ещё раз привет. Так и не добил вчера. Оба ко...

Ну можно директиву сделать...

0

12.03.2021

Meow Автор вопроса

Андрей Полевой
Ну можно директиву сделать...

А как она может помочь? С помощью этой инструкции https://v3.vuejs.org/guide/component-basics.html#using-v-model-on-components я связал значение кастомного input с общим приложением через computed get/set и форматирую число при change, что совпадает с blur. https://codepen.io/sm1thana/pen/dyOwwEB Но как добавить форматирование (удаление пробелов) при фокусе? Никогда ещё не чувствовал себя таким тупым))

0

12.03.2021

Андрей Полевой

Meow
А как она может помочь? С помощью этой инструкции...

function onInput (mobile, mask, event) { if (!event.isTrusted) return const target = event.target const value = formatValue(target.value, mobile) target.value = masker(value, '+###########') target.dispatchEvent(new Event('input', { bubbles: true, cancelable: true, composed: true })) Vue.nextTick(() => { target.value = masker(value, mask) }) } function onBlur (mobile, mask, event) { const target = event.target const value = formatValue(target.value, mobile) Vue.nextTick(() => { target.value = masker(value, mask) }) } export default { bind (el, binding) { const inputNode = el.querySelector('input') if (!inputNode) throw new Error('v-phone directive required input Node') const mobile = binding.modifiers.mobile const value = formatValue(inputNode.value, mobile) const mask = binding.value || '' inputNode.setAttribute('type', 'tel') inputNode.setAttribute('inputmode', 'tel') inputNode.value = masker(value, mask) const inputHandler = onInput.bind(null, mobile, mask) const blurHandler = onBlur.bind(null, mobile, mask) inputNode.addEventListener('input', inputHandler) inputNode.addEventListener('blur', blurHandler) inputNode.addEventListener('focus', blurHandler) }, componentUpdated (el, binding) { const inputNode = el.querySelector('input') Vue.nextTick(() => { const mobile = binding.modifiers.mobile const value = formatValue(inputNode.value, mobile) const mask = binding.value || '' inputNode.value = masker(value, mask) }) } }

0

12.03.2021

Meow Автор вопроса

Андрей Полевой
function onInput (mobile, mask, event) { if (!ev...

спс, буду вникать

0

12.03.2021

Vladimir Voytenko ️ · Accepted Answer

Vladimir Voytenko ️

Meow
Всем ещё раз привет. Так и не добил вчера. Оба ко...

да

0

12.03.2021

169 похожих чатов

Всем привет Делаю поле ввода с форматированием на 3 версии. Форматирование

10 ответов

Похожие вопросы