使用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+xml技术实现分页浏览
Jul 27 Javascript
js获取json元素数量的方法
Jan 27 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
微信小程序本作用域下调用全局JS详解及实例
Feb 22 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
深入研究React中setState源码
Nov 17 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 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
第六节--访问属性和方法
2006/11/16 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
python SVD压缩图像的实现代码
2019/11/05 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
使用CSS3在触屏上为按钮实现激活效果
2013/09/27 HTML / CSS
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
电子专业自荐信
2014/07/01 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
初中语文教学随笔
2015/08/15 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书