vue 自定指令生成uuid滾動監(jiān)聽達到tab表格吸頂效果的代碼
更新時間：2020年09月16日 10:24:27 作者：周家大小姐.
這篇文章主要介紹了vue 自定指令生成uuid滾動監(jiān)聽達到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)
})
}
創(chuàng)建一個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" >
使用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滾動監(jiān)聽達到tab表格吸頂效果的代碼的文章就介紹到這了,更多相關vue滾動監(jiān)聽tab表格吸頂內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文給大家介紹了在vue項目中使用svg圖標的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-04-04
wangEditor是一個輕量級web富文本編輯器,配置方便,使用簡單,下面這篇文章主要給大家介紹了關于vue中wangEditor5編輯器的基本使用,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue中數(shù)組和對象更改后視圖不刷新的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了bootstrap vue.js實現(xiàn)tab效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
vite中的glob-import批量導入的實現(xiàn)
本文主要介紹了vite中的glob-import批量導入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
vuex頁面刷新數(shù)據(jù)丟失問題的四種解決方式
vuex是大家使用vue時大多數(shù)都會選擇的,但是當頁面刷新之后vuex數(shù)據(jù)會丟失,下面這篇文章主要給大家介紹了關于vuex頁面刷新數(shù)據(jù)丟失問題的四種解決方式,需要的朋友可以參考下2022-02-02
如何在vue3中使用滑塊檢驗vue-puzzle-verification
這篇文章主要介紹了在vue3中使用滑塊檢驗vue-puzzle-verification的相關資料,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼
這篇文章主要介紹了vue實現(xiàn)用戶長時間不操作自動退出登錄功能的實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
vue element-ui表格自定義動態(tài)列具體實現(xiàn)
這周工作中遇見了一個表格動態(tài)列的需求,下面這篇文章主要給大家介紹了關于vue element-ui表格自定義動態(tài)列具體實現(xiàn)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue全局組件和局部組件的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03