问题描述
产品经理说,想要把时间日期选择器的的小图标放在右侧,并且不要小时钟的图标,换成日历的图标。于是乎先看一下官方文档有没有插槽,没有!好吧,那就直接操作DOM吧。
幸亏产品不懂技术,要不然会说我直接操作DOM浪费性能呢!其实操作这一点点DOM对浏览器性能的影响是可以忽略的。再者,咱公司的服务器硬件也是杠杠的!
思路就是先通过css将时间日期选择器左侧的小闹钟隐藏起来,然后再插入一个小图标元素并调整位置到右侧即可。
我们先看一下效果图:
效果图
代码如下
<template>
<div>
<el-date-picker
ref="datedate"
v-model="value1"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker>
</div>
</template>
<script>
export default {
name: "CodeVue",
data() {
return {
value1: "",
};
},
mounted() {
/*
思路:通过document文档,选中日期时间选择器元素,然后创建一个i标签,
并指定其类名为el-icon-date,并将其插入到日期时间选择器元素中
然后通过样式的控制调整其到时间选择器尾部的位置
*/
let keyNode = document.querySelector(".el-date-editor");
let iNode = document.createElement("i");
iNode.setAttribute("class", "el-icon-date"); // el-icon-bottom
keyNode.appendChild(iNode);
iNode.style.position = "absolute";
iNode.style.top = "13px";
iNode.style.right = "32px";
},
};
</script>
<style lang="less" scoped>
// 隐藏小时钟图标
/deep/ .el-date-editor {
position: relative;
.el-input__prefix {
display: none;
}
}
</style>
总结
在有些情况下,还是需要我们去直接操作dom的。在硬件快速迭代的现在,操作一点点dom基本上问题不大,但是还是要注意去优化性能,尽量使用vue提供的规则去操作虚拟dom,毕竟虚拟dom的性能还是很好的。所以vue官方强调的是尽量不要直接操作dom,并没有说严禁操作dom,想想以前的jQuery,细品一下,仿佛明白了什么...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。