1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > JS 编辑器动态添加select 鼠标划过显示下拉列表

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

时间:2023-08-12 02:35:46

相关推荐

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 = ''}}}

~~~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。