vue+vux实现移动端文件上传样式
作者：勤奋的搬运工 发布时间：2024-05-02 16:34:40
标签：移动端,文件上传
样式使用的是vux的cell组件 如下图的官方demo样子
上图的样式需要修改一下，把 保护中 修改成一个图片 并且内嵌一个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实现移动端文件上传样式网站的支持！
来源：http://www.cnblogs.com/fooller/archive/2017/07/27/7247643.html
0
投稿猜你喜欢
首先说登陆在config.inc.php文件中,有一个选项需要设置查找：$cfg['Servers'][$i]['a- 如下所示：import matplotlib.pyplot as pltimport numpy as npa = np.array([1,
- 简介细胞自动机（又称元胞自动机），名字虽然很深奥，但是它的行为却是非常美妙的。所有这些怎样实现的呢？我们可以把计算机中的宇宙想象成是一堆方格
- Matplotlib 是 Python 的二维绘图库，用于生成符合出版质量或跨平台交互环境的各类图形。图形解析与工作流图形解析 工
- query方法在 pandas 中，支持把字符串形式的查询表达式传入 query 方法来查询数据，其表达式的执行结果必须返回布尔列表。在进行
- 1. settings.py文件做开发离不开必定离不开日志, 以下是我在工作中写Django项目常用的logging配置.# 日志配置BAS
- 问题：“深入认识Python内建类型”这部分的内容会从源码角度为大家介绍Python中各种常用的内建
- 演示技术栈这次用到了关于css的一些功能，和jQuery。CSS3中添加的新属性animation是用来为元素实现动画效果的，但是anima
- 很多时候，设计师们都会通过各种渠道去了解用户的需求，然而从这些渠道反馈回来的信息大部分只是用户的期望并不是真正的用户需求，但是很多时候这些期
- 下面十条内容的标题原本是《10 Lessons for Young Designers》，是John C. Jay给年青设计师们的十条经验教
- flash_url : "../swfupload/swfupload_f8.swf" upload_url: &quo
- 1.func Fields(s string) []string，这个函数的作用是按照1：n个空格来分割字符串最后返回的是[]string的
- 另外，还有一个很重 要的事情是，在Win32上，mouse move的事件不是一个连续的，也就是说，并不是我们每次移动1px的鼠标指针，就会
- 每每见到这三个函数，我都会很懵，一定要到网上搜搜；今天，恰巧又见到了它们，所以想必是时候为它们做个笔记啦1.slice（数组）用法：arra
- Python可是真强大。但他具体是怎么强大的，让我们一点一点来了解吧（小编每天晚上下班回家会抽时间看看教程，多充实下自己也是好的）。废话不多
- 1.找到路径C:\Users\Administrator下的.condarc，用记事本方式打开，将如下内容插入文件：channels: &n
- 疑问在调用socket的时候，我们会使用到listen()函数，里面有个参数叫backlog, 例如：socket.listen(5). 那
- 本文实例讲述了JavaScript观察者模式原理与用法。分享给大家供大家参考，具体如下：观察者模式观察者模式又叫发布订阅模式（Publish
- “小程序”破解IDE + Demo：https://github.com/gavinkwoe/weapp-ide-crack.git资源汇总
- 方法一（不使用模块，by agonyr）#!/usr/bin/perl -wuse strict;my @seq = ( "A&q
