Движение картинки внутри инпута в зависимости от кол-ва введенных символов

Рейтинг: -1Ответов: 1Опубликовано: 01.04.2023

У меня есть контейнер в котором есть инпут и картинка они расположены в центре контейнера, хотел реализовать так , чтобы при вводе текста в инпут должен расширятся инпут и в свою очередь толкать картинку в лево, как это реализовать ?

const app = new Vue({
   el: '#app',
data() {
    return {
      numbCard: '',
    };
  },
  computed: {
    inputWidth() {
      // умножаем длину значения в инпуте на определенный коэффициент,
      // чтобы учитывать ширину одного символа
      return `${(this.inputValue.length + 1) * 10}px`;
    },
  },
};
.blockinputimg {
   width: 510px;
   height: 80px;
   background: #000;
   border-radius: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.cart {
  width: 40px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px
}
.fieldones {
   font-weight: 700;
   font-size: 20px;
   color: #000; 
   text-align: center;
}
.fieldones::placeholder {
   color: rgba(0, 0, 0, 0.2);
   letter-spacing: -0.05em;
}   
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="blockinputimg" id="app">
     <img src="..creditCart.svg" alt="cartBlack" class="cart" :style="`opacity: ${numbCard.length >= 1 ? 1 : 0.2}`">
     <input class="fieldones" v-model="numbCard" autofocus placeholder="Номер счета" :style="`opacity: ${numbCard.length >= 1 ? 1 : 0.2}`" :style="{ width: inputWidth + 'px' }">
 </div>

javascript vue.js
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Причина в том что у вас не так названа переменная inputValue и еще стиль не совсем точно записан в самом компоненте :style="{ width: inputWidth + 'px' }". И насколько я знаю дважды аттрибуты прописывать нельзя. В общем много ошибок, как-будто код писал один а правил другой:) В итоге код должен выглядеть так:

const app = new Vue({
   el: '#app',
data() {
    return {
      numbCard: '',
    };
  },
  computed: {
    inputWidth() {
      // умножаем длину значения в инпуте на определенный коэффициент,
      // чтобы учитывать ширину одного символа
      return `${(this.numbCard.length + 1) * 10}px`;
    },
  },
});
.blockinputimg {
   width: 510px;
   height: 80px;
   background: #000;
   border-radius: 24px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.cart {
  width: 40px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px
}
.fieldones {
   font-weight: 700;
   font-size: 20px;
   color: #000; 
   text-align: center;
}
.fieldones::placeholder {
   color: rgba(0, 0, 0, 0.2);
   letter-spacing: -0.05em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="blockinputimg" id="app">
     <img src="..creditCart.svg" alt="🃏cartBlack" class="cart" :style="`opacity: ${numbCard.length >= 1 ? 1 : 0.2}`">
     <input 
        class="fieldones" 
        v-model="numbCard" 
        autofocus placeholder="Номер счета" 
        :style="`opacity: ${numbCard.length >= 1 ? 1 : 0.2}; width: ${this.inputWidth};`" 
      >
 </div>