WU-UITextarea
The text field component satisfies the actual logic functions such as form information supplementation and editing that may appear, and has built-in word count verification, etc.
platform compatibility
| App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ |
basic use
vue
<template>
<wu-textarea v-model="value1" placeholder="Please enter content"></wu-textarea>
</template>
<script>
export default {
data() {
return {
value1: '',
}
},
}
</script><template>
<wu-textarea v-model="value1" placeholder="Please enter content"></wu-textarea>
</template>
<script>
export default {
data() {
return {
value1: '',
}
},
}
</script>Count
Set the count attribute to achieve word count
vue
<template>
<wu-textarea v-model="value2" placeholder="Please enter content" count></wu-textarea>
</template>
<script>
export default {
data() {
return {
value2: 'Statistics',
}
},
}
</script><template>
<wu-textarea v-model="value2" placeholder="Please enter content" count></wu-textarea>
</template>
<script>
export default {
data() {
return {
value2: 'Statistics',
}
},
}
</script>Auto Height
Set the autoHeight attribute to achieve automatic heightening
vue
<template>
<wu-textarea v-model="value3" placeholder="Please enter content" autoHeight></wu-textarea>
</template>
<script>
export default {
data() {
return {
value3: '',
}
},
}
</script><template>
<wu-textarea v-model="value3" placeholder="Please enter content" autoHeight></wu-textarea>
</template>
<script>
export default {
data() {
return {
value3: '',
}
},
}
</script>Disabled state
Set the disabled property to disable, you can also dynamically set whether to disable
vue
<template>
<wu-textarea v-model="value4" placeholder="Please enter content" disabled count></wu-textarea>
</template>
<script>
export default {
data() {
return {
value4: '',
}
},
}
</script><template>
<wu-textarea v-model="value4" placeholder="Please enter content" disabled count></wu-textarea>
</template>
<script>
export default {
data() {
return {
value4: '',
}
},
}
</script>underline mode
Set the border="bottom" attribute to set the bottom underline separately
vue
<template>
<wu-textarea v-model="value5" placeholder="Please enter content" border="bottom"></wu-textarea>
</template>
<script>
export default {
data() {
return {
value5: '',
}
},
}
</script><template>
<wu-textarea v-model="value5" placeholder="Please enter content" border="bottom"></wu-textarea>
</template>
<script>
export default {
data() {
return {
value5: '',
}
},
}
</script>Formatting
If desired, custom formatting rules can be written via the formatter parameter.
vue
<template>
<wu-textarea v-model="value" :formatter="formatter" ref="textarea"></wu-textarea>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
onReady() {
// If you need to be compatible with WeChat applets, you need to use this method
this.$refs.textarea.setFormatter(this.formatter)
},
methods: {
formatter(value) {
// Let the input box only enter values, and filter other characters
return value.replace(/[^0-9]/ig, "")
}
},
}
</script><template>
<wu-textarea v-model="value" :formatter="formatter" ref="textarea"></wu-textarea>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
onReady() {
// If you need to be compatible with WeChat applets, you need to use this method
this.$refs.textarea.setFormatter(this.formatter)
},
methods: {
formatter(value) {
// Let the input box only enter values, and filter other characters
return value.replace(/[^0-9]/ig, "")
}
},
}
</script>API
Textarea Props
| property name | description | type | default value | optional values |
|---|---|---|---|---|
| value / modelValue | content of input box | String | - | - |
| placeholder | placeholder when the input box is empty | Number / String | - | - |
| height | input box height | String / Number | 70 | - |
| confirmType | Set the text of the button in the lower right corner of the keyboard, only valid for WeChat applets, App-vue and H5 | String | done | - |
| disabled | Whether to disable | Boolean | false | true / false |
| count | Whether to display the count of words | Boolean | false | true / false |
| focus | Whether to automatically get the focus, nvue does not support it, H5 depends on the implementation of the browser | Boolean | false | true / false |
| autoHeight | Whether to automatically increase the height | Boolean | false | true / false |
| ignoreCompositionEvent | Whether to ignore the processing of text composition system events within the component. When false, compositionstart, compositionend, compositionupdate events will be fired, and input event will be fired during text composition | Boolean | true | true / false |
| fixed | If the textarea is in a position:fixed area, it needs to display the specified attribute fixed as true | Boolean | false | true / false |
| cursorSpacing | Specifies the distance between the cursor and the keyboard | Number | 0 | - |
| cursor | cursor position when focus is specified | Number / String | 0 | - |
| showConfirmBar | Whether to show the bar with the "Done" button above the keyboard, | Boolean | true | true / false |
| selectionStart | Cursor start position, valid when auto focus, need to be used together with selection-end | Number | -1 | - |
| selectionEnd | The end position of the cursor, valid during auto-focus, must be used with selection-start | Number | -1 | - |
| adjustPosition | Whether to automatically push up the page when the keyboard pops up | Boolean | true | true / false |
| disableDefaultPadding | Whether to remove the default padding under iOS, only valid for WeChat applets | Boolean | false | true / false |
| holdKeyboard | When in focus, the keyboard will not be put away when the page is clicked, only the WeChat applet is valid | Boolean | false | true / false |
| maxlength | The maximum input length, when set to -1, there is no limit to the maximum length | String / Number | 140 | - |
| border | border type, surround-surround border, none-no border, bottom-bottom border | String | surround | bottom |
| placeholderClass | Specifies the style class of the placeholder. Note that when scoped is written in the style of the page or component, you need to write /deep/ before the class name | String | textarea-placeholder | - |
| placeholderStyle | Specifies the style of the placeholder, in the form of a string/object, such as "color: red;" | String / Object | color: #c0c4cc | - |
| formatter | Input filtering or formatting function (if compatible with WeChat applet, only through the setFormatter method) | Function | null | - |
Textarea Methods
| method name | description |
|---|---|
| setFormatter | The internal method exposed for compatibility with WeChat applets, see the description above |
Textarea Event
| Event Name | Description | Callback Parameters |
|---|---|---|
| focus | Triggered when the input box is focused, event.detail = { value, height }, height is the height of the keyboard | e |
| blur | Triggered when the input box loses focus, event.detail = {value, cursor} | e |
| linechange | Called when the line number of the input box changes, event.detail = {height: 0, heightRpx: 0, lineCount: 0} | e |
| input | When the keyboard enters, the input event is triggered | e.detail.value |
| confirm | When the click is done, the confirm event is triggered | e |
| keyboardheightchange | This event is triggered when the keyboard height changes | e |