数字输入框

基础数字输入框

<template>
  <div>
    <t-input-number
      v-model="value"
      theme="row"
      size="medium"
      :max="15"
      :min="-2"
      :disabled="false"
      :on-change="onChange"
      :on-focus="onFocus"
      :on-blur="onBlur"
      :on-enter="onKeydownEnter"
      :on-keydown="onKeydown"
      :on-keyup="onKeyup"
      :on-keypress="onKeypress"
      @change="handleChange"
      @focus="handleFocus"
      @blur="handleBlur"
      @enter="handleKeydownEnter"
      @keydown="handleKeydown"
      @keyup="handleKeyup"
      @keypress="handleKeypress"
    ></t-input-number>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 3,
      onChange: (v, ctx) => {
        console.info('onChange', v, ctx);
      },
      onFocus: (v, ctx) => {
        console.info('onFocus', v, ctx);
      },
      onBlur: (v, ctx) => {
        console.info('onBlur', v, ctx);
      },
      onKeydownEnter: (v, ctx) => {
        console.info('onEnter', v, ctx);
      },
      onKeydown: (v, ctx) => {
        console.info('onKeydown', v, ctx);
      },
      onKeyup: (v, ctx) => {
        console.info('onKeyup', v, ctx);
      },
      onKeypress: (v, ctx) => {
        console.info('onKeypress', v, ctx);
      },
    };
  },
  methods: {
    handleChange(v, ctx) {
      console.info('change', v, ctx);
    },
    handleFocus(v, ctx) {
      console.info('focus', v, ctx);
    },
    handleBlur(v, ctx) {
      console.info('blur', v, ctx);
    },
    handleKeydownEnter(v, ctx) {
      console.info('enter', v, ctx);
    },
    handleKeydown(v, ctx) {
      console.info('keydown', v, ctx);
    },
    handleKeyup(v, ctx) {
      console.info('keyup', v, ctx);
    },
    handleKeypress(v, ctx) {
      console.info('keypress', v, ctx);
    },
  },
};
</script>

显示代码 复制代码 复制代码

不同尺寸数字输入框

<template>
  <div>
    <t-input-number
      v-model="value1"
      size="small"
      :max="15"
      :min="-2"
    ></t-input-number>

    <t-input-number
      style="margin: 0 50px;"
      v-model="value2"
      :max="15"
      :min="-2"
    ></t-input-number>

    <t-input-number
      v-model="value3"
      size="large"
      :max="15"
      :min="-2"
    ></t-input-number>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 3,
      value2: 3,
      value3: 3,
    };
  },
  methods: {},
};
</script>

显示代码 复制代码 复制代码

右侧调整数值的数字输入框

<template>
  <div>
    <t-input-number
      v-model="value"
      theme="column"
      :max="15"
      :min="-2"
    ></t-input-number>
    
    <t-input-number
      size="large"
      v-model="value"
      theme="column"
      :max="15"
      :min="-2"
    ></t-input-number>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 3,
    };
  },
};
</script>

显示代码 复制代码 复制代码