2019-12-11 17:47:30 +08:00

100 lines
2.2 KiB
Plaintext

<demo-block title="基础用法">
<van-cell-group>
<van-field value="{{ value }}" placeholder="请输入用户名" border="{{ false }}" clearable />
</van-cell-group>
</demo-block>
<demo-block title="自定义类型">
<van-cell-group>
<van-field
value="{{ username }}"
label="用户名"
placeholder="请输入用户名"
clearable
right-icon="question-o"
right-icon-class="custom-icon"
required
bind:click-icon="onClickIcon"
/>
<van-field
value="{{ password }}"
type="password"
label="密码"
placeholder="请输入密码"
required
border="{{ false }}"
/>
</van-cell-group>
</demo-block>
<demo-block title="禁用输入框">
<van-cell-group>
<van-field
value="输入框已禁用"
label="用户名"
left-icon="contact"
disabled
border="{{ false }}"
/>
</van-cell-group>
</demo-block>
<demo-block title="错误提示">
<van-cell-group>
<van-field
value="{{ username2 }}"
label="用户名"
placeholder="请输入用户名"
error
/>
<van-field
value="{{ phone }}"
label="手机号"
placeholder="请输入手机号"
error-message="手机号格式错误"
border="{{ false }}"
/>
</van-cell-group>
</demo-block>
<demo-block title="内容对齐方式">
<van-cell-group>
<van-field
value="{{ username3 }}"
label="用户名"
placeholder="请输入用户名"
input-align="right"
/>
</van-cell-group>
</demo-block>
<demo-block title="高度自适应">
<van-cell-group>
<van-field
value="{{ message }}"
label="留言"
type="textarea"
placeholder="请输入留言"
rows="1"
autosize
border="{{ false }}"
/>
</van-cell-group>
</demo-block>
<demo-block title="插入按钮">
<van-cell-group>
<van-field
value="{{ sms }}"
center
clearable
label="短信验证码"
placeholder="请输入短信验证码"
use-button-slot
border="{{ false }}"
>
<van-button slot="button" size="small" type="primary" custom-class="button">发送验证码</van-button>
</van-field>
</van-cell-group>
</demo-block>