Skip to content
On this page

Input 输入框

大小尺寸 Size

Small
Medium
Large
html
<j-input size="small" v-model="ipt" label="Small"></j-input>
<j-input size="medium" v-model="ipt" label="Medium"></j-input>
<j-input type="password" size="large" v-model="ipt" label="Large"></j-input>

状态 Status

Writable
Readonly
Disabled
html
<j-input v-model="ipt" label="Writable"></j-input>
<j-input v-model="ipt" readonly label="Readonly"></j-input>
<j-input v-model="ipt" disabled label="Disabled"></j-input>

块级铺满 Block

Medium
html
<j-input block v-model="ipt" label="Medium"></j-input>

清除按钮 Clearable

Clearable
html
<j-input v-model="ipt" clearable label="Clearable"></j-input>

自定义校验器 CustomValidator

CustomValidator
html
<j-input
  :rules="[
    (val) => !!val || '不能为空',
    (val) => !((val as string).length < 6) || '不能小于6位数'
  ]"
  v-model="ipt"
  clearable
  label="CustomValidator"
></j-input>

源代码

jayden-ui > input