vue 實(shí)現(xiàn)上傳按鈕的樣式的兩種方法
更新時(shí)間：2022年12月24日 11:20:30 作者：haeasringnar
這篇文章主要介紹了vue 定制上傳按鈕的樣式的兩種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1、銅通過(guò)純html css實(shí)現(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/*” 表示這個(gè)按鈕打開(kāi)后會(huì)默認(rèn)選擇圖片上傳
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;
}實(shí)現(xiàn)后的樣式
2、通過(guò)js實(shí)現(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">請(qǐng)用圖文記錄</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;
}實(shí)現(xiàn)后的效果
到此這篇關(guān)于vue 定制上傳按鈕的樣式的兩種方法的文章就介紹到這了,更多相關(guān)vue 上傳按鈕的樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 取出v-for循環(huán)中的index值實(shí)例
今天小編就為大家分享一篇vue 取出v-for循環(huán)中的index值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue v2.4中新增的$attrs及$listeners屬性使用教程
這篇文章主要給大家介紹了關(guān)于Vue v2.4中新增的$attrs及$listeners屬性的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
vue?demi支持sfc方式的vue2vue3通用庫(kù)開(kāi)發(fā)詳解
這篇文章主要為大家介紹了vue?demi支持sfc方式的vue2vue3通用庫(kù)開(kāi)發(fā)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
假設(shè)?App?的用戶(hù)可以在短時(shí)間內(nèi)進(jìn)行多個(gè)?API?調(diào)用,但您只想顯示上次調(diào)用的結(jié)果,之前正在進(jìn)行的請(qǐng)求變得無(wú)關(guān)緊要,在這種情況下,您可以利用?Axios?攔截器,本文給大家介紹了如何使用Axios攔截器中止Vue請(qǐng)求,需要的朋友可以參考下2023-11-11
vue3的ref、isRef、toRef、toRefs、toRaw詳細(xì)介紹
本文詳細(xì)講解了vue3的ref、isRef、toRef、toRefs、toRaw，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)element-ui對(duì)話框可拖拽功能
這篇文章主要介紹了vue實(shí)現(xiàn)element-ui對(duì)話框可拖拽功能，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了vue中template模板編譯的過(guò)程全面剖析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vuex中this.$store.commit和this.$store.dispatch的基本用法實(shí)例
在vue的項(xiàng)目里常常會(huì)遇到父子組件間需要進(jìn)行數(shù)據(jù)傳遞的情況,下面這篇文章主要給大家介紹了關(guān)于vuex中this.$store.commit和this.$store.dispatch的基本用法的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue2如何獲取上頁(yè)的url地址問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)的組件兄弟間通信功能,結(jié)合實(shí)例形式分析了vue兄弟組件間通信的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12