使用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 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
使用Vue构建可重用的分页组件
Mar 26 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
VUE element-ui 写个复用Table组件的示例代码
2017/11/18 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Vue中props的使用详解
2018/06/15 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python PIL图片添加字体的例子
2019/08/22 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
Python os库常用操作代码汇总
2020/11/03 Python
军训自我鉴定怎么写
2014/02/13 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
学习保证书范文
2014/04/30 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
业务内勤岗位职责
2015/04/13 职场文书
警示教育片观后感
2015/06/17 职场文书
校园运动会广播稿
2015/08/19 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL