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 相关文章推荐
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
JQuery学习总结【二】
Dec 01 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 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 和 MYSQL
2006/10/09 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
stripos函数知识点实例分享
2019/02/11 PHP
php中错误处理操作实例分析
2019/08/23 PHP
JavaScript学习笔记之JS函数
2015/01/22 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
搞笑的程序猿:看看你是哪种Python程序员
2015/06/12 Python
Python循环语句之break与continue的用法
2015/10/14 Python
python skimage 连通性区域检测方法
2018/06/21 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
django修改models重建数据库的操作
2020/03/31 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
2014政务公开实施方案
2014/02/19 职场文书
端午节活动策划方案
2014/03/09 职场文书
超市促销活动总结
2014/07/01 职场文书
初中教师个人总结
2015/02/10 职场文书
五年级作文之成长
2019/09/16 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python