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

以下是el-date-picker自定义后置图标的方法：

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

其中，`suffix-icon`属性用于设置后置图标的类名，你可以自定义一个类名，然后在CSS中设置该类名的样式即可。例如：

.your-icon-class {
  background-image: url('your-icon-url');
  background-size: contain;
  width: 20px;
  height: 20px;
}

这里的`.your-icon-class`就是你自定义的类名，`background-image`属性用于设置图标的URL，`background-size`属性用于设置图标的大小，`width`和`height`属性用于设置图标的宽度和高度。

相关问题

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自定义后置图标的方法：

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

其中，`suffix-icon`属性可以设置自定义的后置图标的类名，例如`your-icon-class`。在样式中，可以通过设置该类名的样式来实现自定义后置图标的效果。例如：

.your-icon-class {
  background-image: url('your-icon-url');
  background-repeat: no-repeat;
  background-size: contain;
}

其中，`your-icon-url`为自定义图标的URL地址。如果需要在mounted钩子函数中动态修改后置图标，可以使用以下代码：

mounted() {
  document.getElementsByClassName('el-input__suffix')[0].classList.remove('el-icon-date');
  document.getElementsByClassName('el-input__suffix')[0].classList.add('your-icon-class');
}

其中，`el-input__suffix`为后置图标的类名，`your-icon-class`为自定义图标的类名。这段代码会将后置图标的默认样式`el-icon-date`替换为自定义图标的样式`your-icon-class`。