快捷導(dǎo)航

基于element-ui組件手動實現(xiàn)單選和上傳功能

更新時間：2018年12月06日 08:22:59 作者：三只萌新

在用戶使用過程中提出一鍵導(dǎo)入的功能，需求如下:點擊導(dǎo)入按鈕顯示提示框，然后是單選框以及上傳按鈕。這篇文章主要介紹了基于element-ui組件手動實現(xiàn)單選和上傳功能,需要的朋友可以參考下

前言

在用戶使用過程中提出一鍵導(dǎo)入的功能，需求如下:點擊導(dǎo)入按鈕顯示提示框，然后是單選框以及上傳按鈕。pc端常使用element-ui組件，但是這個項目是vue1的老項目，并且沒有element-ui組件。所以需要自己動手實現(xiàn)單選功能和上傳功能。

radio 屬性及方法

name：用于定義同一類型的 radio 同一 name 的 radio 只能選中一個(單選實現(xiàn))

id：用于和 label 標簽關(guān)聯(lián)起來實現(xiàn)點擊 label 標簽內(nèi)的元素也能選中 radio
value：單選按鈕的值，選中某個單選按鈕相當于拿到 value 值 tip：用于識別組中的哪個單選按鈕被選中。
checked 用于設(shè)置默認選中的 radio
v-model 創(chuàng)建雙向數(shù)據(jù)綁定。會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源。

// html
 <div v-for="day in weekSelectList"
 :key="day.id"
 class="select__day">
 <input type="radio"
  name="week"
  :id="day.label"
  :value="day.value"
  v-model="selectedDay">
 <label :for="day.label">{{day.label}}({{day.value}})</label>
 </div>
// 暫定的數(shù)據(jù)
data(){
 return {
 weekSelectList: [
  { label: '周一', value: '2018-12', id: 1 },
  { label: '周二', value: '2018-13', id: 2 },
  { label: '周三', value: '2018-14', id: 3 },
  { label: '周四', value: '2018-15', id: 4 },
  { label: '周五', value: '2018-16', id: 5 }
 ]
 },
 selectedDay: '2018-12',
}

通過 v-model 綁定 selectedDay，匹配到相同的值會將該 radio 選中,當改變 radio 的選擇，selectedDay 也會動態(tài)的變更成選中的 radio 的 value

上傳文件

屬性

accept 屬性接受一個(多個值時)逗號分隔的字符串如:accept="image/png, image/jpeg"

id
name
注意：accept 屬性并不會驗證選中文件的類型只是在用戶瀏覽時只顯示指定文件類型

缺點

在未上傳文件時，顯示"未選擇文件"，用戶界面不友好，不可配置
同一個文件名即使內(nèi)容改變了，重新上傳也不會觸發(fā) change 事件
用戶如果在上傳過程中點擊了“取消”，已經(jīng)上傳的文件會被移除

解決方式

 <div class="upload__button"
 :class="{'upload__button--uploaded':isUploaded}"
 @click="onUploadClick">點擊上傳</div>
 <input type="file"
 class="upload__file"
 v-el:upload
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
 @change="onFileChange" />
methods:{
 onUploadClick() {
 if (!this.isUploaded) {
  this.$els.upload.click()
 }
 },
 onFileChange(e) {
 const file = e.target.files[0]
 if (file === undefined) {
 return
 }
 this.fileName = file.name
 const result = /[xls|xlsx]$/.test(this.fileName)
 if (result) {
  this.isUploaded = true
  this.showAlert('上傳成功')
  this.$els.upload.value = null
 } else {
  this.showAlert('文件格式錯誤，請確認后重試。')
 }
 },
}

當點擊上傳按鈕觸發(fā) onUploadClick 事件后，獲取到 upload 綁定的 DOM (由于是老的項目使用的是$els,vue2 使用 ref)手動觸發(fā) click 事件并且可以在change事件中默認接收一個文件信息對象其中target.files[0]包含文件的更多信息，如下圖:

判斷文件類型

可以看到 change 事件的返回值包含著文件屬性，這里我們需要判斷是文件名是否為 excel，使用正則的 test 方法。

重置change事件

