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 上传按钮的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 取出v-for循环中的index值实例

    vue 取出v-for循环中的index值实例

    今天小编就为大家分享一篇vue 取出v-for循环中的index值实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue v2.4中新增的$attrs及$listeners属性使用教程

    Vue v2.4中新增的$attrs及$listeners属性使用教程

    这篇文章主要给大家介绍了关于Vue v2.4中新增的$attrs及$listeners属性的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • vue demi支持sfc方式的vue2vue3通用库开发详解

    vue demi支持sfc方式的vue2vue3通用库开发详解

    这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 使用Axios拦截器中止Vue请求的步骤详解

    使用Axios拦截器中止Vue请求的步骤详解

    假设 App 的用户可以在短时间内进行多个 API 调用,但您只想显示上次调用的结果,之前正在进行的请求变得无关紧要,在这种情况下,您可以利用 Axios 拦截器,本文给大家介绍了如何使用Axios拦截器中止Vue请求,需要的朋友可以参考下
    2023-11-11
  • vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

    vue3的ref、isRef、toRef、toRefs、toRaw详细介绍

    本文详细讲解了vue3的ref、isRef、toRef、toRefs、toRaw,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • vue实现element-ui对话框可拖拽功能

    vue实现element-ui对话框可拖拽功能

    这篇文章主要介绍了vue实现element-ui对话框可拖拽功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue中template模板编译的过程全面剖析

    vue中template模板编译的过程全面剖析

    这篇文章主要介绍了vue中template模板编译的过程全面剖析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vuex中this.$store.commit和this.$store.dispatch的基本用法实例

    vuex中this.$store.commit和this.$store.dispatch的基本用法实例

    在vue的项目里常常会遇到父子组件间需要进行数据传递的情况,下面这篇文章主要给大家介绍了关于vuex中this.$store.commit和this.$store.dispatch的基本用法的相关资料,需要的朋友可以参考下
    2023-01-01
  • vue2如何获取上页的url地址

    vue2如何获取上页的url地址

    这篇文章主要介绍了vue2如何获取上页的url地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue实现的组件兄弟间通信功能示例

    vue实现的组件兄弟间通信功能示例

    这篇文章主要介绍了vue实现的组件兄弟间通信功能,结合实例形式分析了vue兄弟组件间通信的原理与相关操作技巧,需要的朋友可以参考下
    2018-12-12

最新评论