使用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第一课
Feb 27 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
js漂浮广告实现代码
Aug 15 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
js数组中去除重复值的几种方法
Aug 03 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
php错误级别的设置方法
2013/06/17 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
PHP的自定义模板引擎
2017/03/24 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
Angular JS数据的双向绑定详解及实例
2016/12/31 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
python2.x实现人民币转大写人民币
2018/06/20 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
python如何实现图片压缩
2020/09/11 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
小学英语教学反思案例
2014/02/04 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
古诗之感恩老师
2019/10/24 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技