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

 更新时间:2020年03月04日 09:46:50   作者:SegmentFault博客  
这篇文章主要介绍了使用Vue 自定义文件选择器组件的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

本文 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自定义选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue读取本地静态.md并侧边栏导航跳转、展示.md文件的操作方法

    Vue读取本地静态.md并侧边栏导航跳转、展示.md文件的操作方法

    这篇文章主要介绍了Vue读取本地静态.md并侧边栏导航跳转、展示.md文件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • vue中router.beforeEach()的简单用法举例

    vue中router.beforeEach()的简单用法举例

    router.beforeEach()一般用来做一些进入页面的限制,比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面,下面这篇文章主要给大家介绍了关于vue中router.beforeEach()的简单用法举例,需要的朋友可以参考下
    2023-01-01
  • Ant Design Vue中的table与pagination的联合使用方式

    Ant Design Vue中的table与pagination的联合使用方式

    这篇文章主要介绍了Ant Design Vue中的table与pagination的联合使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue3语法中使用vscode打开满屏红线报错的完美解决方法

    vue3语法中使用vscode打开满屏红线报错的完美解决方法

    这篇文章主要介绍了vue3语法中使用vscode打开满屏红线报错的完美解决方法,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • vue element-ui里的table中表头与表格出现错位的解决

    vue element-ui里的table中表头与表格出现错位的解决

    这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue+ECharts+高德地图API实现天气预报数据可视化的教程

    Vue+ECharts+高德地图API实现天气预报数据可视化的教程

    所谓数据可视化,我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比,走向,对于数据可视化,很多互联网公司是很看重这一块的,包括大厂,本就将给大家介绍如何通过Vue+ECharts+高德地图API实现天气预报数据可视化
    2023-06-06
  • vue实现购物车的小练习

    vue实现购物车的小练习

    这篇文章主要为大家详细介绍了vue实现购物车的小练习,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vue环境如何实现div focus blur焦点事件

    vue环境如何实现div focus blur焦点事件

    这篇文章主要介绍了vue环境如何实现div focus blur焦点事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue路由传参接收以及传参对象为对象时的问题及解决

    vue路由传参接收以及传参对象为对象时的问题及解决

    这篇文章主要介绍了vue路由传参接收以及传参对象为对象时的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue 数据操作相关总结

    vue 数据操作相关总结

    这篇文章主要介绍了vue 数据操作的相关资料,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12

最新评论