今天由于项目的bug再改,我写一篇博客纪念解决的小图标bug,不废话了,上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="style.css"/>
<script src="lib/vue-2.4.0.js"></script>
/* Vue引入*/
<title>图标案例</title>
<style>
/*设置公共样式*/
.icon {
list-style: none;
font-family: "icomoon";
font-weight: normal;
font-style: normal;
color: #000000;
font-size: 18px;
}
/*第一种方法*/
.fileinput-button {
position: relative;
display: inline-block;
overflow: hidden;
}
.fileinput-button input {
position: absolute;
right: 0;
top: 0;
opacity: 0;
}
</style>
</head>
<body>
<div>
<!--第一种方法-->
<span class="fileinput-button ">
<i class="icon icon-upload" aria-hidden="true"></i>
<input type="file" multiple>
</span>
<!--需要css配合-->
<!--利用定位和透明度-->
</div>
<div>
<!--第二种-->
<label for="fileInput">
<i class="icon icon-upload" aria-hidden="true"></i>
</label>
<input v-show="false" type="file" id="fileInput" style=" opacity: 0;">
<!--Vue方法-->
<!--用label,之后改变input的透明度,因为透明之后会占用空间,所以加一个父级标签,设置宽度,超过之后在隐藏-->
</div>
<div>
<label for="fileInput">
<i class="icon icon-upload" aria-hidden="true"></i>
</label>
<input v-show="false" type="file" id="fileInput">
<!--第三种Vue方法-->
</div>
</body>
</html>