[vue] スマホ重視な数字を選択できるコンポーネント

順番管理アプリのjunbanで作成したコンポーネントを公開していこうと思います。

ちゃんとしたコンポーネント配信が目的ではなく、プロジェクト毎にコピペして、文字とかアイコンとかはその都度カスタマイズを目的としてますので、ここslotにした方が柔軟性が～とかは考えないです。

機能概要

数字を選択できるコンポーネントです。
スマホで数字入力(input[type=number]とか)はスマホのキーボードが表示されて嫌なので作りました。

テスト環境

• "nuxt": "^2.7.1"
• lodash使います。

コンポーネント

<template lang="pug">
  .select_numbers
    .select_number(
      v-for="num in selects"
      :class="{active: num == myValue, error: isCheckValidate && !validete}"
      @click="select(num)"
    )
      .number {{num}}
</template>
<script>
import { range } from 'lodash';

export default {
  props: {
    required: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Number,
      require: false,
      default: null,
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 10,
    },
    step: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      myValue: null,
      isCheckValidate: false,
    };
  },
  computed: {
    selects() {
      return range(this.min, this.max + 1, this.step);
    },
    validete() {
      if (this.required) {
        if (this.myValue || this.myValue === 0) {
          return true;
        }
        return false;
      }
      return true;
    },
  },
  mounted() {
    if (this.value) this.myValue = this.value;
  },
  methods: {
    select(num) {
      this.myValue = num;
      this.$emit('value', this.myValue);
    },
    checkValidate() {
      this.isCheckValidate = true;
      return this.validete;
    },
  },
};
</script>
<style lang="sass">
// 色々カスタマイズしてたので、内容は適当で、重要そうなとこだけピックアップ
.select_numbers
  position: relative
  display: flex
  flex-direction: row
  justify-content: flex-start
  flex-wrap: nowrap
  overflow-x: scroll
.select_number
  cursor: pointer
  flex: 0 0 auto
  width: 44px
</style>

使い方

<template lang="pug">
...
selectNumber(
  :value="value"
  @value="answer = $event"
  :min="min"
  :max="max"
  :required="required"
)
...
</template>

バリデーション

refをつけてあげて、this.refs.hoge.checkValidate()とかでバリデーションできます。