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 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 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代码审核的详细介绍
2013/06/13 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP文件上传类实例详解
2016/04/08 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
python 正则式使用心得
2009/05/07 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
python conda操作方法
2019/09/11 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
给医务人员表扬信
2014/01/12 职场文书
校运会广播稿100字
2014/01/27 职场文书
工作保证书范文
2014/04/29 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
社区活动总结范文
2015/05/07 职场文书
离婚民事起诉状
2015/08/03 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS