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加上iconfont的font-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版权协议,转载请附上原文出处链接和本声明。