快捷導(dǎo)航

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

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

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

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

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

安裝

如果你尚未設(shè)置項目，可以使用 vue-cli 的 webpack-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” 元素包裝在標(biāo)簽中，并在其中顯示其他內(nèi)容，這種思路雖然簡單，便卻很實用。

// 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)在來加一些樣式美化一下：

// 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 是一種非常特殊的類型，所以有一些特殊的規(guī)則使它們有時很難處理。(更多信息請點擊這里 )。因此，我們可以借助 v-model 來封裝，讓該組件像普通表單元素一樣。我們知道 v

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

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

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

// FileSelect.vue 
<script>
export default {
 props: {
 // 這里接受一個 value 因為 v-model 會給組件傳遞一個 value 屬性
 value: File
 },

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

用法

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

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

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

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

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

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

您可能感興趣的文章: