脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 上传按钮的样式

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

 更新时间：2022年12月24日 11:20:30   作者：haeasringnar  
这篇文章主要介绍了vue 定制上传按钮的样式的两种方法,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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

实现后的效果

这里写图片描述

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

您可能感兴趣的文章:

相关文章

  • 详解在vue3中使用jsx的配置以及一些小问题

    详解在vue3中使用jsx的配置以及一些小问题

    本文主要介绍了在vue3中使用jsx的配置以及一些小问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue中父子组件注意事项,传值及slot应用技巧

    vue中父子组件注意事项,传值及slot应用技巧

    这篇文章主要介绍了vue中父子组件注意事项,传值及slot应用技巧,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-05-05
  • Vue实现简易记事本

    Vue实现简易记事本

    这篇文章主要为大家详细介绍了Vue实现简易记事本，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue cli 3.0下配置开发环境下的sourcemap问题

    vue cli 3.0下配置开发环境下的sourcemap问题

    这篇文章主要介绍了vue cli 3.0下配置开发环境下的sourcemap问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • Vue 子组件更新props中的属性值问题

    Vue 子组件更新props中的属性值问题

    这篇文章主要介绍了Vue 子组件更新props中的属性值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • vue获取DOM节点的常用方法

    vue获取DOM节点的常用方法

    这篇文章主要给大家介绍了vue获取DOM节点的常用方法,使用ref属性,使用$el属性,使用querySelector和querySelectorAll,使用$refs和querySelector,这几种方法,需要的朋友可以参考下
    2023-10-10
  • Vue3+TypeScript实现PDF预览组件

    Vue3+TypeScript实现PDF预览组件

    这篇文章主要为大家详细介绍了如何基于Vue3+TypeScript实现PDF预览组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • vue实现虚拟列表功能的代码

    vue实现虚拟列表功能的代码

    这篇文章主要介绍了vue实现虚拟列表，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue+Element ui实现照片墙效果

    vue+Element ui实现照片墙效果

    这篇文章主要为大家详细介绍了vue+Element ui实现照片墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue使用el-table动态合并列及行

    vue使用el-table动态合并列及行

    这篇文章主要为大家详细介绍了vue使用el-table动态合并列及行，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论