前言

為虹口等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及虹口網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、網(wǎng)站建設(shè)、虹口網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

在用戶使用過程中提出一鍵導(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
 

 
 {{day.label}}({{day.value}})
 
// 暫定的數(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 屬性并不會驗證選中文件的類型只是在用戶瀏覽時只顯示指定文件類型

缺點

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

解決方式

 
點擊上傳
 
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
 
  
   
   
   
  
  {{item.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è)定好的類名來修改樣式)

例子代碼如下:

  

 
.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é)

1. 介紹了radio基本屬性，使用案例并優(yōu)化了radio的樣式
2. 原始上傳文件元素的缺點以及改善方法

以上所述是小編給大家介紹的基于element-ui組件手動實現(xiàn)單選和上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！