vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
utils/index,.js
/**
*生成UUID
*@paramwithSeparator是否有分割符
*@returns{string}
*/
exportfunctiongenerateUUID(withSeparator=true){
letd=newDate().getTime()
if(window.performance&&typeofwindow.performance.now==='function'){
d+=performance.now()
}
consttpl=withSeparator?'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx':'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'
returntpl.replace(/[xy]/g,function(c){
constr=(d+Math.random()*16)%16|0
d=Math.floor(d/16)
return(c==='x'?r:(r&0x3|0x8)).toString(16)
})
}
创建一个generate-uuid/index.js自定义指令文件
import{generateUUID}from'@/utils'
constgenerateUuid={
inserted(el,binding){
const{value}=binding
if(!value){
consthasUUID=generateUUID(value)
el.setAttribute('data-uuid',hasUUID)
if(!hasUUID){
el.parentNode&&el.parentNode.removeChild(el)
}
}
}
}
generateUuid.install=function(Vue){
Vue.directive('generate-uuid',generateUuid)
}
exportdefaultgenerateUuid
main.js引入
importGenerateUUIDfrom'@/directive/generate-uuid' Vue.use(GenerateUUID)
页面使用
使用uuid元素方法
consttopRow=this.$refs.multipleTable
consthash=topRow.$el.dataset.uuid
consttableHeader=document.querySelector(`.el-table[data-uuid="${hash}"].el-table__header-wrapper`)
if(tableHeader){
tableHeader.style.width=topRow.$el.getBoundingClientRect().width+'px'
}
总结
到此这篇关于vue自定指令生成uuid滚动监听达到tab表格吸顶效果的代码的文章就介绍到这了,更多相关vue滚动监听tab表格吸顶内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。