import "./v-progress.css";const scrollInit = (dom, opts, progress, progressContent) => {let width = "height";let scrollTop = dom.scrollTop;let scroll = dom.scrollTop;let top = "top";progressContent.style.height = "100%";progressContent.style.width = ((dom.scrollTop / (dom.scrollHeight - dom.clientHeight) * 100) || 0) + "%";switch (opts.type) {case "top":break;case "bottom":scrollTop = -dom.scrollTop;top = "";break;case "left":width = "width";scrollTop = 0;scroll = dom.scrollTop;progressContent.style.width = "100%";progressContent.style.height = ((dom.scrollTop / (dom.scrollHeight - dom.clientHeight) * 100) || 0) + "%";break;case "right":width = "width";scrollTop = 0;scroll = dom.scrollTop;progressContent.style.width = "100%";progressContent.style.height = ((dom.scrollTop / (dom.scrollHeight - dom.clientHeight) * 100) || 0) + "%";break;default:width = "height";}let height = width == "height" ? "width" : "height";progressContent.style.background = opts.color;progress.style.cssText = `background: ${opts.background}; ${width}: ${opts.width}; ${height}: 100%; ${opts.type}: ${scrollTop}px; ${top}: ${scroll}px;`;
}
export default {bind(el, binding) {const opts = Object.assign({color: "#409EFF",  //颜色background: "transparent",  // 底部颜色width: "3px",  // 宽度type: "top", // "top 上  bottom 下  left 左  right 右"},binding.value);if (el) {setTimeout(() => {if (!window.getComputedStyle(el, null).position ||window.getComputedStyle(el, null).position == "static" ||window.getComputedStyle(el, null).position == "initial") {el.style.position = "relative";}el.style.overflowY = "scroll";el.style.overflowX = "hidden";let progress = document.createElement("div");let progressContent = document.createElement("p");progress.className = "scroll-progress";progress.appendChild(progressContent);el.appendChild(progress);scrollInit(el, opts, progress, progressContent);el.onscroll = () => {scrollInit(el, opts, progress, progressContent);}});}}
};复制代码

import progress from './v-progress.js'
// 添加install方法
const Progress = {install: function (Vue) {Vue.directive("progress", progress)}
}// Progress
export default Progress复制代码

<template><div id="app" v-progress><div v-progress="{backgroundColor: 'red'}" class="box-a"><p v-for="(x,i) in 30" :key="i">我是{{i}}</p></div><div v-progress="{type: 'bottom', color: 'radial-gradient(#14b9ff, #67C23A)'}" class="box-b"><p v-for="(x,i) in 30" :key="i">我是{{i}}</p></div><div v-progress="{type: 'right', color: 'linear-gradient(to bottom ,#F56C6C, #E6A23C)'}" class="box-c"><p v-for="(x,i) in 30" :key="i">我是{{i}}</p></div><div  v-progress="{type: 'left', color: 'radial-gradient(#14b9ff, #67C23A)', background: 'linear-gradient(to bottom ,#F56C6C, #E6A23C)'}" class="box-d"><p v-for="(x,i) in 30" :key="i">我是{{i}}</p></div></div>
</template>复制代码