代碼如下：
<template>
<el-date-picker
v-model="timeData"
type="daterange"
align="right"
range-separator="—"
start-placeholder="開始日期"
end-placeholder="結束日期">
</el-date-picker>
</template>
最近剛接觸Element-ui，用的日期選擇插件，需要icon圖示在右側顯示，為什么設定align對其方式到右側不起作用啊，大佬們誰能幫忙解答一下
uj5u.com熱心網友回復：
<el-input
class="el-date-editor"
:class="'el-date-editor--' + type"
:readonly="!editable || readonly || type === 'dates' || type === 'week'"
:disabled="pickerDisabled"
:size="pickerSize"
:name="name"
v-bind="firstInputId"
v-if="!ranged"
v-clickoutside="handleClose"
:placeholder="placeholder"
@focus="handleFocus"
@keydown.native="handleKeydown"
:value="https://bbs.csdn.net/topics/displayValue"
@input="value => userInput = value"
@change="handleChange"
@mouseenter.native="handleMouseEnter"
@mouseleave.native="showClose = false"
:validateEvent="false"
ref="reference">
<i slot="prefix"
class="el-input__icon"
:class="triggerClass"
@click="handleFocus">
</i>
<i slot="suffix"
class="el-input__icon"
@click="handleClickIcon"
:class="[showClose ? '' + clearIcon : '']"
v-if="haveTrigger">
</i>
</el-input>
來看一下Datepicker的代碼，注意看那兩個 slot
這玩意復用了el-input,前面的prefix用了圖示，后面的suffix圖示固定是個關閉的X。
所以你的需求可能只能照著原始碼抄一個component出來。畢竟造輪子的人不支持
uj5u.com熱心網友回復：
設定align="left"或者right是點圖示之后，要選擇的日期格子相對于輸入框是左對齊還是右對齊，并不是圖示的左對齊還是右對齊，如果要圖示右對齊的話，簡單點的辦法就是覆寫它自帶的樣式，它默認樣式是float:left，改成float：right:，然后這樣的話，默認的清空icon恐怕要隱藏掉了，設定display:none;重要的一點是它的父元素，display:inline-flex,要換一下，換成display：inline-block；其他的padding也對著調一下，否則placeholder會出現位置不太好出框的情況，這樣將就著能用。根兒上的解決方法，用樓上的方法可以了uj5u.com熱心網友回復：
正好剛踩了這個坑
<!-- 時間選擇控制元件，圖示為日期格式且顯示于右側 -->
<el-date-picker
:class="[
'date-picker-icon',
dateVisableArray[item.colId] ? 'date-close' : ''
]"
v-else-if="searchItem.type == 'timeWithIconDate'"
v-model="form[searchItem.name]"
type="datetime"
:placeholder="searchItem.placeholder || '請選擇'"
prefix-icon="el-icon-date"
:disabled="searchItem.disabled"
@mouseenter.native="
handleMouseEnter(form[searchItem.name], searchItem, item.colId)
"
@mouseleave.native="
$set(dateVisableArray, item.colId, false)
"
/>
// 日期選擇器-圖示右移-方法優化
handleMouseEnter(val, { disabled }, index) {
if (disabled) return;
if (!this.valueIsEmpty(val)) {
this.$set(this.dateVisableArray, index, true);
}
},
valueIsEmpty(val) {
if (Array.isArray(val)) {
for (let i = 0, len = val.length; i < len; i++) {
if (val[i]) {
return false;
}
}
} else {
if (val) {
return false;
}
}
return true;
}
/* 日期選擇器-圖示右移 */
.date-picker-icon {
width: 100%;
.el-input__inner {
padding-left: 15px;
padding-right: 30px;
}
.el-input__prefix {
left: initial;
right: 5px;
}
&.date-close {
.el-icon-date {
display: none;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/203107.html
標籤：HTML(CSS)