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 call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 Javascript
基于jQuery实现定位导航位置效果
Nov 15 jQuery
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
JavaScript接口实现方法实例分析
May 16 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php类自动加载器实现方法
2015/07/28 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
matplotlib中legend位置调整解析
2017/12/19 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
什么是python的id函数
2020/06/11 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
技术人员面试提纲
2013/11/28 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
给学校的建议书
2014/03/12 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
致运动员的广播稿
2015/08/19 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