순서 관리 프로그램 junban 에서 만든 구성 요소를 공개하고 싶습니다.
명확한 구성 요소 분배를 목적으로 하는 것이 아니라 프로젝트에 따라 복제하고 문자와 아이콘 등은 매번 맞춤형 제작을 목적으로 하기 때문에 슬로트가 더 유연하다고 생각하지 않습니다.

기능 개요

숫자의 구성 요소를 선택할 수 있습니다.
스마트폰으로 숫자(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>

발리

레프 켜줄게this.refs.hoge.checkValidate() 같은 방법으로 발리 데이를 진행할 수 있어.