|
1 | 1 | # vue-input-autowidth 
|
2 | 2 |
|
3 |
| - |
4 | 3 | A Vue.js directive that automatically resizes an input's width to fit its contents.
|
5 | 4 |
|
6 | 5 | > 🚦 Looking for Vue 2 support? Check out the [master branch](https://github.com/syropian/vue-input-autowidth).
|
@@ -31,11 +30,11 @@ Use the UMD build from [Unpkg](https://unpkg.com/vue-input-autowidth), available
|
31 | 30 | Import and register the directive in your app's entrypoint.
|
32 | 31 |
|
33 | 32 | ```js
|
34 |
| -import { createApp } from "vue"; |
35 |
| -import App from "./App.vue"; |
36 |
| -import { plugin as VueInputAutowidth } from "vue-input-autowidth"; |
| 33 | +import { createApp } from 'vue' |
| 34 | +import App from './App.vue' |
| 35 | +import { plugin as VueInputAutowidth } from 'vue-input-autowidth' |
37 | 36 |
|
38 |
| -createApp(App).use(VueInputAutowidth).mount("#app"); |
| 37 | +createApp(App).use(VueInputAutowidth).mount('#app') |
39 | 38 | ```
|
40 | 39 |
|
41 | 40 | ### Per-component
|
@@ -78,6 +77,17 @@ You can also pass some options:
|
78 | 77 | </template>
|
79 | 78 | ```
|
80 | 79 |
|
| 80 | +## Available Options |
| 81 | + |
| 82 | +| Name | Type | Default Value | Description | |
| 83 | +| ----------------------------------- | --------- | ------------- | ----------------------------------------------------------------------------------------------------------------------- | |
| 84 | +| **maxWidth** | `string` | `undefined` | Sets the `max-width` CSS property on the element. The value should be a valid CSS size and unit. | |
| 85 | +| **minWidth** | `string` | `undefined` | Sets the `min-width` CSS property on the element. The value should be a valid CSS size and unit. | |
| 86 | +| **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. | |
| 87 | +| **watchWindowSize** | `boolean` | `false` | When enabled, the directive will listen to the window resize event, and resize the input if needed. | |
| 88 | +| **windowResizeHandlerDebounceTime** | `number` | `150` | The debounce time in milliseconds for the window resize event. Only applies if `watchWindowSize` is `true`. | |
| 89 | +| **disableNonInputWarning** | `boolean` | `false` | Disables the console warning if you try and use the directive on a non-input element. | |
| 90 | + |
81 | 91 | ## License
|
82 | 92 |
|
83 | 93 | MIT © [Collin Henderson](https://github.com/syropian)
|
0 commit comments