syropian / vue-input-autowidth Goto Github PK
View Code? Open in Web Editor NEWA Vue.js directive that automatically resizes an input's width to fit its contents.
License: MIT License
A Vue.js directive that automatically resizes an input's width to fit its contents.
License: MIT License
I'm currently injecting data into the input component directly via the :value directive, which does not trigger the autoresize. Changing to v-model fixes it.
Is there a fundamental restriction when using the value directive which makes the autoresize functionality not work?
The auto generated mirror span is read by screen readers.
Related merge request: #12
It doesn't seem to work? Do you have a working demo somewhere other than the gif?
I actually tried using your package on a select element and it worked pretty good. But it throws an error in the console warning me to only us it on input elements.
Since it is working, I will keep using it, but can I get rid of the error message?
I've been testing vue-input-autowidth and it seems there is a slight flicker on keydown in Chrome/Safari (Version 61.0.3163.100) but not in Firefox.
All extensions were disabled.
This module does not work in IE11 due to it using ES6 Object.assign. The dist file should be ES5 for better browser support.
This is an issue to me because Browserify/Babelify does not transpile the node_modules folder.
I am currently migrating some of my apps to Vue3 which is currently in RC-2.
There is a few breaking changes to the directive API making the library not compatible.
I found a workaround in my apps by doing:
import VueInputAutowidth from 'vue-input-autowidth';
export default {
[...]
directives: {
autowidth: {
beforeMount: VueInputAutowidth.bind,
mounted: VueInputAutowidth.inserted,
updated: VueInputAutowidth.componentUpdated,
unmounted: VueInputAutowidth.unbind,
},
},
}
but it would be nice to add support.
Please, upload latest version to npm
All it's currently doing is setting the min/max width css style on the element. This is something the user can likely do themselves, and with Vue's reactivity system, it's easy to update.
I had the auto width calculated incorrectly when the page load at first but then if I change or remove the text from input, it worked correctly. Here is a video showing exactly when it happens
https://giphy.com/gifs/hWpIELosaTxjlcMyCW
the domain name in the video is just a element. Only the subdomain is the textbox. I just styled this the way so the whole line look like a textbox.
Thank you for making this great plugin!
I believe I've followed your instructions for installation and usage on the v2 branch, but get [Vue warn]: A plugin must either be a function or an object with an "install" function.
when I try to use it.
For your reference, here's my main.js
:
import { createApp } from "vue";
import { plugin as VueInputAutowidth } from 'vue-input-autowidth';
import App from "./App.vue";
import router from "./router";
import "./assets/main.css";
const app = createApp(App);
app.use(VueInputAutowidth); // this is the line with the warning
app.use(router);
app.mount("#app");
This problem seems to prevent me from using your plugin. I attempt to use it in a component I get:
[Vue warn]: Failed to resolve directive: autowidth
at <HomeView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
I waiting 1.0.8, but the fix for FF is not here :
See : https://unpkg.com/[email protected]/dist/index.umd.min.js whereas : dd9c3d9#diff-86ae3ce16deeb1cf5903641a8f921997R25
Please fix
Input field looks large because box-sizing
property is set to content-box
.
just a little bug when you use a password input, show you
| text input |
| ••••••••••• |
It shows me an error:
500
Cannot read properties of undefined (reading 'getSSRProps')
If the input is destroyed, mirror span is staying in DOM, which is not cool
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.