Iconfont - 给placeholder动态绑定图标

1. 效果展示:

在这里插入图片描述

2. 问题描述:

ElementUI的时间日期选择框,默认的时钟icon在左边,而需求是使用自定义的图标,并跟随提示语居中。因此可以考虑用InnerHTML的思路,在el-date-picker时间日期选择器的placeholder提示语里加上iconfont编码,使其自动识别为iconfont图标

3. 实现方法:

(1) ★给placeholder绑定变量(此处注意,直接赋值placeholder=' \ue6a1 请选择时间'的话无法显示图标)
html:

<el-date-picker
  v-model="value1"
  type="datetime"
  :placeholder="tip">
</el-date-picker>

ts:

export default class extends Vue {
  tip = ' \ue6a1  请选择时间'
}

(2) 变量里,图标格式为\u + unicode(4位)
例如,iconfont的图标为content: \e6a1,那么这变量就要写\ue6a1

(3) css样式,给::placeholder加上iconfontfont-family(不加的话,图标会变成一个方块)

.el-date-editor .el-input__inner {
    &::placeholder {
      font-family: "iconfont";
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgb(51, 102, 153);
    }
}

Do what you can, with what you have, where you are.
在你所处的位置,用你所有的资源,做你力所能及的事。(西奥多·罗斯福)


版权声明:本文为s1092900384原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。