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 相关文章推荐
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 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
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
万能的php分页类
2017/07/06 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
实例讲解PHP表单
2020/06/10 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
Js 中debug方式
2010/02/07 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python实现根据文件格式分类
2019/10/31 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
用python写PDF转换器的实现
2020/10/29 Python
使用Python封装excel操作指南
2021/01/29 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
甜品店创业计划书
2014/08/14 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
golang语言指针操作
2022/04/14 Golang