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 相关文章推荐
非常不错的一个javascript 类
Nov 07 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php下实现折线图效果的代码
2007/04/28 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
Java中final关键字详解
2015/08/10 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
Python基于多线程实现ping扫描功能示例
2018/07/23 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
毕业生求职简历的自我评价
2013/10/07 职场文书
文秘专业个人求职信
2013/12/22 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
放飞理想演讲稿
2014/09/09 职场文书
我爱我班主题班会
2015/08/13 职场文书
创业计划书之花店
2019/09/20 职场文书