Java, UX, HTML, CSS, WEB-design

Создание пользовательских входных данных с помощью Vue.js

[ad_1]

  • Джозеф Циммерман

  • 0 Комментарии

Создание пользовательских входных данных с помощью Vue.js

  • 10 минут чтения

  • Vue, фреймворки, JavaScript

Краткое резюме ↬

Это руководство призвано помочь вам понять, как v-model работает с собственными входными данными и пользовательскими компонентами по умолчанию. Кроме того, вы узнаете, как создавать собственные флажки и переключатели, которые имитируют работу v-model.

В частности, входные данные формы, как правило, имеют много сложностей, которые вы хотели бы скрыть в компоненте, таких как пользовательский дизайн, метки, проверка, справочные сообщения и обеспечение того, чтобы каждая из этих частей находилась в правильном порядке, чтобы они отображались. правильно.

Вдобавок ко всему, Vue имеет встроенную директиву под названием v-model тот имитирует двустороннюю привязку путем привязки значения и захвата входных событий. Если вы собираетесь создать пользовательский компонент ввода, вам определенно понадобится поддержка v-model директива.

К сожалению, когда я искал примеры настраиваемых полей ввода в Vue для переключателей или флажков, они либо не принимали v-model во внимание вообще, или они не реализовали его правильно. Существует некоторая приличная документация для пользовательского ввода текста, но, поскольку она не объясняет настройку радио или флажков, мы обсудим это здесь.

Написание повторно используемых модулей в ES6

Вы рады воспользоваться новыми возможностями языка JavaScript но не уверен где для начала или как? Читать статью по теме →

Надеюсь, к концу этого урока я помогу вам:

  1. понять, как v-model работает с нативным вводом, ориентируясь в первую очередь на радио и флажки,
  2. понять, как v-model работает на пользовательских компонентах по умолчанию,
  3. Узнайте, как создавать собственные флажки и переключатели, которые имитируют v-model работает на них изначально.

Краткое примечание, прежде чем мы начнем: код ES2015+ будет использоваться во всех примерах кода. Я также предпочитаю синтаксис Single File Component использованию Vue.component или new Vue.

Еще после прыжка! Продолжить чтение ниже ↓

Как v-model Работать нормально?

Официальная документация Vue на самом деле довольно хороша по этой теме, но есть несколько небольших белых пятен. В любом случае, мы постараемся подробно осветить его здесь.

По сути, v-model это просто сокращенная директива, которая дает нам двустороннюю привязку данных, а сокращенный код зависит от того, для какого типа ввода он используется.

Текстовые поля

<div><input v-model="message" placeholder="edit me">
<p>Message: {{ message }}</p>

<!-- OR -->

<p>message:</p>
<p style="white-space: pre-line">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>

При использовании текста input (включая такие виды, как email, numberи др.) или textarea, v-model="varName" эквивалентно :value="varName" @input="e => varName = e.target.value". Это означает, что значение входа установлено равным varName после каждого обновления ввода varName обновляется до значения ввода. нормальный select элемент будет действовать так же, хотя multiple выбор будет другим.

Радио-кнопки

Итак, что насчет радиокнопок?

<div><input type="radio" value="One" v-model="picked">
<input type="radio" value="Two" v-model="picked">
<span>Picked: {{ picked }}</span>
</div>

Это эквивалентно:

<div><input type="radio" value="One" :checked="picked == 'One'" @change="e => picked = e.target.value">
<input type="radio" value="Two" :checked="picked == 'Two'" @change="e => picked = e.target.value">
<span>Picked: {{ picked }}</span>
</div>

Обратите внимание, как v-model даже не трогает value больше. Он все еще делает то же самое в change обработчик события (хотя он был изменен на change вместо input), но теперь он определяет, checked должно быть истинным или ложным в зависимости от того, picked совпадает со значением этого переключателя.

Флажки

О флажках говорить немного сложнее, потому что они имеют два разных поведения в зависимости от того, существует ли только один флажок с заданным значением. v-model или несколько.

Если вы используете один флажок, v-model будет рассматривать его как логическое значение и игнорировать value.

<div><input type="checkbox" value="foo" v-model="isChecked">
</div>

такой же как…

<div><input type="checkbox" value="foo" :checked="!!isChecked" @change="e => isChecked = e.target.checked">
</div>

Если вы хотите, чтобы это было чем-то другим, чем true и false, вы можете использовать true-value и false-value атрибут, который определяет, какие значения будут установлены для вашей модели, когда флажок установлен или нет.

<div><input type="checkbox" value="foo" v-model="isChecked" true-value="1" false-value="0">
</div>

