vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码


Posted in Javascript onSeptember 16, 2020

vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

 utils/index,.js

/**
 * 生成UUID
 * @param withSeparator 是否有分割符
 * @returns {string}
 */
export function generateUUID(withSeparator = true) {
 let d = new Date().getTime()
 if (window.performance && typeof window.performance.now === 'function') {
  d += performance.now()
 }
 const tpl = withSeparator ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'
 return tpl.replace(/[xy]/g, function(c) {
  const r = (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'
const generateUuid = {
 inserted(el, binding) {
  const { value } = binding
  if (!value) {
   const hasUUID = generateUUID(value)
   el.setAttribute('data-uuid', hasUUID)
   if (!hasUUID) {
    el.parentNode && el.parentNode.removeChild(el)
   }
  }
 }
}
generateUuid.install = function(Vue) {
 Vue.directive('generate-uuid', generateUuid)
}
 
export default generateUuid

main.js引入

import GenerateUUID from '@/directive/generate-uuid'
Vue.use(GenerateUUID)

页面使用

<el-table
   v-generate-uuid="false"
  >

vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

使用uuid元素方法

const topRow = this.$refs.multipleTable
   const hash = topRow.$el.dataset.uuid
   const tableHeader = 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表格吸顶内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
js漂浮广告实现代码
Aug 15 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
基于form-data请求格式详解
Oct 29 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 #Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 #Javascript
Vue项目打包编译优化方案
Sep 16 #Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 #Javascript
如何在JS文件中获取Vue组件
Sep 16 #Javascript
javascript自定义加载loading效果
Sep 15 #Javascript
图解JS原型和原型链实现原理
Sep 15 #Javascript
You might like
用PHP函数解决SQL injection
2006/10/09 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Vue组件创建和传值的方法
2018/08/17 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Django中cookie的基本使用方法示例
2018/02/03 Python
python lxml中etree的简单应用
2019/05/10 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python通过socketserver处理多个链接
2020/03/18 Python
python中PyQuery库用法分享
2021/01/15 Python
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
自主招生自荐书
2013/11/29 职场文书
保护环境的标语
2014/06/09 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014年就业工作总结
2014/11/26 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
2021年最新用于图像处理的Python库总结
2021/06/15 Python
PYTHON InceptionV3模型的复现详解
2022/05/06 Python