vue 自定義指令實現，滾動條百分比進度條。

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>

複製程式碼