JS 编辑器动态添加select 鼠标划过显示下拉列表

核心知识点：

鼠标事件：

onmousemove 鼠标移上 onmouseleave 鼠标移开

（注意区别开onmouseover和 onmouserout以及onmouseenter）

const spanIdelememt: any = []
for (var i = 0; i < spanElement.length; i++) {if (spanElement[i].getAttribute('data-mce-id')) {spanIdelememt.push(spanElement[i])const divdom = document.createElement('div')spanElement[i].onmousemove = (e: any) => {if (this.indexFlag === e.target.attributes[1]?.value) {return false;}// if (this.domIsEdit !== undefined && this.domIsEdit === true) {//   return false;// }const parme = {elemParentId: e.target.attributes[1].value}this.indexFlag = e.target.attributes[1].valuereportHttp.getElement(parme).then(res => {if (res.length <= 0) {if (e.target.attributes[1]) {if (e.target.attributes[1].value) {return false;}} else {this.$message.warning('该节点暂无子节点')}return;}var reportElems:any = ''reportElems = ['<select style="height:auto;border:1px;width: 100%;overflow: hidden;box-shadow:2px 2px 2px 2px #ddd;outline:none;appearance:none; -moz-appearance:none; -webkit-appearance:none; border-radius:0px;  background: #fafafa; line-height: 20px; padding-left: 10px; padding-right: 16px; z-index: 1;">'];reportElems.push('<option value="0" selected="selected" style="display: none;"></option>')for (var i = 0; i < res.length; i++) {reportElems.push("<option class='layui-customer-dl' parent_id='" + res[i].elemId + "' value='" + res[i].nodeName + "'>" + res[i].nodeName + '</option>');}reportElems.push('</select>');// 替换      divdom.innerHTML = ''divdom.style.background = ''divdom.style.display = ''divdom.innerHTML = reportElems.join('') // 将数组元素拼接成字符串 赋值给dom元素e.target.appendChild(divdom) // 添加子元素 appendChild必须为元素divdom.style.position = 'absolute'divdom.style.left = e.offsetX - 10 + 'px'if (this.currentPatInfo) {if (this.currentPatInfo.processStatus === 5 || (this.currentPatInfo.processStatus === 4 && !this.docRole)) {divdom.style.display = 'none'// return false;} else {divdom.style.display = 'block'}}     that.getDomElementconst('select')[0].setAttribute('size', 0)divdom.style.background = '#ddd'that.getDomElementconst('select')[0].setAttribute('size', res.length)that.getDomElementconst('select')[0].onchange = (value :any) => {this.indexFlag = ''const index = value.target.selectedIndexconst dataId = value.target.options[index].getAttribute('parent_id')e.target.innerHTML = '<span data-mce-class="a__b" data-mce-id=' + e.target.attributes[1].value + '>' + value.target.options[index].value + '<span/>'}})}spanElement[i].onmouseleave = (e: any) => {divdom.remove()this.indexFlag = ''}}
}

~~~

JS 编辑器动态添加select 鼠标划过显示下拉列表相关推荐

原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
【UE】Slate编辑器动态添加Button
前言实现编辑器动态添加界面元素,例如button之类的效果实现 .h文件添加定义 .cpp文件实现逻辑界面排版 TSharedRef<SDockTab> FDynamicCreat ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
js中动态添加/插入HTML代码块，并通过JQuery动态绑定点击事件
文章目录前言一.场景需求还原二.代码示例 1.引入JQuery库 2.代码示例一:HTML中div标签部分二:HTML中script标签部分三:JS文件部分总结前言本篇文章中讲的是在 ...
[html] 写一个类似刮刮卡效果的交互，即鼠标划过时显示号码
[html] 写一个类似刮刮卡效果的交互,即鼠标划过时显示号码 <title>Document</title> <style> *{ margin:0; paddi ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. ...
html追加没有样式,js/jquery动态添加html，样式和方法不生效的解决方案
var html = " " + " " + " \n" + " \n" + " \n" + &qu ...
js 关于动态添加class样式的学习
如果,我这里有一个需求.如下的页面代码 <body> <input type="button" value="红" id="btn1 ...

JS 编辑器动态添加select 鼠标划过显示下拉列表

JS 编辑器动态添加select 鼠标划过显示下拉列表相关推荐

最新文章

热门文章