使用Vue 自定义文件选择器组件的实例代码


Posted in Javascript onMarch 04, 2020

本文 GitHub  https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

文件选择元素是web上最难看的 input 类型之一。它们在每个浏览器中实现的方式不同,而且通常非常难看。这里有一个解决办法,就是把它封装成一个组件。

安装

如果你尚未设置项目,可以使用 vue-cliwebpack-simple 模板启动一个新项目。

$ npm install -g vue-cli
$ vue init webpack-simple ./file-upload # Follow the prompts.
$ cd ./file-upload
$ npm install # or yarn

组件模板和样式

该组件主要做的就是将 input type=”file” 元素包装在标签中,并在其中显示其他内容,这种思路虽然简单,便却很实用。

// FileSelect.vue

<template>
 <label class="file-select">
 <div class="select-button">
  <span v-if="value">Selected File: {{value.name}}</span>
  <span v-else>Select File</span>
 </div>
 <input type="file" @change="handleFileChange"/>
 </label>
</template>

现在来加一些样式美化一下:

// FileSelect.vue
...
<style scoped>
.file-select > .select-button {
 padding: 1rem;

 color: white;
 background-color: #2EA169;

 border-radius: .3rem;

 text-align: center;
 font-weight: bold;
}

/* Don't forget to hide the original file input! */
.file-select > input[type="file"] {
 display: none;
}
</style>

封装逻辑

对于浏览器来说, file 是一种非常特殊的类型,所以有一些特殊的规则使它们有时很难处理。(更多信息请 点击这里 )。因此,我们可以借助 v-model 来封装,让该组件像普通表单元素一样。我们知道 v

我们知道, Vue 是单项数据流, v-model 只是语法糖而已,如下所示:

<input v-model="sth" />
// 上面等价于下面
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

知道了 v-model 的原理,我们来实现一下 FileSelect 组件的逻辑:

// FileSelect.vue 
<script>
export default {
 props: {
 // 这里接受一个 value 因为 v-model 会给组件传递一个 value 属性
 value: File
 },

 methods: {
 handleFileChange(e) {
  // 同样触发一个 input 来配合 v-model 的使用
  this.$emit('input', e.target.files[0])
 }
 }
}
</script>

用法

现在,我们来用下 FileSelect 组件

// App.vue
<template>
 <div>
 <p>选择文件: <file-select v-model="file"></file-select></p>
 <p v-if="file">{{file.name}}</p>
 </div>
</template>

<script>
import FileSelect from './FileSelect.vue'

export default {
 components: {
 FileSelect
 },

 data() {
 return {
  file: null
 }
 }
}
</script>

总结

虽然该事例很简单也很基础,但我们可以在这之上完善更强大的功能,在开发中,单向数据流虽然简单且易读,但在一些实际的开发中,Vue 的自定义组件,使用双向绑定也就是 v-model 的方式,会更加灵活实用,

我们需要了解及掌握这种思路,希望对大家有所帮助。

下节会在公众号发布对应的视频教程,敬请关注。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具Fundebug 。

到此这篇关于使用Vue 自定义文件选择器组件的文章就介绍到这了,更多相关vue自定义选择器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
js实现的类似于asp数据字典的数据类型代码实例
Sep 03 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 Javascript
JS中==、===你分清楚了吗
Mar 04 #Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 #Javascript
通过实例了解Javascript柯里化流程
Mar 03 #Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 #Javascript
Javascript作用域和作用域链原理解析
Mar 03 #Javascript
JS数组方法reduce的用法实例分析
Mar 03 #Javascript
Javascript模拟实现new原理解析
Mar 03 #Javascript
You might like
SMARTY学习手记
2007/01/04 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP实现事件机制的方法
2015/07/10 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
Python中的自省(反射)详解
2015/06/02 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
C有"按引用传递"吗
2016/09/06 面试题
毕业生的自我评价分享
2013/12/18 职场文书
安全生产先进个人材料
2014/02/06 职场文书
装饰活动策划方案
2014/02/11 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
教师岗位职责范本
2015/04/02 职场文书
同意离婚答辩状
2015/05/22 职场文书
远程教育学习心得体会
2016/01/23 职场文书