A Vue.js directive that automatically resizes an input's width to fit its contents.
🚦 Looking for Vue 2 support? Check out the master branch.
npm install vue-input-autowidth@next --save
# or...
yarn add vue-input-autowidth@nextor
Use the UMD build from Unpkg, available as VueInputAutowidth in the global scope.
<script src="/vendor/vue.js" />
<script src="https://unpkg.com/vue-input-autowidth@next" />Import and register the directive in your app's entrypoint.
import { createApp } from 'vue'
import App from './App.vue'
import { plugin as VueInputAutowidth } from 'vue-input-autowidth'
createApp(App).use(VueInputAutowidth).mount('#app')<script>
import { directive as VueInputAutowidth } from "vue-input-autowidth"
export default {
directives: { autowidth: VueInputAutowidth },
setup() {
...
},
}
</script>...and in your template:
<template>
<input type="text" placeholder="First Name" v-model="msg" v-autowidth />
</template>You can also pass some options:
<template>
<input
type="text"
placeholder="First Name"
v-model="msg"
v-autowidth="{
minWidth: '75px',
maxWidth: '75%',
comfortZone: '1ch',
}"
/>
</template>| Name | Type | Default Value | Description |
|---|---|---|---|
| maxWidth | string |
undefined |
Sets the max-width CSS property on the element. The value should be a valid CSS size and unit. |
| minWidth | string |
undefined |
Sets the min-width CSS property on the element. The value should be a valid CSS size and unit. |
| comfortZone | string |
0px |
Uses CSS calc() to add the specificied amount to the calculated width. The value should be a valid CSS size and unit. |
| watchWindowSize | boolean |
false |
When enabled, the directive will listen to the window resize event, and resize the input if needed. |
| windowResizeHandlerDebounceTime | number |
150 |
The debounce time in milliseconds for the window resize event. Only applies if watchWindowSize is true. |
| disableNonInputWarning | boolean |
false |
Disables the console warning if you try and use the directive on a non-input element. |
MIT © Collin Henderson
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent