cv-input-number 数字输入框 ¶

简要 ¶

属性为number的input
数字输入键盘 | 均支持，注意iOS上app-vue弹出的数字键盘并非9宫格方式
数字输入框，一般和表单配合使用，默认为实心白色背景。

示例 ¶

vue

<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">cv-input-number</view>
      <view class="components-title-d">数字输入框</view>
    </view>
    <cv-form-base ref="refFormBase" :rules="formRules" :model="formData" style="padding: 0 10px">
      <cv-form-item label="手机号" required>
        <cv-input-number v-model="formData.phone" placeholder="请输入您的手机号码" clearable />
      </cv-form-item>
      <cv-form-item label="手机号" labelPosition="top">
        <cv-input-number v-model="formData.phone" placeholder="请输入您的手机号码" clearable />
        <template v-slot:tip>请输入11位大陆手机号</template>
      </cv-form-item>
      <cv-form-item label="数字" labelPosition="top">
        <cv-input-number v-model="formData.number" clearable>
          <template v-slot:append>cm</template>
        </cv-input-number>
        <template v-slot:tip>请输入数字</template>
      </cv-form-item>
    </cv-form-base>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formRules: {},
      formData: {
        phone: ''
      }
    };
  },
  onLoad() {
    setTimeout(() => {
      this.$testReqMock().then((res) => {
        this.formData.phone = '139';
      });
      console.log('模拟请求数据', this.formData);
    }, 1000);
  },
  methods: {
    bindTimeChange(e) {},
    clickTest(e) {
      console.log(this.formData.phone);
    }
  }
};
</script>

属性 ¶

属性名	类型	默认值	说明
v-model	String	-	数据双向绑定
placeholder	String	-	占位符
disabled	Boolen	false	是否禁止
maxlength	Number	-1	输入长度限制
clearable	Boolean	false	是否显示一键清空按钮