The code is as follows:




Recently contact Element - the UI, use the date selection of plug-ins, need icon icon on the right shows, why set the align on its way to the right doesn't work, who can help me answer the bosses

CodePudding user response:

 

: 
: readonly="! The 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=https://bbs.csdn.net/topics/> userInput=value" 
@ change="handleChange" 
@ mouseenter. Native="handleMouseEnter" 
@ mouseleave. Native="showClose=false" 
: validateEvent="false" 
Ref="reference" & gt; 

: 
@ click="handleFocus" & gt; 
 

@ click="handleClickIcon" 
: 
V - if="haveTrigger" & gt; 
 
 

Look at the Datepicker code, look at the two slot
This reuse the el - input, the prefix used in front of the icon, the suffix behind the icon fixed is a closed X,
So you need copy one component may only according to the source code, after all, made the wheel does not support

CodePudding user response:

Set the align="left" or right is some ICONS, relative to the input box to choose the date of the grid is left or right alignment, not icon on the left or right alignment, if to icon to the right alignment, the simple way is to cover its own style, it is the default styles float: left, to float: right:, then in this case, the default empty icon will be hidden away, set the display: none; The important thing is its parent element, display: inline - flex, want to change, change the display: inline - block; Other padding to adjust it, also can appear otherwise placeholder position is not very good out of the box, so that will can, ribs on the solution, with the method of the upstairs

CodePudding user response:

Has just stepped on the pit

 & lt; ! - the timing control, ICONS for the date format and display on the right side - & gt; 
: 
V - else - if="searchItem. Type=='timeWithIconDate'" 
V - model="form [searchItem name]" 
Type="datetime" 
: placeholder="searchItem placeholder | | 'please select'" 
The prefix - icon="el - icon - date" 
: disabled="searchItem. Disabled" 
@ mouseenter. Native="
HandleMouseEnter (form [searchItem name], searchItem, item. ColId) 
"
@ mouseleave. Native="
$set (dateVisableArray, item colId, false) 
"
/& gt; 

 
//date selector - icon moves to the right - optimization of 
HandleMouseEnter (val, {disabled}, index) {
If (disabled) return; 
if (! Enclosing valueIsEmpty (val)) {
This. $set (enclosing dateVisableArray, index, true); 
} 
}, 
ValueIsEmpty (val) {
{if (Array. IsArray (val)) 
For (the let I=0, len=val. The length; I & lt; Len. I++) {
If (val [I]) {
return false; 
} 
} 
} else {
If (val) {
return false; 
} 
} 
return true; 
} 

 
/* date picker - icon moves to the right */
. The date picker - icon {
width: 100%; 

. El - input__inner {
Padding - left: 15 px; 
Padding - right: 30 px; 
} 

. El - input__prefix {
Left: the initial; 
Right: 5 px; 
} 
& . The date - close {
The el - icon - date {
display: none; 
} 
} 
}