溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
在用戶使用過程中提出一鍵導入的功能，需求如下:點擊導入按鈕顯示提示框，然后是單選框以及上傳按鈕。pc端常使用element-ui組件，但是這個項目是vue1的老項目，并且沒有element-ui組件。所以需要自己動手實現單選功能和上傳功能。
radio 屬性及方法
name： 用于定義同一類型的 radio 同一 name 的 radio 只能選中一個(單選實現)
// 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>
// 暫定的數據
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 也會動態的變更成選中的 radio 的 value
上傳文件
屬性
accept 屬性接受一個(多個值時)逗號分隔的字符串 如:accept="image/png, image/jpeg"
缺點
解決方式
<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('文件格式錯誤，請確認后重試。')
}
},
}
當點擊上傳按鈕觸發 onUploadClick 事件后，獲取到 upload 綁定的 DOM (由于是老的項目使用的是$els,vue2 使用 ref)手動觸發 click 事件并且可以在change事件中默認接收一個文件信息對象其中target.files[0]包含文件的更多信息，如下圖:
判斷文件類型
可以看到 change 事件的返回值包含著文件屬性，這里我們需要判斷是文件名是否為 excel，使用正則的 test 方法。
重置change事件
在最后 this.$refs.uploadFile.value = null; 移除文件，可以保證上傳同樣的文件時，也會觸發 change 事件
優化樣式
至此關于表單方面的功能都已經實現了，由于原始的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'
}
效果如下:
其實radio__replace類名對應的標簽就是我們自定義的radio，其中的白色原點是通過偽類生成的css代碼放在最后,感興趣可以看下
偽類樣式修改
如果想通過類名來改變白色原點的樣式，可以通過權重來改變。如下通過isShow來給外層添加test類名 而起始的時候設置的權重為兩層，之后添加一層可以起到修改樣式的效果。(ps:偽類不能通過預先設定好的類名來修改樣式)
例子代碼如下:
<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;
}
}
總結
以上所述是小編給大家介紹的基于element-ui組件手動實現單選和上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
