Input 输入框

基本使用

template

<be-input
  class="input1"
  type="text"
  v-model="content"
  placeholder="请输入"
  placeholder-class="input1-placeholder"
>
</be-input>

script

import { ref } from 'vue';

const content = ref('');

style scoped

.input1 {
  background-color: #f2f2f2;
  font-size: 14px;

  .input1-placeholder {
    color: #bbbbbb;
  }
}

数字输入框

template

<be-input
  class="input2"
  type="number"
  v-model="content"
  placeholder="请输入-100 ~ 100的数字，包括小数"
  placeholder-class="input2-placeholder"
  allowNegative
  allowDecimal
  :min="-100"
  :max="100"
>
</be-input>

script

import { ref } from 'vue';

const content = ref();

style scoped

.input2 {
  background-color: #f2f2f2;
  font-size: 14px;

  .input2-placeholder {
    color: #bbbbbb;
  }
}

API

Props

属性名	说明	类型	默认值
rootClass	根节点 class	string	-
rootStyle	根节点 style	string	-
modelValue(v-model)	输入的值	string | number	-
type	输入框类型	text | number	text
allowNegative	是否允许负数（可以输入-），当type=number时生效	boolean	false
allowDecimal	是否允许小数，当type=number时生效	boolean	false
min	数字最小值，当type=number时生效	number	-Infinity
max	数字最大值，当type=number时生效	number	Infinity
pattern	自定义正则表达式验证输入值（内部使用 RegExp.test）	RegExp	-
trim	移除两端空白字符	boolean	false

Props extend uni-app input

属性名	说明	默认值
placeholder	属性说明	-
placeholderStyle	属性说明	-
placeholderClass	属性说明	-
password	属性说明	-
maxlength	属性说明	-

Events extend uni-app input

事件名称	说明
focus	事件说明
blur	事件说明