vue 實現(xiàn)上傳按鈕的樣式的兩種方法
更新時間：2022年12月24日 11:20:30 作者：haeasringnar
這篇文章主要介紹了vue 定制上傳按鈕的樣式的兩種方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1、銅通過純html css實現(xiàn)
html代碼
<div class="file-upload">
<div class="file-upload-text">Add 新增</div>
<input name="upfile" class="file-upload-input" id="upfile" type="file" accept="image/*">
</div>accept=”image/*” 表示這個按鈕打開后會默認選擇圖片上傳
css代碼
.file-upload {
width: 60px;
height: 26px;
position: relative;
overflow: hidden;
border: 1px solid #0F996B ;
display: inline-block;
border-radius: 4px;
font-size: 12px;
color: #0F996B;
text-align: center;
line-height: 26px;
float: right;
margin: 10px 0 auto auto;
}
.file-upload-input {
background-color: transparent;
position: absolute;
width: 999px;
height: 999px;
top: -10px;
right: -10px;
cursor: pointer;
}實現(xiàn)后的樣式
2、通過js實現(xiàn)
html代碼
<div class="file-upload-design">
<div class="file-upload-design-icon" @click="dialog_show" name="desgin"></div>
<div class="file-upload-design-txt">請用圖文記錄</div>
<input type="file" name="fileToUpload" id="fileToUpload" style="display:none;" accept="image/*" @change='changeimage($event)'>
</div>methods里面的js代碼
methods:{
dialog_show (e) {
$('#fileToUpload').click()
},
}css樣式代碼
.file-upload-design{
margin: 20px auto auto 8px;
width: 80px;
height: 80px;
position: relative;
overflow: hidden;
background-color: #EBEBEB ;
display: inline-block;
}
.file-upload-design-icon{
width: 24px;
height: 24px;
background-image: url("../../static/icon/icon-add@3x.png");
background-size: 100% 100%;
margin: 18px 28px auto auto;
}
.file-upload-design-icon:hover{
cursor: pointer;
}
.file-upload-design-txt{
margin-top: 9px;
height: 12px;
font-size: 10px;
text-align: center;
color: #AAAAAA;
}實現(xiàn)后的效果
到此這篇關于vue 定制上傳按鈕的樣式的兩種方法的文章就介紹到這了,更多相關vue 上傳按鈕的樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了在vue3中使用jsx的配置以及一些小問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue中父子組件注意事項,傳值及slot應用技巧,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡易記事本，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題
這篇文章主要介紹了vue cli 3.0下配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了Vue 子組件更新props中的屬性值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要給大家介紹了vue獲取DOM節(jié)點的常用方法,使用ref屬性,使用$el屬性,使用querySelector和querySelectorAll,使用$refs和querySelector,這幾種方法,需要的朋友可以參考下2023-10-10
Vue3+TypeScript實現(xiàn)PDF預覽組件
這篇文章主要為大家詳細介紹了如何基于Vue3+TypeScript實現(xiàn)PDF預覽組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
這篇文章主要介紹了vue實現(xiàn)虛擬列表，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
這篇文章主要為大家詳細介紹了vue+Element?ui實現(xiàn)照片墻效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了vue使用el-table動態(tài)合并列及行，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09