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

2023-07-29 20:39:04 156

本文GitHub https://github.com/qq44924588...上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

文件选择元素是web上最难看的input类型之一。它们在每个浏览器中实现的方式不同，而且通常非常难看。这里有一个解决办法，就是把它封装成一个组件。

安装

如果你尚未设置项目，可以使用vue-cli的webpack-simple模板启动一个新项目。

$npminstall-gvue-cli
$vueinitwebpack-simple./file-upload#Followtheprompts.
$cd./file-upload
$npminstall#oryarn

组件模板和样式

该组件主要做的就是将inputtype=”file”元素包装在标签中，并在其中显示其他内容，这种思路虽然简单，便却很实用。

//FileSelect.vue

现在来加一些样式美化一下：

//FileSelect.vue
...

.file-select>.select-button{
padding:1rem;

color:white;
background-color:#2EA169;

border-radius:.3rem;

text-align:center;
font-weight:bold;
}

/*Don'tforgettohidetheoriginalfileinput!*/
.file-select>input[type="file"]{
display:none;
}

封装逻辑

对于浏览器来说，file是一种非常特殊的类型，所以有一些特殊的规则使它们有时很难处理。(更多信息请点击这里)。因此，我们可以借助v-model来封装，让该组件像普通表单元素一样。我们知道v

我们知道，Vue是单项数据流，v-model只是语法糖而已，如下所示：


//上面等价于下面

知道了v-model的原理，我们来实现一下FileSelect组件的逻辑：

//FileSelect.vue

用法

现在，我们来用下FileSelect组件

//App.vue

总结

虽然该事例很简单也很基础，但我们可以在这之上完善更强大的功能，在开发中，单向数据流虽然简单且易读，但在一些实际的开发中，Vue的自定义组件，使用双向绑定也就是v-model的方式，会更加灵活实用，

我们需要了解及掌握这种思路，希望对大家有所帮助。

下节会在公众号发布对应的视频教程，敬请关注。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log调试，这边顺便给大家推荐一个好用的BUG监控工具Fundebug。

到此这篇关于使用Vue自定义文件选择器组件的文章就介绍到这了,更多相关vue自定义选择器内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