怎么在Vue中自定义一个文件选择器组件

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

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

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

组件模板和样式

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

//FileSelect.vue

<template>
<labelclass="file-select">
<divclass="select-button">
<spanv-if="value">SelectedFile:{{value.name}}</span>
<spanv-else>SelectFile</span>
</div>
<inputtype="file"@change="handleFileChange"/>
</label>
</template>

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

//FileSelect.vue
...
<stylescoped>
.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;
}
</style>

封装逻辑

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

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

<inputv-model="sth"/>
//上面等价于下面
<inputv-bind:value="sth"v-on:input="sth=$event.target.value"/>

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

//FileSelect.vue
<script>
exportdefault{
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-selectv-model="file"></file-select></p>
<pv-if="file">{{file.name}}</p>
</div>
</template>

<script>
importFileSelectfrom'./FileSelect.vue'

exportdefault{
components:{
FileSelect
},

data(){
return{
file:null
}
}
}
</script>

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