1.1.1 • Published 7 years ago
vue-expand v1.1.1
vue-expand
Light-weight auto expanding textarea as a vue component
Install
npm install --save vue-expand
# or
yarn add vue-expand
Usage
Add 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>
Options
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 |
Handler 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 |
Styling
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>
License
Copyright (c) 2017 Christoph Biering, Licensed under the MIT license.