такой же как…

<div><input type="checkbox" value="foo" :checked="isChecked == '1'" @change="e => isChecked = e.target.checked ? '1' : '0'">
</div>

Это почти все для примеров с одним флажком. Если у вас есть несколько флажков, которые совместно используют модель, то эти флажки будут заполнять массив значениями всех отмеченных флажков, но убедитесь, что модель, которую вы передаете, уже является массивом, иначе вы получите странное поведение. Так же true-value и false-value атрибуты больше ни на что не влияют.

<div><template>
  <div>
    <input type="checkbox" value="foo" v-model="checkedVals">
    <input type="checkbox" value="bar" v-model="checkedVals">
    <input type="checkbox" value="baz" v-model="checkedVals">
  </div>
</template>
<script><span class="javascript">
  export default {
    data: () => ({
      checkedVals: ['bar']
    })
  }
</script>
</div>

Эквивалент немного сложнее сохранить внутри шаблона, поэтому я перенесу часть логики в методы компонента:

<div><template>
  <div>
    <input type="checkbox" value="foo" v-model="checkedVals">
    <input type="checkbox" value="bar" v-model="checkedVals">
    <input type="checkbox" value="baz" v-model="checkedVals">
  </div>
</template>
<script><span class="javascript">
  export default {
    data() {
      return { checkedVals: ['bar'] }
    },
    methods: {
      shouldBeChecked(val) {
        return this.checkedVals.includes(val)
      },
      updateVals(e) {
        let isChecked = e.target.checked
        let val = e.target.value

        if (isChecked) {
          this.checkedVals.push(val)
        } else {
          this.checkVals.splice(this.checkedVals.indexOf(val), 1)
        }
      }
    }
  }
</script>
</div>

Это намного сложнее, чем то, что мы видели раньше, но если разобрать, то не так уж и плохо. shouldBeChecked является true когда значение этого флажка включено в массив и false если это не так. updateVals добавляет значение флажка в массив, когда он проверяется, и удаляет его, когда он снимается.

Как v-model Работать над компонентами?

Поскольку Vue не знает, как должен работать ваш компонент, или пытается ли он заменить определенный тип ввода, он обрабатывает все компоненты одинаково в отношении v-model. На самом деле он работает точно так же, как и для ввода текста, за исключением того, что в обработчике событий он не ожидает, что ему будет передан объект события, а ожидает, что значение будет передано прямо ему. Так…

<div><my-custom-component v-model="myProperty" />
</div>

…то же самое, что…

<div><my-custom-component :value="myProperty" @input="val => myProperty = val" />
</div>

Компонент может изменить это в небольшой степени, используя model имущество:

<div>export default {
  name: 'my-custom-component',
  model: {
    prop: 'foo',
    event: 'bar'
  },
  // ...
}
</div>

v-model будет смотреть на эти свойства и вместо использования value атрибут, он будет использовать атрибут, который вы указали в prop и вместо того, чтобы слушать input событие, оно будет использовать событие, указанное вами в event. Итак, выше my-custom-component пример фактически расширится до следующего:

<div><my-custom-component :foo="myProperty" @bar="val => myProperty = val" />
</div>

Это хорошо, но если мы делаем собственное радио или флажок, это не очень хорошо работает. Однако приложив некоторые усилия, мы можем изменить логику, которая v-model использует на радио и флажках внутри наших пользовательских компонентов.

Поддержка v-model На пользовательских радиостанциях

По сравнению с флажком, пользовательские радио довольно просты. Вот очень простое пользовательское радио, которое я строю, которое просто обертывает input на этикетке и принимает label свойство, чтобы добавить текст метки.

<div><template>
  <label>
    <input type="radio" :checked="shouldBeChecked" :value="value" @change="updateInput">
    {{ label }}
  </label>
</template>
<script><span class="javascript">
export default {
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    value: {
      type: <span class="hljs-built_in">String,
    },
    modelValue: {
      default: ""
    },
    label: {
      type: <span class="hljs-built_in">String,
      required: true
    },
  },
  computed: {
    shouldBeChecked() {
      return this.modelValue == this.value
    }
  }
  methods: {
    updateInput() {
      this.$emit('change', this.value)
    }
  }
}
</script>
</div>

Примечание: я только включил props которые помогают объяснить, как они должны работать с v-model, но input теги могут использовать несколько других атрибутов (например, name или disabled), поэтому убедитесь, что вы создали все props вам нужно и передайте их input. Вы также захотите рассмотреть доступность, добавив атрибуты WAI-ARIA, а также используя слоты для добавления контента, а не реквизиты, как я сделал здесь с label.

