共计 1078 个字符,预计需要花费 3 分钟才能阅读完成。
问题形容
产品经理说,想要把工夫日期选择器的的小图标放在右侧,并且不要小时钟的图标,换成日历的图标。于是乎先看一下官网文档有没有插槽,没有!好吧,那就间接操作 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,细品一下,好像明确了什么 …
正文完
发表至: element-ui
2021-10-21