docs: prettier all markdown files
This commit is contained in:
chenjiahan
neverland
+62
-68
@@ -25,10 +25,10 @@ The value of field is bound with v-model.
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
value: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Type
|
||||
@@ -51,10 +51,10 @@ export default {
|
||||
text: '',
|
||||
digit: '',
|
||||
number: '',
|
||||
password: ''
|
||||
password: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Disabled
|
||||
@@ -92,9 +92,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '123'
|
||||
value2: '123',
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@@ -126,13 +126,7 @@ Use `error` or `error-message` to show error info
|
||||
Use button slot to insert button
|
||||
|
||||
```html
|
||||
<van-field
|
||||
v-model="sms"
|
||||
center
|
||||
clearable
|
||||
label="SMS"
|
||||
placeholder="SMS"
|
||||
>
|
||||
<van-field v-model="sms" center clearable label="SMS" placeholder="SMS">
|
||||
<template #button>
|
||||
<van-button size="small" type="primary">Send SMS</van-button>
|
||||
</template>
|
||||
@@ -156,15 +150,15 @@ Use `formatter` prop to format the input value
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(value) {
|
||||
return value.replace(/\d/g, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Auto Resize
|
||||
@@ -215,67 +209,67 @@ Use `input-align` prop to align the input value
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model (value) | Field value | *number \| string* | - |
|
||||
| label | Field label | *string* | - |
|
||||
| name `v2.5.0` | Name | *string* | - |
|
||||
| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | *string* | `text` |
|
||||
| size | Size，can be set to `large` | *string* | - |
|
||||
| maxlength | Max length of value | *number \| string* | - |
|
||||
| placeholder | Placeholder | *string* | - |
|
||||
| border | Whether to show inner border | *boolean* | `true` |
|
||||
| disabled | Whether to disable field | *boolean* | `false` |
|
||||
| readonly | Whether to be readonly | *boolean* | `false` |
|
||||
| required | Whether to show required mark | *boolean* | `false` |
|
||||
| clearable | Whether to be clearable | *boolean* | `false` |
|
||||
| clickable | Whether to show click feedback when clicked | *boolean* | `false` |
|
||||
| is-link | Whether to show link icon | *boolean* | `false` |
|
||||
| autofocus | Whether to auto focus, unsupported in iOS | *boolean* | `false` |
|
||||
| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` |
|
||||
| error | Whether to show error info | *boolean* | `false` |
|
||||
| error-message | Error message | *string* | - |
|
||||
| formatter `v2.4.2` | Input value formatter | *Function* | - |
|
||||
| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | *string* | `right` |
|
||||
| label-class | Label className | *any* | - |
|
||||
| label-width | Label width | *number \| string* | `90px` |
|
||||
| label-align | Label align, can be set to `center` `right` | *string* | `left` |
|
||||
| input-align | Input align, can be set to `center` `right` | *string* | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | *string* | `left` |
|
||||
| autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | *boolean \| object* | `false` |
|
||||
| left-icon | Left side icon name | *string* | - |
|
||||
| right-icon | Right side icon name | *string* | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | *string* | `van-icon` |
|
||||
| rules `v2.5.0` | Form validation rules | *Rule[]* | - |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model (value) | Field value | _number \| string_ | - |
|
||||
| label | Field label | _string_ | - |
|
||||
| name `v2.5.0` | Name | _string_ | - |
|
||||
| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | _string_ | `text` |
|
||||
| size | Size，can be set to `large` | _string_ | - |
|
||||
| maxlength | Max length of value | _number \| string_ | - |
|
||||
| placeholder | Placeholder | _string_ | - |
|
||||
| border | Whether to show inner border | _boolean_ | `true` |
|
||||
| disabled | Whether to disable field | _boolean_ | `false` |
|
||||
| readonly | Whether to be readonly | _boolean_ | `false` |
|
||||
| required | Whether to show required mark | _boolean_ | `false` |
|
||||
| clearable | Whether to be clearable | _boolean_ | `false` |
|
||||
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
|
||||
| is-link | Whether to show link icon | _boolean_ | `false` |
|
||||
| autofocus | Whether to auto focus, unsupported in iOS | _boolean_ | `false` |
|
||||
| show-word-limit `v2.2.8` | Whether to show word limit, need to set the `maxlength` prop | _boolean_ | `false` |
|
||||
| error | Whether to show error info | _boolean_ | `false` |
|
||||
| error-message | Error message | _string_ | - |
|
||||
| formatter `v2.4.2` | Input value formatter | _Function_ | - |
|
||||
| arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` |
|
||||
| label-class | Label className | _any_ | - |
|
||||
| label-width | Label width | _number \| string_ | `90px` |
|
||||
| label-align | Label align, can be set to `center` `right` | _string_ | `left` |
|
||||
| input-align | Input align, can be set to `center` `right` | _string_ | `left` |
|
||||
| error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
|
||||
| autosize | Textarea auto resize，can accpet an object,<br>e.g. { maxHeight: 100, minHeight: 50 } | _boolean \| object_ | `false` |
|
||||
| left-icon | Left side icon name | _string_ | - |
|
||||
| right-icon | Right side icon name | _string_ | - |
|
||||
| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` |
|
||||
| rules `v2.5.0` | Form validation rules | _Rule[]_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
Field support all native events of input tag
|
||||
|
||||
| Event | Description | Parameters |
|
||||
|------|------|------|
|
||||
| input | Triggered when input value changed | *value: string* |
|
||||
| focus | Triggered when input gets focus | *event: Event* |
|
||||
| blur | Triggered when input loses focus | *event: Event* |
|
||||
| clear | Triggered when click clear icon | *event: Event* |
|
||||
| click | Triggered when click Field | *event: Event* |
|
||||
| click-left-icon | Triggered when click the left icon of Field | *event: Event* |
|
||||
| click-right-icon | Triggered when click the right icon of Field | *event: Event* |
|
||||
| --- | --- | --- |
|
||||
| input | Triggered when input value changed | _value: string_ |
|
||||
| focus | Triggered when input gets focus | _event: Event_ |
|
||||
| blur | Triggered when input loses focus | _event: Event_ |
|
||||
| clear | Triggered when click clear icon | _event: Event_ |
|
||||
| click | Triggered when click Field | _event: Event_ |
|
||||
| click-left-icon | Triggered when click the left icon of Field | _event: Event_ |
|
||||
| click-right-icon | Triggered when click the right icon of Field | _event: Event_ |
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| focus | Trigger input focus | - | - |
|
||||
| blur | Trigger input blur | - | - |
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | ------------------- | --------- | ------------ |
|
||||
| focus | Trigger input focus | - | - |
|
||||
| blur | Trigger input blur | - | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| label | Custom label |
|
||||
| input | Custom input |
|
||||
| left-icon | Custom left icon |
|
||||
| Name | Description |
|
||||
| ---------- | ----------------- |
|
||||
| label | Custom label |
|
||||
| input | Custom input |
|
||||
| left-icon | Custom left icon |
|
||||
| right-icon | Custom right icon |
|
||||
| button | Insert button |
|
||||
| button | Insert button |
|
||||
|
||||
+63
-63
@@ -30,10 +30,10 @@ Vue.use(Field);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
value: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义类型
|
||||
@@ -61,10 +61,10 @@ export default {
|
||||
text: '',
|
||||
digit: '',
|
||||
number: '',
|
||||
password: ''
|
||||
password: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
> Tips: digit 类型从 2.4.2 版本开始支持
|
||||
@@ -108,9 +108,9 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '123'
|
||||
value2: '123',
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
@@ -172,16 +172,16 @@ export default {
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
value: '',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
formatter(value) {
|
||||
// 过滤输入的数字
|
||||
return value.replace(/\d/g, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 高度自适应
|
||||
@@ -234,70 +234,70 @@ export default {
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| v-model (value) | 当前输入的值 | *number \| string* | - |
|
||||
| label | 输入框左侧文本 | *string* | - |
|
||||
| name `v2.5.0` | 名称，提交表单的标识符 | *string* | - |
|
||||
| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | *string* | `text` |
|
||||
| size | 大小，可选值为 `large` | *string* | - |
|
||||
| maxlength | 输入的最大字符数 | *number \| string* | - |
|
||||
| placeholder | 占位提示文字 | *string* | - |
|
||||
| border | 是否显示内边框 | *boolean* | `true` |
|
||||
| disabled | 是否禁用输入框 | *boolean* | `false` |
|
||||
| readonly | 是否只读 | *boolean* | `false` |
|
||||
| required | 是否显示表单必填星号 | *boolean* | `false` |
|
||||
| clearable | 是否启用清除控件 | *boolean* | `false` |
|
||||
| clickable | 是否开启点击反馈 | *boolean* | `false` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` |
|
||||
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` |
|
||||
| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` |
|
||||
| error | 是否将输入内容标红 | *boolean* | `false` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | *string* | - |
|
||||
| formatter `v2.4.2` | 输入内容格式化函数 | *Function* | - |
|
||||
| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | *string* | `right` |
|
||||
| label-class | 左侧文本额外类名 | *any* | - |
|
||||
| label-width | 左侧文本宽度，默认单位为`px` | *number \| string* | `90px` |
|
||||
| label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` |
|
||||
| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | *boolean \| object* | `false` |
|
||||
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | *string* | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | *string* | `van-icon` |
|
||||
| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | *Rule[]* | - |
|
||||
| --- | --- | --- | --- |
|
||||
| v-model (value) | 当前输入的值 | _number \| string_ | - |
|
||||
| label | 输入框左侧文本 | _string_ | - |
|
||||
| name `v2.5.0` | 名称，提交表单的标识符 | _string_ | - |
|
||||
| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | _string_ | `text` |
|
||||
| size | 大小，可选值为 `large` | _string_ | - |
|
||||
| maxlength | 输入的最大字符数 | _number \| string_ | - |
|
||||
| placeholder | 占位提示文字 | _string_ | - |
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| disabled | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `false` |
|
||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
||||
| autofocus | 是否自动聚焦，iOS 系统不支持该属性 | _boolean_ | `false` |
|
||||
| show-word-limit `v2.2.8` | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` |
|
||||
| error | 是否将输入内容标红 | _boolean_ | `false` |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | _string_ | - |
|
||||
| formatter `v2.4.2` | 输入内容格式化函数 | _Function_ | - |
|
||||
| arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
|
||||
| label-class | 左侧文本额外类名 | _any_ | - |
|
||||
| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `90px` |
|
||||
| label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | _boolean \| object_ | `false` |
|
||||
| left-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
||||
| right-icon | 右侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
|
||||
| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
|
||||
| rules `v2.5.0` | 表单校验规则，详见 [Form 组件](#/zh-CN/form#rule-shu-ju-jie-gou) | _Rule[]_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
除下列事件外，Field 默认支持 Input 标签所有的原生事件
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| input | 输入框内容变化时触发 | *value: string (当前输入的值)* |
|
||||
| focus | 输入框获得焦点时触发 | *event: Event* |
|
||||
| blur | 输入框失去焦点时触发 | *event: Event* |
|
||||
| clear | 点击清除按钮时触发 | *event: Event* |
|
||||
| click | 点击时触发 | *event: Event* |
|
||||
| click-left-icon | 点击左侧图标时触发 | *event: Event* |
|
||||
| click-right-icon | 点击右侧图标时触发 | *event: Event* |
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| ---------------- | -------------------- | ------------------------------ |
|
||||
| input | 输入框内容变化时触发 | _value: string (当前输入的值)_ |
|
||||
| focus | 输入框获得焦点时触发 | _event: Event_ |
|
||||
| blur | 输入框失去焦点时触发 | _event: Event_ |
|
||||
| clear | 点击清除按钮时触发 | _event: Event_ |
|
||||
| click | 点击时触发 | _event: Event_ |
|
||||
| click-left-icon | 点击左侧图标时触发 | _event: Event_ |
|
||||
| click-right-icon | 点击右侧图标时触发 | _event: Event_ |
|
||||
|
||||
### 方法
|
||||
|
||||
通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| focus | 获取输入框焦点 | - | - |
|
||||
| blur | 取消输入框焦点 | - | - |
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------ | -------------- | ---- | ------ |
|
||||
| focus | 获取输入框焦点 | - | - |
|
||||
| blur | 取消输入框焦点 | - | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| label | 自定义输入框标签 |
|
||||
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
|
||||
| left-icon | 自定义输入框头部图标 |
|
||||
| right-icon | 自定义输入框尾部图标 |
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
| 名称 | 说明 |
|
||||
| ---------- | ---------------------------------------------------------- |
|
||||
| label | 自定义输入框标签 |
|
||||
| input | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |
|
||||
| left-icon | 自定义输入框头部图标 |
|
||||
| right-icon | 自定义输入框尾部图标 |
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
Reference in New Issue
Block a user