ElementUI 中的DateTimePicker 日期時間選擇器提供了一個默認的時間選擇器樣式如圖所示:
有時我們可能希望更換一下它的樣式,以下面的設計圖為例:
背景和字體顏色比較好改,但是圖標的位置和樣式就有些麻煩。嘗試了一下直接在el-date-picker中添加i圖標標簽:
v-model="myTime"
type="datetime"
>
date data_icon">
但是并沒有效果。
我們可以看到他的dom結構是這樣的:
想將圖標改到右側只能刪除el-input__prefix中的i圖標然后給el-input__suffix添加i圖標。于是在mounted生命周期中編譯如下:
這樣添加后在靜態(tài)頁面可以成功修改。
關鍵詞: