Shulou(Shulou.com)06/03 Report--

This article mainly shows you "vue.js how to hide input file", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "vue.js how to hide input file" this article.

Vue.js hide input file method: 1, set the z-index of input to more than 1 number and overwrite the content that needs to be clicked on; 2, set the style opacity of input to 0 (that is, transparency is 0); 3, trigger through the change event bound to input.

The operating environment of this paper: windows10 system, vue.js 2.9, thinkpad T480 computer.

There are generally three ways for vue to hide input file, one is to use HTML's lable mechanism to trigger input events, one is to use input transparent coverage, and the other is to use the ref parameter of vue to directly manipulate the click event trigger of input. So how do we use these three ways to achieve hidden input file? Let's take a look at these three methods.

1. Use HTML's lable mechanism to trigger input events

The for attribute on lable binds the id of input, which triggers the change event of input by triggering the click event on lable

Upload File | fileChange () {}; / /

2. Use transparent overlay using input

Set the z-index of input to a number above 1 and overwrite the content to be clicked, and set the style opacity of input to 0 (that is, transparency is 0), which is triggered by the change event bound to the input.

Width: 100%; height: 1.46remr; position: relative; input {width: 1.46remr; height: 100%; z-index: 1; opacity: 0; position: absolute; cursor: pointer;}}

3. Use the ref parameter of vue to directly operate the click event trigger of input.

Click upload choiceImg () {this.$refs.filElem.dispatchEvent (new MouseEvent ('click'))} getFile () {console.log ("success");} above is all the content of the article "how vue.js hides input file". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.