vue实现上传按钮的样式的两种方法

2022-12-24 12:00

短信预约 -IT技能 免费直播动态提醒

1、铜通过纯html css实现

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;
    }

实现后的样式

这里写图片描述

2、通过js实现

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;
    }

实现后的效果

这里写图片描述