在最后 this.$refs.uploadFile.value = null; 移除文件，可以保證上傳同樣的文件時，也會觸發(fā) change 事件

優(yōu)化樣式

至此關(guān)于表單方面的功能都已經(jīng)實現(xiàn)了，由于原始的radio樣式比較丑，而且不能更改。下面我們就想辦法將它做的漂亮些。

// template
 <label v-for="(item,index) in radioList"
  :key="item.value"
  :for="item.linkLabel"
  :accesskey="index">
  <span class="content__input">
   <span class="radio__replace"
   :class="{'radio__replace--checked':selectedRadio===item.value,'radio__replace--disable':item.isDisabled}">
   </span>
   <input v-model="selectedRadio"
   type="radio"
   class="radio__button"
   name="radio"
   :id="item.linkLabel"
   :tabindex="index"
   :value="item.value"
   :disabled="item.isDisabled"
   @focus="item.isFocus = true"
   @blur="item.isFocus = false" />
  </span>
  <span class="content__text">{{item.label}}</span>
  </label>
// data
 data() {
 return {
  radioList: [
  {
   linkLabel: 'label1',
   value: '1',
   isDisabled: false,
   isFocus: false,
   label: '標簽1'
  },
  {
   linkLabel: 'label2',
   value: '2',
   isDisabled: false,
   isFocus: false,
   label: '標簽2'
  },
  {
   linkLabel: 'label3',
   value: '3',
   isDisabled: true,
   isFocus: false,
   label: '標簽3'
  }
  ],
  selectedRadio: '1'
 }

這里使用遍歷的方式在data中定義多個radio，在前面我們講到過radio的基本用法，使用label的for屬性和input的for屬性實現(xiàn)關(guān)聯(lián)起來。(這里我將input放在label內(nèi)，這樣點擊整個label都會選中，沒有l(wèi)abel和radio元素之間的間隙)。
name相同的radio會實現(xiàn)單選效果，tabindex代表使用"Tab"鍵的遍歷順序 ,value是選中時v-model綁定的selectedRadio也就會跟著變更
實現(xiàn)個性化樣式的關(guān)鍵在于結(jié)構(gòu)就是用一個類名content__input標簽將類名radio__replace和radio包起來。設(shè)置定位層級(相當于radio被覆蓋了，然而只要點擊到labelradio就會被選中)
通過selectedRadio選中的值和當前radio值做對比，以及isDisabled這些Boolean值來動態(tài)綁定class實現(xiàn)我們自定義的radio樣式切換

效果如下:

其實radio__replace類名對應(yīng)的標簽就是我們自定義的radio，其中的白色原點是通過偽類生成的css代碼放在最后,感興趣可以看下

偽類樣式修改

如果想通過類名來改變白色原點的樣式，可以通過權(quán)重來改變。如下通過isShow來給外層添加test類名而起始的時候設(shè)置的權(quán)重為兩層，之后添加一層可以起到修改樣式的效果。(ps:偽類不能通過預(yù)先設(shè)定好的類名來修改樣式)

例子代碼如下:

<div :class="{test:isShow}"
  @click="onRedClick">
  <div class="text__item"></div>
 </div>
.text__item {
 &:after {
 content: '';
 width: 30px;
 height: 30px;
 background-color: #f00;
 position: absolute;
 bottom: 20px;
 }
}
.test {
 .text__item {
 &:after {
  background-color: #ff0;
 }
 }
}
// css
 .radio {
  &__replace {
   border: 1px solid #dcdfe6;
   border-radius: 100%;
   width: 14px;
   height: 14px;
   background-color: #fff;
   position: relative;
   cursor: pointer;
   display: inline-block;
   box-sizing: border-box;
   z-index: 999;
   transition: 0.15s ease-in;
   &--checked {
   border-color: #409eff;
   background-color: #409eff;
   }
   &--disable {
   cursor: not-allowed;
   }
   &:after {
   width: 4px;
   height: 4px;
   border-radius: 100%;
   background-color: #fff;
   content: '';
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   }
  }
  &__button {
   opacity: 0;
   outline: none;
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: 0;
  }
  }

總結(jié)