封装动态添加id以及自定义元素属性（js,vue等） |
您所在的位置：网站首页 › vue动态js › 封装动态添加id以及自定义元素属性（js,vue等） |
|
文章目录
前言封装动态添加属性（属性可以是id）
总结
前言
提示：这里可以添加本文要记录的大概内容： 例如：使用场景：当项目写完，需要自动化测试不兼容事，可以用下，其他的好像没用， 提示：以下是本篇文章正文内容，下面案例可供参考 封装动态添加属性（属性可以是id） 需要在app.vue里面引入并使用在mounted,updated里面，一个初始化一个有更新后，启用监听 export const addId=(e)=>{ let a= document.getElementById(e)//组件层id //!获取最外层app 循环添加id(test文本类容添加外层标签的id) let ob = new MutationObserver(entries => { if(entries.length>1){ let childNodes= a.childNodes let id ='FIX_'+a.id abc(childNodes,id) function abc(childNodes ,id){ for (const [num,i] of childNodes.entries() ) { if(i.nodeType!=1&&i.nodeType!=3){ //不为他们时跳过当前 continue } if(i.nodeType === 1){ //为标签时 if(i.localName=='input'){ if(i.placeholder=='User Name'||i.placeholder=='User password'){ i['data-testID']=id+'_'+i.placeholder.trim().split(' ').join('_') } }else if(i.localName=='tr'){ //为表格时加索引 id=id+'_'+(num+1) abc(i.childNodes,id) }else if(i.className=='el-dialog__wrapper'){ //遮罩层加前缀区分 id=id+'_'+i.className abc(i.childNodes,id) }else{ //常规 有id就清空加id,没有默认追加 if(i.id!=''&&i.id.split('-').length==1){ id='Fix_'+i.id } abc(i.childNodes,id) } }else if(i.nodeType === 3&&i.data!=' '){ //文本，有内容时 let ids=id+'_'+i.data.trim().split(' ').join('_') if(i.parentNode.className=='colorP' ||i.parentNode.className=='apnTitle'){ //为提交表单时 if((i.parentNode).parentNode.parentNode.localName=='form'){ ((i.parentNode).parentNode.parentNode)['data-testID']=ids.split('：'||':')[0] }else{ ((i.parentNode).parentNode)['data-testID']=ids.split('：'||':')[0] } }else{ //*去除：分号 空格 (i.parentNode)['data-testID']=ids.split('：'||':')[0] } } } } } }) // 监听元素变化 所有子元素 ob.observe(a, { attributes: true, subtree: true }) } 总结提示：关于自动添加固定id的封装 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |