vue+vux实现移动端文件上传样式


Posted in Javascript onJuly 28, 2017

样式使用的是vux的cell组件 如下图的官方demo样子

vue+vux实现移动端文件上传样式

上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type=‘file'  就可以拥有好看的样式的文件上传了

<!--引入组件-->
import { Cell } from 'vux'
<!--官网的组件是这么写的-->
<group>
  <cell title="title" value="value"></cell>
</group>

下面我们要改造cell变成我们想要的结果

<cell title="附件" @click.native.stop="openFile">
     <input type="file" @change="fileChange()" style="display: none" ref="file"multiple="multiple">
     <i class="fa fa-file"></i>
</cell>

解释一下:

@是v-on的缩写;在组建中调用原声clik要加native;stop解释不清楚,请读者百度

input相当于隐藏了,再也看不到那么丑陋的样式了

i标签是图片,使用了fontawesome的样式,在main.js里边引入

import '../node_modules/font-awesome/css/font-awesome.min.css'

如果不使用fontawesome也可以添加样式

style="background: url("图标地址../../的形式");"

现在移动端的文件上传html+css已经写完了

js代码如下:

openFile(){
    this.$refs.file.click();
}

解释一下:

html中给input绑定了一个属性ref = ‘file' 我个人觉得相当于 给input赋值一个id

在通过this.$refs.file 就相当于document.getElementById('file'); 这个都是vue特有的功能;比较特别的dom操作

然后click()方法就会打开文件;

至于@change()方法待续!!!这个方法不大众化,需要单独写!

以上所述是小编给大家介绍的vue+vux实现移动端文件上传样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
Javascript动画效果(1)
Oct 11 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
React四级菜单的实现
Apr 08 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 #Javascript
vue使用vue-cli快速创建工程
Jul 28 #Javascript
用JS实现简单的登录验证功能
Jul 28 #Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 #Javascript
vue中七牛插件使用的实例代码
Jul 28 #Javascript
Vue.js中的图片引用路径的方式
Jul 28 #Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 #Javascript
You might like
Get或Post提交值的非法数据处理
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
php获取操作系统语言代码
2013/11/04 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JS重学系列之聊聊new操作符
2019/03/04 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
Python最长公共子串算法实例
2015/03/07 Python
Python的randrange()方法使用教程
2015/05/15 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
python字符串中的单双引
2017/02/16 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
公务员年总结的自我评价
2013/10/25 职场文书
德育标兵事迹材料
2014/08/24 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript