vue 實現(xiàn)上傳按鈕的樣式的兩種方法

更新時間：2022年12月24日 11:20:30 作者：haeasringnar

這篇文章主要介紹了vue 定制上傳按鈕的樣式的兩種方法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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)后的效果

這里寫圖片描述