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

目录

• 1、铜通过纯html css实现
• 2、通过js实现

1、铜通过纯html css实现

html代码

    
Add 新增
    

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代码

    

    
请用图文记录
    

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/[email protected]");
        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;
    }

实现后的效果

到此这篇关于vue 定制上传按钮的样式的两种方法的文章就介绍到这了,更多相关vue 上传按钮的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！