resize-textarea-vue3
v1.1.3
Published
**A simple resize textarea for Vue3.**
Downloads
2,891
Maintainers
Readme
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
- Create a new Vue instance
- Import ResizeTextarea and use it
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:
<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:
<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:
<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>