附件上传组件封装
时间:2019-08-28
本文章向大家介绍附件上传组件封装,主要包括附件上传组件封装使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
移动端开发时有个文件上传的功能,觉得找插件再覆盖他的样式也挺麻烦的,就自己造个轮子吧,效果如下:
自定义样式代码如下:主要思路就是 自定义上传样式 覆盖原有的默认样式,自己加一个上传的文件列表样式
css样式如下:
<style scoped> .upTopbox{ font-size: 0.28rem; position: relative; } .upAddBox{ width:0.4rem; height:0.4rem; border: 1px solid #DCDCDC; text-align: center; line-height: 0.4rem; position: absolute; right: 0.08rem; } .fileInp{ width:0.4rem; height:0.4rem; opacity: 0; position: absolute; right: 0.08rem; } .upFilesBox{ background: #edf5fd; margin-top: 0.2rem; padding:0.04rem 0 } .upFileImg{ width: 0.7rem; height: 0.7rem; } .upFileText{ line-height: 0.35rem; } .delUpFile{ width: 0.4rem; height: 0.4rem; line-height: 0.4rem; font-size: 0.4rem; text-align: center; margin-top: 0.15rem; transform: rotate(45deg); } </style>
每次上传已经删除后,都把变化提交给父组件
原文地址:https://www.cnblogs.com/zpxm/p/11425190.html
- BZOJ 1046: [HAOI2007]上升序列【贪心+二分状态+dp+递归】
- 【Java学习笔记之九】java二维数组及其多维数组的内存应用拓展延伸
- BZOJ 1293: [SCOI2009]生日礼物【单调队列】
- Javascript缓存投毒学习与实战
- 【Java学习笔记之十】Java中循环语句foreach使用总结及foreach写法失效的问题
- Codeforces 839B Game of the Rows【贪心】
- Codeforces 839A Arya and Bran【暴力】
- 【Java学习笔记之十一】Java中常用的8大排序算法详解总结
- 浅谈zip格式处理逻辑漏洞
- C/C++中peek函数的原理及应用
- 洛谷 P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…【字符串+模拟】
- 洛谷 P1055 ISBN号码【字符串+模拟】
- 【Java学习笔记之十二】Java8增强的工具类:Arrays的用法整理总结
- 利用insert,update和delete注入获取数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何监控和诊断堆外内存使用
- Android仿qq侧滑菜单
- Vue3对于一个前端来讲意味着什么?
- 这就是你日日夜夜想要的docker!!!---------Dockerfile构建nginx、Tomcat、MySQL镜像
- 深入揭秘前端路由本质,手写 mini-router
- 这就是你日日夜夜想要的docker!!!---------Docker四种网络模式解析
- C语言队列的基本操作
- 10款好用到爆的Vim插件,你知道几个?
- 这就是你日日夜夜想要的docker!!!---------Docker Compose容器编排理论+实操
- 模式检验库Meteva笔记:加载本地观测数据
- Go by Example 中文版: SHA1 哈希
- C语言中缀表达式转后缀表达式
- C语言逆波兰表达式计算(后缀表达式计算器)
- SpringBoot+Druid+Mybatis配置多数据源
- C语言共享栈