elementui日期时间选择器更换阿里icon

要更换 ElementUI 日期时间选择器中的阿里 icon，可以按照以下步骤操作：

1. 首先，需要从阿里 iconfont 中下载所需的 icon。

2. 然后，在 ElementUI 中找到日期时间选择器组件的样式文件，通常是在 node_modules/element-ui/lib/theme-chalk/date-picker.css 中。

3. 在样式文件中找到包含日期时间选择器 icon 的 CSS 类。该类通常是 .el-date-picker__time-icon，但具体的类名可能因不同的 ElementUI 版本而有所不同。

4. 将该类中的 background-image 属性的 URL 修改为下载的阿里 icon 的 URL。

5. 保存修改后的样式文件并重新编译项目，即可看到更换后的 icon。

注意：在修改 ElementUI 样式文件时，应该使用自定义主题而不是直接修改 ElementUI 的源代码，以避免升级 ElementUI 时造成冲突和困难。

相关问题

elementui日期时间选择器更换icon

要更换 ElementUI 日期时间选择器中的 icon，可以按照以下步骤操作：

1. 首先，需要从阿里 iconfont 中下载所需的 icon。

2. 在项目中引入 iconfont 文件，可以通过在 index.html 文件中添加如下代码：

<link rel="stylesheet" href="//at.alicdn.com/t/font_1234567_abcd1234.css">

其中，1234567_abcd1234 是你的 iconfont 项目的 ID，具体的 ID 可以在 iconfont 官网中找到。

3. 找到包含日期时间选择器 icon 的 CSS 类。该类通常是 .el-date-picker__time-icon，但具体的类名可能因不同的 ElementUI 版本而有所不同。

4. 将该类中的 font-family 属性修改为 iconfont 项目中的字体名称，例如：

.el-date-picker__time-icon {
  font-family: 'iconfont';
}

5. 在该类中添加 content 属性，以指定要使用的 icon 的 Unicode 码点，例如：

.el-date-picker__time-icon {
  font-family: 'iconfont';
  content: '\e64e';
}

其中，\e64e 是你要使用的 icon 的 Unicode 码点，具体的码点可以在 iconfont 官网中找到。

6. 保存修改后的样式文件并重新编译项目，即可看到更换后的 icon。

注意：在修改 ElementUI 样式文件时，应该使用自定义主题而不是直接修改 ElementUI 的源代码，以避免升级 ElementUI 时造成冲突和困难。

elementUI日期选择器的日期图标更换到右侧并引入icon图标，且hover时日期图标消失并显示叉叉图标

要更换 ElementUI 日期选择器的日期图标并引入 icon 图标，可以通过以下步骤实现：

1. 在页面中引入需要的 iconfont 字体文件，可以使用阿里巴巴矢量图标库中的图标，或者自己上传需要的图标。

2. 使用 CSS 样式修改日期选择器的样式，将日期图标移动到右侧并设置 icon 字体样式。

.el-date-editor .el-icon-date {
  display: none;
}

.el-date-editor .el-input__icon {
  right: 0;
}

.el-date-editor .el-input__icon::before {
  font-family: 'iconfont';
  font-size: 16px;
  content: '\e62c';
}

3. 当鼠标悬停在日期选择器上时，显示叉叉图标。可以使用 Vue.js 指令 `v-show` 和 `v-on` 监听事件实现。

<el-date-picker
  v-model="date"
  type="date"
  class="date-picker"
  v-on:mouseenter="showCloseIcon = true"
  v-on:mouseleave="showCloseIcon = false"
>
  <i v-show="!showCloseIcon" class="el-icon-date"></i>
  <i v-show="showCloseIcon" class="el-icon-circle-close"></i>
</el-date-picker>

在 Vue.js 实例中，需要定义 `showCloseIcon` 变量来控制叉叉图标的显示和隐藏。

data() {
  return {
    date: '',
    showCloseIcon: false
  }
}