Случайный выбор (randomizer)

Создание интерактивных элементов на чистом JavaScript может превратиться в многострочную рутину по обработке событий, обновлению DOM и управлению состоянием. Фреймворк Vue.js кардинально упрощает эту задачу. Его реактивная система данных и декларативный подход позволяют описывать логику и внешний вид компонента в одной понятной связке, а об обновлении интерфейса позаботится сам Vue.

Яркий пример — этот компонент «Случайный Выбор» (рандомайзер). Он наглядно демонстрирует, как с минимальным количеством кода на Vue можно создать динамический, отзывчивый и визуально эффектный инструмент для посетителей вашего сайта. Просто посмотрите, как он работает!

Вводите варианты, разделяя их запятой (',').

Закончив, нажмите Enter.

<div id="app" class="app">
  <hgroup class="app__title">    
    <p>Вводите варианты, разделяя их запятой (',').</p>
    <p>Закончив, нажмите Enter.</p>
  </hgroup>
  <textarea class="app__textarea" placeholder="Вводите здесь..." v-model="text"></textarea>
  <p class="app__choices">
    <template v-for="(item,index) in splitChoices" :key="index">
      <span v-if="item !== ''" class="app__choices-item">{{ item }}</span>
    </template>
  </p>
  <p v-if="text.length === 0" class="app__choices">
    <template v-for="(item,index) in arr" :key="index">
      <span class="app__choices-item" :class="{picked: index === picked}">{{ item }}</span>
    </template>
  </p>
</div>

.app {
  width: min(600px, 100%);  
}
.app__title {
  margin-bottom: 10px;  
  text-align: center;
}
.app__textarea {
  width: 100%;
  min-height: 150px;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 18px;
  border: 1px solid #999;
}
.app__textarea::-moz-placeholder {
  color: #a6acaf;
}
.app__textarea::placeholder {
  color: #a6acaf;
}
.app__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.app__choices-item {
  padding: 5px 15px;
  color: #fff;
  background-color: #e74c3c;
  font-weight: 500;  
  border-radius: 100vw;
}
.app__choices-item.picked {
  background-color: #27ae60;  
}
.app__choices-item.hidden {
  display: none;
}

const {createApp, ref, computed, onMounted} = Vue
createApp({
  setup() {
    const arr = ref([])
    const text = ref('')
    const picked = ref(undefined)
    const splitChoices = computed(() => {
      let temp = text.value.split(',')
      temp = temp.map(el => el.trim())
      return temp
    })
    const selectRandomItem = () => {
      picked.value = Math.floor(Math.random() * arr.value.length)
    }
    onMounted(() => {
      window.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          arr.value = text.value.split(',')
          arr.value = arr.value.map(el => el.trim())
          arr.value = arr.value.filter(el => el !== '')
          setTimeout(() => {
            text.value = ''
          }, 0)
          let intId = setInterval(() => {
            selectRandomItem()
          }, 100)
          setTimeout(() => {
            clearInterval(intId)
          }, 3000)
        }
      })
    })
    return { arr, text, picked,  splitChoices,  selectRandomItem}
  }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Как работает этот код? Пояснения

Реактивность (ref, computed): Переменные arr, text и picked являются реактивными. Когда они меняются (например, text при вводе или picked при выборе), Vue автоматически обновляет связанные с ними части интерфейса. splitChoices — вычисляемое свойство, которое динамически преобразует введённый текст в массив для превью.
Двустороннее связывание (v-model): Директива v-model="text" на textarea связывает её содержимое с реактивной переменной text. Ввод данных пользователем сразу меняет состояние приложения.
Условный рендеринг v-if и циклы v-for: Шаблон гибко меняется в зависимости от состояния. v-if="text.length === 0" скрывает финальные варианты, пока идёт ввод. v-for используется для отрисовки списка вариантов как в превью, так и в финальном виде.
Динамические классы :class: Класс picked динамически добавляется к элементу, чей индекс совпадает с picked.value. Это меняет цвет фона на зелёный, визуально выделяя выбранный случайным образом вариант.
Обработка событий: В хуке onMounted глобально отслеживается нажатие клавиши Enter. При срабатывании происходит основная логика: парсинг вариантов, запуск и остановка «лотереи» с помощью setInterval/setTimeout.

Нужен уникальный и креативный интерактив для вашего сайта?

Этот компонент — лишь небольшая демонстрация возможностей современной фронтенд-разработки. Мы готовы создать для вас любой интерактивный элемент: от сложных динамических интерфейсов и анимированных виджетов до полномасштабных веб-приложений.

Обращайтесь! Наша веб-студия воплотит ваши идеи в живой, вовлекающий код, который удержит внимание пользователей и решит их задачи.

Предыдущий Следующий