Light-weight auto expanding text area as a Vue component
npm install --save vue-expand
# or
yarn add vue-expandAdd this to your vue-component:
<template>
<div>
<vue-expand
v-model="text"
:placeholder="A placeholder"
:handler="handler"
min-row="3"/>
</div>
</template>
<script>
import VueExpand from 'vue-expand'
export default {
name: '..',
components: {
VueExpand
},
data () {
return {
text: '',
handler: new Vue()
}
},
...
}
</script>| Property | Type | Description |
|---|---|---|
v-model |
String |
The value which is bound to the text area |
min-row |
Number |
Minimum number of rows which results in the initial text area height |
placeholder |
String |
The placeholder of the text area |
handler |
Function |
Handler to access vue-expand through events |
You can use the handler in the following way:
this.handler.$emit(event, [args])
// for example
this.handler.$emit('focus')| Name | Arguments | Description |
|---|---|---|
focus |
Focus the textarea |
To style the textarea add this class somewhere in a non-scoped style-block:
<style>
/* wrapper element */
.vue-expand {
...
}
/* wrapper textarea */
.vue-expand textarea {
...
}
</style>Copyright (c) 2017 Christoph Biering, Licensed under the MIT license.