61,128
社区成员
发帖
与我相关
我的任务
分享Element-ui 时间选择插件icon图片位置怎么调啊
代码如下：
<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对其方式到右侧不起作用啊，大佬们谁能帮忙解答一下
<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对其方式到右侧不起作用啊，大佬们谁能帮忙解答一下
...全文
请发表友善的回复…
发表回复
梦港清澈 2020-11-26
- 打赏
- 举报
先display:none隐藏自带的左图标，再把删除图标的::after改成自己要的图片icon，其中这个图标要绝对定位不然会被原本在的删除图标挤走。最后选择框的:hover状态下隐藏刚才那个::after就好了。
这样就能实现默认状态时间图标在右侧，鼠标移入时图标切换成删除按钮的效果。其他细节根据业务场景微调即可。
筱晓* 2021-10-20
- 举报
怎么做呢？可以举个例子嘛
王胖墩儿 2020-11-04
- 打赏
- 举报
正好刚踩了这个坑
<!-- 时间选择控件，图标为日期格式且显示于右侧 -->
<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;
}
}
}
河南棒小伙 2019-06-06
- 打赏
- 举报
设置align="left"或者right是点图标之后，要选择的日期格子相对于输入框是左对齐还是右对齐，并不是图标的左对齐还是右对齐，如果要图标右对齐的话，简单点的办法就是覆盖它自带的样式，它默认样式是float:left，改成float：right:，然后这样的话，默认的清空icon恐怕要隐藏掉了，设置display:none;重要的一点是它的父元素，display:inline-flex,要换一下，换成display：inline-block；其他的padding也对着调一下，否则placeholder会出现位置不太好出框的情况，这样将就着能用。根儿上的解决方法，用楼上的方法可以了
狗蛋丶 2019-06-06
- 打赏
- 举报
<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="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>
