NumberInput 数字输入

使用指南

适用于6-8位的验证码、数字密码等特定输入场景。

代码演示

查看代码

<template>
  <div>
    <div style="height: 10px"/>
    <div class="item"><h3-number-input type="number" :length="3" v-model="numbers1"/></div>
    <div>
      Numbers : 
      {{numbers1}}
    </div>
    <div style="height: 50px"/>
    <div class="item"><h3-number-input type="password" :length="5" v-model="numbers2"/></div>
    <div>
      Numbers : 
      {{numbers2}}
    </div>
  </div>
</template>

<script>
import H3NumberInput from '@/components/h3-number-input/';

export default {
  components: {
    H3NumberInput
  },
  data() {
    return {
      toast: this.$toast,
      numbers1: '12',
      numbers2: '',
    }
  },
  methods: {
    onTouch1(event) {
      this.toast.show({text: JSON.stringify(event)});
    },
    onTouch2(event) {
      this.toast.show({text: JSON.stringify(event)});
    },
  }
};
</script>

<style lang="less">
.item {
  width: 100%;
}

</style>

API

Prop

属性	说明	类型	默认值
type	数字输入框类型， 只有一个值 password； 不设置时，显示数字；设置值为 password 时，隐藏数字，显示黑点	string	无
length	数字输入框长度，即可输入的最大数字个数	number	5
value	数字输入框的值，使用 v-model: 指令实现数据双向绑定	string	无