vue 实用小技巧

 

 1  实现一个input动态的让后缀跟随

 
                            <div class="label-text-alt text-gray-400">联系方式</div>
                            <div class="flex flex-nowrap  items-center mb-[2px]   h-[24px] w-[180px] pr-[6px] py-[2px] rounded-[2px] relative "
                                 :class="{ 'border border-[#D4D4D7] bg-[#eee] justify-between': isEditTop }">
                                <div :contenteditable="isEditTop" @keyup="v =>person.phone = v.target.innerHTML"
                                     class="h-[24px]  justify-center  focus:outline-none"
                                     :class="{ 'w-[134px]': isEditTop }">{{ person.phone }}
                                </div>
                                <label class="tag-text ml-[8px]">Mobile</label>
                            </div>
                            <div class="flex flex-row items-center mb-[2px]  h-[24px] w-[180px] pr-[6px] py-[2px] rounded-[2px] relative"
                                 :class="{ 'border border-[#D4D4D7] bg-[#eee] justify-between': isEditTop }">
                                <div :contenteditable="isEditTop" @keyup="v =>person.email = v.target.innerHTML"
                                     class="h-[24px] justify-center focus:outline-none"
                                     :class="{ 'w-[139px]': isEditTop }">{{ person.email }}
                                </div>
                                <label class="tag-text ml-[8px]">Email</label>
                            </div>
                        

:contenteditable 属性

2 自动换行聚焦

const inputs = ref([]);
watch(() => currentIndex.value, () => {
    setTimeout(() => {
        inputs.value[currentIndex.value].focus();
    }, 100);
})
//每在我的input里面按enter以后的话要聚焦到下一个input

<input v-model="data[index - 1 ]"
                                   @focus="setCurrentIndex(index);console.log(currentIndex);console.log(data.length);"
                                   :class="currentIndex===index?'text-blue-400 scale-100':'opacity-25 scale-[90%]'"
                                   class="transition-all w-[71px] h-[25px] border no-rounded text-center  ml-[40px]"
                                   type="text"
                                   :ref="el => inputs[index] = el"
                                   @keydown.enter="scroll.scrollTop = currentIndex * 65;
                                   currentIndex===data.length?currentIndex++&&data.push(id++)&&refsInput.push('input'+data.length)&&console.log(currentIndex)
                                   :currentIndex++;
                                 ">

Vue 在模板中提供了 $refs 来获取组件或者 DOM 元素的引用。这种方式更加符合 Vue 的响应式特性。尝试将 input 元素使用 $refs 获取引用来尝试，这样更加符合 Vue 的方式。