ElementUI timePicker 增加此刻按钮 引发的dom操作的学习
# ElementUI timePicker 增加此刻按钮 引发的dom操作的学习
# 解决方案
获取timePicker弹出框的footer元素
替换原来的取消按钮
<template>
<el-time-picker
@click.native="handleClickTime"
v-model="value"
:picker-options="{selectableRange: '18:00:00 - 20:00:00'}"
placeholder="请选择时间">
</el-time-picker>
1
2
3
4
5
6
2
3
4
5
6
<script>
handleClickTime() {
let footer = document.querySelector('.el-time-panel__footer');
let element = document.createElement('input');
element.type = 'button';
element.value = '此刻';
element.addEventListener('click', () => {
console.log('点击此刻按钮');
});
footer.appendChild(element);
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 引发的思考
一开始看到 element UI 不支持 slot ，就开始束手无措，甚至想驳回请求，后来请教了一下组长，直接用 dom 操作加上了 button
所以还是要加强对 JavaScript 的学习
上次更新: 2023/06/01, 12:40:50