Вы можете подумать, что, поскольку я не включил name в этом примере группа радиостанций фактически не будет синхронизироваться друг с другом. На самом деле обновление модели, в свою очередь, обновит другие переключатели, которые используют эту модель, поэтому им не нужно совместно использовать имя, как в простых HTML-формах, если они используют одну и ту же модель.

Поддержка v-model На пользовательских флажках

Создание пользовательских флажков заметно сложнее, чем радиокнопок, в первую очередь потому, что мы должны поддерживать два разных варианта использования: один флажок true/false (который может использовать или не использовать true-value и/или false-value) и несколько флажков, которые объединяют все проверенные значения в массив.

Так как же определить, какой это вариант использования? Вы можете подумать, что нам нужно определить, есть ли другие флажки с таким же значением. name атрибут, но на самом деле это не то, что использует встроенная система Vue. Как и радиоприемники, Vue не берет name атрибут во внимание вообще. Это используется только при изначальной отправке формы. Итак, вы можете подумать, что он определяет это на основе того, есть ли другие флажки, которые используют ту же модель, но это тоже не так. Это определяется тем, является ли модель массивом. Вот и все.

Таким образом, код будет структурирован аналогично коду пользовательского переключателя, но внутри shouldBeChecked и updateInput логика будет разделяться в зависимости от того, modelValue представляет собой массив.

<div><template>
  <label>
    <input type="checkbox" :checked="shouldBeChecked" :value="value" @change="updateInput">
    {{ label }}
  </label>
</template>
<script><span class="javascript">
export default {
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    value: {
      type: <span class="hljs-built_in">String,
    },
    modelValue: {
      default: false
    },
    label: {
      type: <span class="hljs-built_in">String,
      required: true
    },
    // We set `true-value` and `false-value` to the default true and false so
    // we can always use them instead of checking whether or not they are set.
    // Also can use camelCase here, but hyphen-separating the attribute name
    // when using the component will still work
    trueValue: {
      default: true
    },
    falseValue: {
      default: false
    }
  },
  computed: {
    shouldBeChecked() {
      if (this.modelValue instanceof <span class="hljs-built_in">Array) {
        return this.modelValue.includes(this.value)
      }
      // Note that `true-value` and `false-value` are camelCase in the JS
      return this.modelValue === this.trueValue
    }
  },
  methods: {
    updateInput(event) {
      let isChecked = event.target.checked

      if (this.modelValue instanceof <span class="hljs-built_in">Array) {
        let newValue = [...this.modelValue]

        if (isChecked) {
          newValue.push(this.value)
        } else {
          newValue.splice(newValue.indexOf(this.value), 1)
        }

        this.$emit('change', newValue)
      } else {
        this.$emit('change', isChecked ? this.trueValue : this.falseValue)
      }
    }
  }
}
</script>
</div>

И вот оно. Однако может быть лучше разделить это на два разных компонента: один для обработки одного переключателя true/false и один для использования в списках параметров. Это позволило бы более точно следовать принципу единой ответственности, но если вы ищете замену флажкам, это то, что вам нужно (плюс добавление всех других полезных атрибутов и пользовательских функций). вы можете захотеть).

Дальнейшее чтение

Есть еще много всего, что можно узнать о пользовательских элементах ввода, компонентах Vue и Vue в целом. Я рекомендую ознакомиться с некоторыми из этих ресурсов.

  • Наборы компонентов Awesome-Vue
    Awesome-Vue — это огромный список проектов и ресурсов, связанных с Vue, поэтому не стесняйтесь просматривать все в этом списке, но, в частности, я хочу указать на библиотеки пользовательского интерфейса и наборы компонентов, потому что почти все они имеют примеры флажков. и Radios, на которые вы можете посмотреть, если хотите погрузиться в их исходный код.
  • Куратор Vue
    Этот список похож на Awesome-Vue, но он более строго подобран, поэтому вы знаете, что на все в списке стоит взглянуть.
  • Руководство по компонентам Vue
    Официальное руководство по Vue — отличное место для изучения основ обо всем, что связано с Vue.
  • Документация API Vue
    В этой документации вы узнаете действительно глубокие детали Vue.
Сокрушительная редакция
(рб, вф, ал, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Создание пользовательских входных данных с помощью Vue.js

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье Создание пользовательских входных данных с помощью Vue.js

Название: Создание пользовательских входных данных с помощью Vue.js . Краткое описание: [ad_1] ⭐ Джозеф . Дата публикации: 30.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»