resize-textarea-vue3
Version:
**A simple resize textarea for Vue3.**
137 lines (117 loc) • 2.94 kB
Markdown
# Resize Textarea
**A simple resize textarea for Vue3.**
Inspired from vue-textarea-autosize (Works with Vue2)
## Installation
**Install the package using npm**
`npm i resize-textarea-vue3`
## Documentation
1. Create a new Vue instance
2. Import ResizeTextarea and use it
```js
import { createApp } from 'vue'
import ResizeTextarea from 'resize-textarea-vue3'
const app = createApp({
/* root component options */
})
app.use(ResizeTextarea)
.mount('#app')
```
Available props:
| Props | required | type | default |
| ------------- |:-------------:| -------:| -------:|
| placeholder | no | String | Null |
| rows | no | Number | 2 |
| cols | no | Number | 0 |
| minHeight | no | Number | 50 px |
| maxHeight (The content will be scrollable after set limit) | no | Number | Null |
| modelValue | no | String / Number | Null |
| autoResize (The drag handle is disabled by default.) | no | Booolean| true |
The default unit is (px)
```
```
Component simple usage example:
```vue
<template>
<div id="wrapper">
<resize-textarea
:placeholder="placeholder"
:rows="2"
:cols="4"
:maxHeight="150"
v-model="textValue">
</resize-textarea>
</div>
<script>
export default {
data() {
return {
placeholder: "This is a test message",
textValue: "reSize",
}
},
}
</script>
</template>
```
```
```
Component usage with update:modelValue event example:
```vue
<template>
<div id="wrapper">
<resize-textarea
:placeholder="placeholder"
:modelValue="textValue"
@update:modelValue="(value)=>useUpdatedValue(value)"
v-model="textValue">
</resize-textarea>
</div>
<script>
export default {
data() {
return {
placeholder: "This is a test message",
textValue: "reSize",
}
},
methods: {
useUpdatedValue(value) {
//do something
}
}
}
</script>
</template>
```
```
```
Component usage example with state management:
```vue
<template>
<div id="wrapper">
<resize-textarea
:placeholder="placeholder"
v-model="textValue">
</resize-textarea>
</div>
<script>
export default {
data() {
return {
placeholder: "This is a test message",
}
},
computed: {
textValue: {
get() {
return this.$store.state.textValue
},
set(v) {
this.$store.commit('UPDATE', v)
}
}
}
}
</script>
</template>
```