使用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 查找iframe父级页面元素的实现代码
Aug 28 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 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 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
JS与框架页的操作代码
2010/01/17 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
2014年教师节红领巾广播稿
2014/09/10 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技