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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
js中自定义react数据验证组件实例详解
Oct 19 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
js判断浏览器类型的方法
2013/08/07 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
Python实现Const详解
2015/01/27 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
不假外出检讨书
2014/01/27 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
课程设计的心得体会
2014/09/03 职场文书
基层党支部整改方案
2014/10/25 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
婚礼家长致辞
2015/07/27 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python