vue3 el-date-picker icon放后面

在Vue3中，el-date-picker组件是Element UI库中的一个日期选择器组件。默认情况下，该组件的图标是放在输入框前面的。如果你想要将图标放在输入框后面，可以通过自定义样式来实现。

首先，你可以使用`append-icon`属性来设置一个自定义的图标，并将其放在输入框后面。例如：

<el-date-picker
  v-model="date"
  append-icon="el-icon-date"
></el-date-picker>

然后，你可以使用CSS来调整图标的位置。通过设置`position`属性为`absolute`，并使用`right`属性来控制图标距离输入框右侧的距离。例如：

.el-date-picker__icon {
  position: absolute;
  right: 10px;
}

这样就可以将图标放在输入框后面了。

相关问题

vue2 el-date-picker 自定义后置图标

为了在vue2 el-date-picker中自定义后置图标，可以在标签中添加suffix-icon属性，并将其设置为所需的图标类名。例如，可以将suffix-icon设置为“el-icon-date”来使用日期图标。同时，也可以通过添加prefix-icon属性来设置前置图标。如果需要自定义图标，可以在mounted()方法中使用JavaScript代码来修改图标的类名。下面是一个示例代码：

<el-form-item>
  <el-date-picker
    v-model="dateRange"
    suffix-icon="el-icon-date"
    size="small"
    style="width: 240px;margin-left:22px;"
    value-format="yyyy-MM-dd"
    type="daterange"
    prefix-icon="prefix-icon-class"
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  />
</el-form-item>

mounted() {
  // 移除默认的关闭图标
  document.getElementsByClassName('el-input__icon')[2].classList.remove('el-range__close-icon')
  // 添加自定义的图标
  document.getElementsByClassName('el-input__icon')[2].classList.add('el-icon-date')
},

.prefix-icon-class {
  display: none;
}
.el-input__icon {
  /* 移动后的icon高度100%会造成不居中 */
  height: 40px;
}

el-date-picker设置插槽

el-date-picker组件可以通过插槽来自定义其显示内容。具体来说，它提供了以下几个插槽：

1. `prefix-icon`：用于自定义前缀图标的插槽。你可以在 el-date-picker 组件中使用 `<template v-slot:prefix-icon>` 来定义自己的前缀图标。
例如：

   <el-date-picker>
     <template v-slot:prefix-icon>
       <i class="el-icon-date"></i>
     </template>
   </el-date-picker>

2. `clear-icon`：用于自定义清空图标的插槽。你可以在 el-date-picker 组件中使用 `<template v-slot:clear-icon>` 来定义自己的清空图标。
例如：

   <el-date-picker>
     <template v-slot:clear-icon>
       <i class="el-icon-close"></i>
     </template>
   </el-date-picker>

3. `suffix-icon`：用于自定义后缀图标的插槽。你可以在 el-date-picker 组件中使用 `<template v-slot:suffix-icon>` 来定义自己的后缀图标。
例如：

   <el-date-picker>
     <template v-slot:suffix-icon>
       <i class="el-icon-arrow-down"></i>
     </template>
   </el-date-picker>

这些插槽允许你根据自己的需求对 el-date-picker 组件进行定制化，并且可以在其中使用任何 HTML、CSS 或其他 Vue 组件来实现。