mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Field): add show-word-limit prop (#4721)
This commit is contained in:
neverland
GitHub
parent
cd1e5d112a
commit
8ad1b13e18
@ -21,7 +21,7 @@ The value of field is bound with v-model.
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Custom type
|
||||
### Custom Type
|
||||
|
||||
Use `type` prop to custom different type fields.
|
||||
|
||||
@ -60,7 +60,7 @@ Use `type` prop to custom different type fields.
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Error info
|
||||
### Error Info
|
||||
|
||||
Use `error` or `error-message` to show error info
|
||||
|
||||
@ -81,7 +81,25 @@ Use `error` or `error-message` to show error info
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Auto resize
|
||||
### Insert Button
|
||||
|
||||
Use button slot to insert button
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="sms"
|
||||
center
|
||||
clearable
|
||||
label="SMS"
|
||||
placeholder="SMS"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">Send SMS</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Auto Resize
|
||||
|
||||
Textarea Field can be auto resize when has `autosize` prop
|
||||
|
||||
@ -98,21 +116,20 @@ Textarea Field can be auto resize when has `autosize` prop
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Insert button
|
||||
|
||||
Use button slot to insert button
|
||||
### Show Word Limit
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="sms"
|
||||
center
|
||||
clearable
|
||||
label="SMS"
|
||||
placeholder="SMS"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">Send SMS</van-button>
|
||||
</van-field>
|
||||
v-model="message"
|
||||
rows="2"
|
||||
autosize
|
||||
label="留言"
|
||||
type="textarea"
|
||||
maxlength="50"
|
||||
placeholder="请输入留言"
|
||||
show-word-limit
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
@ -135,6 +152,7 @@ Use button slot to insert button
|
||||
| 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` | - |
|
||||
| show-word-limit | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | 2.2.8 |
|
||||
| error | Whether to show error info | *boolean* | `false` | - |
|
||||
| arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 |
|
||||
| error-message | Error message | *string* | `''` | - |
|
||||
|
||||
@ -85,23 +85,6 @@ Vue.use(Field);
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 高度自适应
|
||||
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
label="留言"
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 插入按钮
|
||||
|
||||
通过 button 插槽可以在输入框尾部插入按钮
|
||||
@ -120,6 +103,42 @@ Vue.use(Field);
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 高度自适应
|
||||
|
||||
对于 textarea，可以通过`autosize`属性设置高度自适应
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
rows="1"
|
||||
autosize
|
||||
label="留言"
|
||||
type="textarea"
|
||||
placeholder="请输入留言"
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 显示字数统计
|
||||
|
||||
设置`maxlength`和`show-word-limit`属性后会在底部显示字数统计
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
rows="2"
|
||||
autosize
|
||||
label="留言"
|
||||
type="textarea"
|
||||
maxlength="50"
|
||||
placeholder="请输入留言"
|
||||
show-word-limit
|
||||
/>
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
@ -139,6 +158,7 @@ Vue.use(Field);
|
||||
| clearable | 是否启用清除控件 | *boolean* | `false` | - |
|
||||
| clickable | 是否开启点击反馈 | *boolean* | `false` | - |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - |
|
||||
| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 |
|
||||
| error | 是否将输入内容标红 | *boolean* | `false` | - |
|
||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | 2.0.4 |
|
||||
| error-message | 底部错误提示文案，为空时不展示 | *string* | `''` | -
|
||||
|
||||
@ -59,19 +59,6 @@
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title5')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
:label="$t('message')"
|
||||
type="textarea"
|
||||
:placeholder="$t('messagePlaceholder')"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('title6')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
@ -92,6 +79,34 @@
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('textareaAutosize')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message"
|
||||
:label="$t('message')"
|
||||
type="textarea"
|
||||
:placeholder="$t('messagePlaceholder')"
|
||||
rows="1"
|
||||
autosize
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block v-if="!$attrs.weapp" :title="$t('showWordLimit')">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
v-model="message2"
|
||||
:label="$t('message')"
|
||||
:placeholder="$t('messagePlaceholder')"
|
||||
rows="2"
|
||||
autosize
|
||||
maxlength="50"
|
||||
type="textarea"
|
||||
show-word-limit
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
@ -102,12 +117,13 @@ export default {
|
||||
title2: '自定义类型',
|
||||
title3: '禁用输入框',
|
||||
title4: '错误提示',
|
||||
title5: '高度自适应',
|
||||
title6: '插入按钮',
|
||||
message: '留言',
|
||||
phone: '手机号',
|
||||
sms: '短信验证码',
|
||||
sendSMS: '发送验证码',
|
||||
showWordLimit: '显示字数统计',
|
||||
textareaAutosize: '高度自适应',
|
||||
smsPlaceholder: '请输入短信验证码',
|
||||
phonePlaceholder: '请输入手机号',
|
||||
messagePlaceholder: '请输入留言',
|
||||
@ -115,15 +131,16 @@ export default {
|
||||
phoneError: '手机号格式错误'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom type',
|
||||
title2: 'Custom Type',
|
||||
title3: 'Disabled',
|
||||
title4: 'Error info',
|
||||
title5: 'Auto resize',
|
||||
title6: 'Insert button',
|
||||
title4: 'Error Info',
|
||||
title6: 'Insert Button',
|
||||
message: 'Message',
|
||||
phone: 'Phone',
|
||||
sms: 'SMS',
|
||||
sendSMS: 'Send SMS',
|
||||
showWordLimit: 'Show Word Limit',
|
||||
textareaAutosize: 'Auto Resize',
|
||||
smsPlaceholder: 'SMS',
|
||||
phonePlaceholder: 'Phone',
|
||||
messagePlaceholder: 'Message',
|
||||
@ -140,6 +157,7 @@ export default {
|
||||
username: '',
|
||||
username2: '',
|
||||
message: '',
|
||||
message2: '',
|
||||
phone: '1365577'
|
||||
};
|
||||
}
|
||||
|
||||
@ -24,6 +24,7 @@ export default createComponent({
|
||||
inputAlign: String,
|
||||
errorMessage: String,
|
||||
errorMessageAlign: String,
|
||||
showWordLimit: Boolean,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
@ -260,6 +261,16 @@ export default createComponent({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
renderWordLimit() {
|
||||
if (this.showWordLimit && this.$attrs.maxlength) {
|
||||
return (
|
||||
<div class={bem('word-limit')}>
|
||||
{this.value.length}/{this.$attrs.maxlength}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@ -302,6 +313,7 @@ export default createComponent({
|
||||
{this.renderRightIcon()}
|
||||
{slots('button') && <div class={bem('button')}>{slots('button')}</div>}
|
||||
</div>
|
||||
{this.renderWordLimit()}
|
||||
{this.errorMessage && (
|
||||
<div class={bem('error-message', this.errorMessageAlign)}>
|
||||
{this.errorMessage}
|
||||
|
||||
@ -117,6 +117,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__word-limit {
|
||||
color: @field-word-limit-color;
|
||||
font-size: @field-word-limit-font-size;
|
||||
line-height: @field-word-limit-line-height;
|
||||
}
|
||||
|
||||
&--error {
|
||||
.van-field__control {
|
||||
&,
|
||||
|
||||
@ -59,16 +59,6 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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"><textarea placeholder="请输入留言" rows="1" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell van-cell--center van-field">
|
||||
@ -83,5 +73,26 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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"><textarea placeholder="请输入留言" rows="1" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<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"><textarea placeholder="请输入留言" rows="2" maxlength="50" class="van-field__control" style="height: auto;"></textarea></div>
|
||||
<div class="van-field__word-limit">0/50</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -292,6 +292,9 @@
|
||||
@field-error-message-color: @red;
|
||||
@field-error-message-text-color: 12px;
|
||||
@field-text-area-min-height: 60px;
|
||||
@field-word-limit-color: @gray-darker;
|
||||
@field-word-limit-font-size: @font-size-sm;
|
||||
@field-word-limit-line-height: 16px;
|
||||
|
||||
// GridItem
|
||||
@grid-item-content-padding: @padding-md @padding-xs;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user