怎么在Vue中自定義一個文件選擇器組件

這篇文章將為大家詳細講解有關(guān)怎么在Vue中自定義一個文件選擇器組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

使用 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>

關(guān)于怎么在Vue中自定義一個文件選擇器組件就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。