安裝已封裝好的
npm install vuescrollnext --save
main.js/main.ts
import scroll from 'vuescrollnext'
app.use(scroll)
地址 https://www.npmjs.com/package/vuescrollnext
使用
<el-table
v-scrollbar="{
container: '.logBody>.el-table__body-wrapper',
'ps-y-reach-end': testEvent,
psScrollX: testEvent,
}"
ref="logTableREF"
:data="tableData"
:stripe="false"
class="logBody"
:border="false"
tooltip-effect="light"
style="width: 100%"
height="450px"
@selection-change="handleSelectionChange"
> </el-table>
或者自己封裝 如下步驟....
1.安裝
npm install perfect-scrollbar --save
2.使用
<el-table
v-xxx="{
container: '.logBody>.el-table__body-wrapper',
'ps-y-reach-end': testEvent,
psScrollX: testEvent,
}"
ref="logTableREF"
:data="tableData"
:stripe="false"
class="logBody"
:border="false"
tooltip-effect="light"
style="width: 100%"
height="450px"
@selection-change="handleSelectionChange"
> </el-table>
// setup
const testEvent = ()=>{}
return {
testEvent
}
不需要參數(shù)的情況,走默認配置
或者
<div v-xxx></div>
又或者
<div v-xxxx=".logBody>.el-table__body-wrapper"></div>
3. css 樣式文件根據(jù)自己情況 從node_module 拷貝出來修改覆蓋 或者使用他原來默認的
4. 插件內(nèi)容
import { toCamelCaseSheet, toCamelCaseStyle } from "@/utils";
import { App, Directive } from "@vue/runtime-core"
import PerfectScrollbar from 'perfect-scrollbar';
import '../assets/css/scroll.css'
/**
* @interface container 容器id 可以是 '.logBody>.el-table__body-wrapper'
* @interface suppressScrollX 默認false ,是否禁用X軸滾動條
* @interface suppressScrollY 默認false ,是否禁用Y軸滾動條
* @interface timeout cure dom async render 修復dom異步呈現(xiàn) (自定義配置項)
* @interface scrollXMarginOffset 在不啟用X軸滾動條的情況下，內(nèi)容寬度可以超過容器寬度的像素數(shù)。允許一些“擺動空間”或“偏移中斷”，這樣X軸滾動條就不會因為幾個像素而啟用
* @interface scrollYMarginOffset 在不啟用Y軸滾動條的情況下，內(nèi)容寬度可以超過容器寬度的像素數(shù)。允許一些“擺動空間”或“偏移中斷”，這樣X軸滾動條就不會因為幾個像素而啟用
* @interface handlers 默認 ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'], 用于滾動元素的處理程序列表
* @interface wheelSpeed 默認1 應用于鼠標滾輪事件的滾動速度
* @interface wheelPropagation 默認false 如果此選項為true，則當滾動到達邊的末尾時，鼠標滾輪事件將傳播到父元素
* @interface swipeEasing 默認false 如果此選項為真，則輕掃滾動
* @interface minScrollbarLength 默認 null 當設置為整數(shù)值時，滾動條的拇指部分不會縮小到該像素數(shù)以下
* @interface maxScrollbarLength 默認 null 當設置為整數(shù)值時，滾動條的拇指部分不會擴展到該像素數(shù)
* @interface scrollingThreshold 默認 1000 這將ps-scrolling-x和ps-scrolling-y類的閾值設置為保持不變。在默認的CSS中，無論懸停狀態(tài)如何，它們都會顯示滾動條。單位是毫秒
* @interface useBothWheelAxes default false
*
*/
interface scrollBarOptions {
container?: string
suppressScrollX?: boolean
suppressScrollY?: boolean
scrollXMarginOffset?: number
scrollYMarginOffset?: number
handlers?: string[]
timeout?: number
wheelSpeed?: number,
wheelPropagation?: boolean
swipeEasing?: boolean
minScrollbarLength?: number
maxScrollbarLength?: number
scrollingThreshold?: number
useBothWheelAxes?: boolean
testEvent?: Function
}
/**
* 參數(shù)可以寫成 駝峰格式 當前已經(jīng)做好了 兼容
* @param el
* @event ps-scroll-y
* This event fires when the y-axis is scrolled in either direction.
* @event ps-scroll-x
* This event fires when the x-axis is scrolled in either direction.
* @event ps-scroll-up
* This event fires when scrolling upwards.
* @event ps-scroll-down
* This event fires when scrolling downwards.
* @event ps-scroll-left
* This event fires when scrolling to the left.
* @event ps-scroll-right
* This event fires when scrolling to the right.
* @event ps-y-reach-start
* This event fires when scrolling reaches the start of the y-axis.
* @event ps-y-reach-end
* This event fires when scrolling reaches the end of the y-axis (useful for infinite scroll).
* @event ps-x-reach-start
* This event fires when scrolling reaches the start of the x-axis.
* @event ps-x-reach-end
* This event fires when scrolling reaches the end of the x-axis.
* You can also watch the reach state via the reach property.
* 更多詳情 [https://github.com/mdbootstrap/perfect-scrollbar]
*/
/**
* @param el 容器
* @param options 配置項
*/
const el_scrollBar = (el: any, options?: scrollBarOptions | any) => {
if (el._ps_ instanceof PerfectScrollbar) {
el._ps_.update();
} else {
const ps = new PerfectScrollbar(el, options || {});
for (let handler in options) {
if (typeof options[handler] === 'function') {
el.addEventListener(toCamelCaseStyle(handler), options[handler])
}
}
el._ps_ = ps
}
};
/**
* @param rules 容器 規(guī)則
*/
// 自定義指令
const Direcive: Directive = {
mounted: function (el, binding) {
if (typeof binding.value == "object") {
let dom
console.log(binding.value)
setTimeout(() => {
dom = el.querySelector(binding.value.container) || el;
if (!dom) {
return console.warn(`未找到可供綁定的dom${binding.value}`);
}
const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(dom, null).position)) {
console.error(`perfect-scrollbar所在的容器的position屬性必須是以下之一：${rules.join("、")}`)
}
el_scrollBar(dom, binding.value);
}, binding.value.timeout || 0)
} else {
let dom
dom = el.querySelector(binding.value) || el;
el_scrollBar(dom);
}
},
beforeMount: function (el, binding) { },
updated: function (el, binding, vnode) {
if (!el) {
return console.warn(`未找到可供綁定的dom,${binding.value}`);
}
if (typeof binding.value == "object") {
el = el.querySelector(binding.value.container) || el;
el_scrollBar(el, binding.value);
} else {
el = el.querySelector(binding.value) || el;
el_scrollBar(el)
}
}
}
// 名稱自己定義
export default {
install(app: App) {
app.directive('xxxx', Direcive)
}
}
駝峰轉換
/**
*
* @param str aBot => a-bot
* @returns
*/
export const toCamelCaseStyle = (str: string) => {
return str.replace(/([A-Z])/g, "-$1").toLowerCase();
};
/**
*
* @param str x-yaa-zxx =>xYaaZxx
* @returns
*/
export const toCamelCaseSheet = (str: string) => {
return str.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase());
};
