blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-24 15:39:15 +08:00
Code Issues Projects Releases Wiki Activity

docs(Field): add required demo

Browse Source
This commit is contained in:
陈嘉涵 2020-01-09 14:31:58 +08:00 committed by neverland
parent 6d3d976b50
commit 47e326fb2a
4 changed files with 40 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/field/README.md
View File

@ -107,12 +107,14 @@ Use `error` or `error-message` to show error info
<van-cell-group> <van-cell-group>
<van-field <van-field
v-model="username" v-model="username"
error
required
label="Username" label="Username"
placeholder="Username" placeholder="Username"
error
/> />
<van-field <van-field
v-model="phone" v-model="phone"
required
label="Phone" label="Phone"
placeholder="Phone" placeholder="Phone"
error-message="Invalid phone" error-message="Invalid phone"

6
src/field/README.zh-CN.md
View File

@ -114,18 +114,20 @@ export default {
### 错误提示 ### 错误提示
通过`error`或者`error-message`属性增加对应的错误提示 设置`required`属性表示这是一个必填项，可以配合`error`或`error-message`属性显示对应的错误提示
```html ```html
<van-cell-group> <van-cell-group>
<van-field <van-field
v-model="username" v-model="username"
error
required
label="用户名" label="用户名"
placeholder="请输入用户名" placeholder="请输入用户名"
error
/> />
<van-field <van-field
v-model="phone" v-model="phone"
required
label="手机号" label="手机号"
placeholder="请输入手机号" placeholder="请输入手机号"
error-message="手机号格式错误" error-message="手机号格式错误"

2
src/field/demo/index.vue
View File

@ -67,12 +67,14 @@
<van-cell-group> <van-cell-group>
<van-field <van-field
v-model="username" v-model="username"
required
:label="$t('username')" :label="$t('username')"
:placeholder="$t('usernamePlaceholder')" :placeholder="$t('usernamePlaceholder')"
error error
/> />
<van-field <van-field
v-model="phone2" v-model="phone2"
required
:label="$t('phone')" :label="$t('phone')"
:placeholder="$t('phonePlaceholder')" :placeholder="$t('phonePlaceholder')"
:error-message="$t('phoneError')" :error-message="$t('phoneError')"

33
src/field/test/__snapshots__/demo.spec.js.snap
View File

@ -41,6 +41,12 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>文本</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" readonly="readonly" class="van-field__control"></div>
</div>
</div>
<div class="van-cell van-field"> <div class="van-cell van-field">
<div class="van-cell__title van-field__label"><span>文本</span></div> <div class="van-cell__title van-field__label"><span>文本</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
@ -51,13 +57,36 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-cell-group van-hairline--top-bottom"> <div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-field van-field--error"> <div class="van-cell van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-smile-o">
<!----></i></div>
<div class="van-cell__title van-field__label"><span>文本</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="显示图标" class="van-field__control">
<div class="van-field__right-icon"><i class="van-icon van-icon-warning-o">
<!----></i></div>
</div>
</div>
</div>
<div class="van-cell van-field">
<div class="van-field__left-icon"><i class="van-icon van-icon-music-o">
<!----></i></div>
<div class="van-cell__title van-field__label"><span>文本</span></div>
<div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="显示清除图标" class="van-field__control"></div>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--required van-field van-field--error">
<div class="van-cell__title van-field__label"><span>用户名</span></div> <div class="van-cell__title van-field__label"><span>用户名</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div> <div class="van-field__body"><input type="text" placeholder="请输入用户名" class="van-field__control"></div>
</div> </div>
</div> </div>
<div class="van-cell van-field"> <div class="van-cell van-cell--required van-field">
<div class="van-cell__title van-field__label"><span>手机号</span></div> <div class="van-cell__title van-field__label"><span>手机号</span></div>
<div class="van-cell__value"> <div class="van-cell__value">
<div class="van-field__body"><input type="text" placeholder="请输入手机号" class="van-field__control"></div> <div class="van-field__body"><input type="text" placeholder="请输入手机号" class="van-field__control"></div>