怎么在Vue中自定义一个文件选择器组件 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关怎么在Vue中自定义一个文件选择器组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

使用<代码> vue-cli 的<代码> webpack-simple 模板启动一个新项目。

,美元npm install -g vue-cli 　　美元,vue init webpack-simple 。/file-upload #, Follow 从而提示。　　美元,cd 。/文件上传　　美元,npm install #,趁机纱

<强>组件模板和样式

该组件主要做的就是将<代码>输入type="文件" 元素包装在标签中,并在其中显示其他内容,这种思路虽然简单,便却很实用。

//, FileSelect.vue 　　　　& lt; template> 　　,& lt; label 类=癴ile-select"比; 　　,& lt; div 类=皊elect-button"比; 　　& lt;才能span v=皏alue"祝辞Selected 文件:,{{value.name}} & lt;/span> 　　& lt;才能span v-else> Select File 　　,& lt;/div> 　　,& lt; input 类型=癴ile", @change=癶andleFileChange"/比; 　　,& lt;/label> 　　& lt;/template>

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

//, FileSelect.vue 　　… 　　& lt; style scoped> 　　.file-select 祝辞,.select-button { 　　,填充:1快速眼动; 　　　　,颜色:白色; 　　,背景颜色:# 2 ea169; 　　　　,这个特性:.3rem; 　　　　,text-align:中心; 　　,粗细:大胆的; 　　}/*,不要# 39;t forget 用hide 从而original file 输入。*/.file-select 祝辞,输入(type=癴ile"), { 　　,显示:没有; 　　} 　　& lt;/style>

<强>封装逻辑

对于浏览器来说,文件<代码> 是一种非常特殊的类型,所以有一些特殊的规则使它们有时很难处理。(更多信息请点击这里),因此,我们可以借助<代码> v模型>

我们知道,Vue是单项数据流,<代码> v模型> & lt; input v模型=皊th",/比;//,上面等价于下面　　& lt; input v-bind: value=https://www.yisu.com/zixun/澳呈隆眝:输入="…=$ event.target。值"/>

知道了v模型的原理,我们来实现一下FileSelect组件的逻辑:

//, FileSelect.vue 　　& lt; script> 　　export default { 　　,道具:{ 　　,//这里接受一个,value 因为,v-model 会给组件传递一个,value 属性　　,价值:文件　　}, 　　　　,方法:{ 　　,handleFileChange (e), {//,才能同样触发一个,input 来配合,v-model 的使用　　美元。才能发出(& # 39;输入# 39;,,e.target.files [0]) 　　,} 　　,} 　　} 　　& lt;/script>

<强>用法

现在,我们来用下<代码> FileSelect> //, App.vue 　　& lt; template> 　　,& lt; div> 　　,& lt; p>选择文件:,& lt; file-select v模型=癴ile"祝辞& lt;/file-select> & lt;/p> 　　,& lt; p v=癴ile"在{{file.name}} & lt;/p> 　　,& lt;/div> 　　& lt;/template> 　　　　& lt; script> 　　import FileSelect 得到& # 39;。/FileSelect.vue& # 39; 　　　　export default { 　　,组件:{ 　　,FileSelect 　　}, 　　　　,数据(){ 　　,return { 　　文件:才能空　　,} 　　,} 　　} 　　& lt;/script>

关于怎么在Vue中自定义一个文件选择器组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。