今天由於項目的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>