element-uiのrulesのmin, maxは文字列のrules - もがき系プログラマの日常

はじめに

こんばんは。

今回も簡単な備忘録です。

現在 element-uiを使用したwebアプリケーションを開発しています。

atomic designの設計を組み込もうとして、時間が足らず結局導入断念したのですが、分担を分けて細かく設計できるところはしていこうくらいのゆるいのりで、対応しています。

今回作業して少しだけハマったのは、 numberのみの入力を許可する AppInputNumber.vue というコンポーネントを作成したときでした。

element-uiでは、formを作成するときに、rulesというものを設定でき、そのrulesを特定のタイミングでvalidatorとして適用できます。

今回のコンポーネントは numberのみ(数値のみ)の入力しかさせたくないコンポーネントだったので、formのtypeもnumberにしていました。

最初はなんの考えもなくrules の min, maxを使って、numberの最小値、最大値を設定していたのですが、後々rulesのmin, maxは「文字数の制限」ということがわかりました...(調べてない男)

結局最小値・最大値は inputタグの min, maxでの設定になってしまいました。

今回の要件としてはマイナス値を許容させてたくなかったので minが0以上になるように設定したのですが、結局コピペで通過されちゃうので、苦肉の策で rulesのパターンで乗り切りました。

コード

<template>
  <el-form-item :label="label" :prop="name" :rules="rules">
    <el-input
      type="number"
      :placeholder="placeholder"
      :disabled="disabled"
      v-model="number"
      :min="minRule"
      :max="max"
      clearable
    />
  </el-form-item>
</template>

<script>
export default {
  props: {
    model: { required: true, default: null },
    name: { type: String, required: true, default: null },
    label: { type: String, default: null },
    placeholder: { type: String, default: '数値を入力して下さい' },
    required: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    min: { type: Number, default: 0 },
    max: { type: Number }
  },
  data() {
    return {
      rules: [
        {
          required: this.required,
          trigger: 'blur',
          message: `${this.label}は必須項目です`
        },
        {
          pattern: /^(0|[1-9]|[1-9][0-9]+)$/,
          trigger: 'blur',
          message: `${this.label}は整数値以外は受け付けません`
        }
      ]
    }
  },
  computed: {
    number: {
      /**
       * number Getter
       * @returns {number}
       */
      get() {
        return this.model
      },
      /**
       * number Setter
       * @param {number}
       */
      set(value) {
        this.$emit('update:model', value)
      }
    },
    /**
     * 最小値ルールを取得
     * マイナス値は許容しない
     * @returns {number}
     */
    minRule() {
      return this.min < 0 ? 0 : this.min
    }
  }
}
</script>

なんかうまいやり方あったらおしえてください。

あと、element-ui見た目も綺麗で便利でいいのですが、test囲うとすると結構ハマるポイントも有りました。

それも今度あげようと思います。