快捷導(dǎo)航

使用Vue 自定義文件選擇器組件的實(shí)例代碼

更新時(shí)間：2020年03月04日 09:46:50 作者：SegmentFault博客

這篇文章主要介紹了使用Vue 自定義文件選擇器組件的實(shí)例代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本文 GitHub https://github.com/qq44924588... 上已經(jīng)收錄，更多往期高贊文章的分類(lèi)，也整理了很多我的文檔，和教程資料。歡迎Star和完善，大家面試可以參照考點(diǎn)復(fù)習(xí)，希望我們一起有點(diǎn)東西。

文件選擇元素是web上最難看的 input 類(lèi)型之一。它們?cè)诿總€(gè)瀏覽器中實(shí)現(xiàn)的方式不同，而且通常非常難看。這里有一個(gè)解決辦法，就是把它封裝成一個(gè)組件。

安裝

如果你尚未設(shè)置項(xiàng)目，可以使用 vue-cli 的 webpack-simple 模板啟動(dòng)一個(gè)新項(xiàng)目。

$ npm install -g vue-cli
$ vue init webpack-simple ./file-upload # Follow the prompts.
$ cd ./file-upload
$ npm install # or yarn

組件模板和樣式

該組件主要做的就是將 input type=”file” 元素包裝在標(biāo)簽中，并在其中顯示其他內(nèi)容，這種思路雖然簡(jiǎn)單，便卻很實(shí)用。

// 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>

現(xiàn)在來(lái)加一些樣式美化一下：

// 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>

封裝邏輯

對(duì)于瀏覽器來(lái)說(shuō)， file 是一種非常特殊的類(lèi)型，所以有一些特殊的規(guī)則使它們有時(shí)很難處理。(更多信息請(qǐng) 點(diǎn)擊這里 )。因此，我們可以借助 v-model 來(lái)封裝，讓該組件像普通表單元素一樣。我們知道 v

我們知道， Vue 是單項(xiàng)數(shù)據(jù)流， v-model 只是語(yǔ)法糖而已，如下所示：

<input v-model="sth" />
// 上面等價(jià)于下面
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

知道了 v-model 的原理，我們來(lái)實(shí)現(xiàn)一下 FileSelect 組件的邏輯：

// FileSelect.vue 
<script>
export default {
 props: {
 // 這里接受一個(gè) value 因?yàn)?v-model 會(huì)給組件傳遞一個(gè) value 屬性
 value: File
 },

 methods: {
 handleFileChange(e) {
  // 同樣觸發(fā)一個(gè) input 來(lái)配合 v-model 的使用
  this.$emit('input', e.target.files[0])
 }
 }
}
</script>

用法

現(xiàn)在，我們來(lái)用下 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>

總結(jié)

雖然該事例很簡(jiǎn)單也很基礎(chǔ)，但我們可以在這之上完善更強(qiáng)大的功能，在開(kāi)發(fā)中，單向數(shù)據(jù)流雖然簡(jiǎn)單且易讀，但在一些實(shí)際的開(kāi)發(fā)中，Vue 的自定義組件，使用雙向綁定也就是 v-model 的方式，會(huì)更加靈活實(shí)用，

我們需要了解及掌握這種思路，希望對(duì)大家有所幫助。

下節(jié)會(huì)在公眾號(hào)發(fā)布對(duì)應(yīng)的視頻教程，敬請(qǐng)關(guān)注。

代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具Fundebug 。

到此這篇關(guān)于使用Vue 自定義文件選擇器組件的文章就介紹到這了,更多相關(guān)vue自定義選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: