vue 进度条 节点

在 Vue 中使用进度条节点可以通过 Vue 自定义指令来实现。下面是一个简单的示例：

首先，在你的 Vue 组件中创建一个自定义指令，例如 `v-progress`：

Vue.directive('progress', {
  bind: function (el, binding) {
    // 创建进度条元素
    const progressBar = document.createElement('div');
    progressBar.style.width = '0%';
    progressBar.style.height = '5px';
    progressBar.style.background = '#007bff';
    progressBar.style.transition = 'width 0.3s linear';

    // 将进度条元素添加到节点中
    el.appendChild(progressBar);

    // 更新进度条的宽度
    el.setProgress = function (value) {
      progressBar.style.width = value + '%';
    };
  },
});

然后，在你的模板中使用 `v-progress` 指令，并通过 Vue 的数据绑定将进度值传递给指令：

<template>
  <div>
    <button @click="startProgress">开始</button>
    <div v-progress></div>
  </div>
</template>

<script>
export default {
  methods: {
    startProgress() {
      let progress = 0;
      const intervalId = setInterval(() => {
        if (progress >= 100) {
          clearInterval(intervalId);
        } else {
          progress += 10;
          this.$el.setProgress(progress);
        }
      }, 500);
    },
  },
};
</script>

在上面的示例中，当点击 "开始" 按钮时，进度条会从 0% 开始，每隔 500 毫秒增加 10%，直到达到 100%。

记得在组件中引入 Vue，然后你就可以在你的项目中使用这个自定义指令来实现进度条了。希望对你有所帮助！如果有任何问题，请随时问我。