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