用vue2写一个进度条

1. 安装vue-cli

如果您尚未安装vue-cli，请使用以下命令进行安装：

npm install -g vue-cli

2. 创建Vue项目

使用vue-cli创建一个新的Vue项目：

vue init webpack progress-bar

进入项目文件夹并安装依赖：

cd progress-bar
npm install

3. 创建ProgressBar组件

在src/components文件夹中创建一个名为ProgressBar.vue的组件。

在组件中添加以下代码：

<template>
  <div class="progress-bar">
    <div class="progress" :style="{ width: progress + '%' }"></div>
  </div>
</template>

<script>
export default {
  props: ['progress'],
};
</script>

<style>
.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
}

.progress {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease-in-out;
}
</style>

这个组件有一个名为progress的属性，用于指定进度百分比。在模板中，我们将进度条作为一个div元素呈现，并使用动态样式将其宽度设置为进度的百分比。

4. 在App.vue中使用ProgressBar组件

在App.vue中添加以下代码：

<template>
  <div id="app">
    <h1>Progress Bar Demo</h1>
    <ProgressBar :progress="progress" />
    <button @click="startProgress">Start</button>
  </div>
</template>

<script>
import ProgressBar from './components/ProgressBar.vue';

export default {
  name: 'App',
  components: {
    ProgressBar,
  },
  data() {
    return {
      progress: 0,
    };
  },
  methods: {
    startProgress() {
      const intervalId = setInterval(() => {
        if (this.progress < 100) {
          this.progress += 10;
        } else {
          clearInterval(intervalId);
        }
      }, 1000);
    },
  },
};
</script>

在模板中，我们使用ProgressBar组件将进度条呈现为页面的一部分。我们还添加了一个按钮，以触发进度条的增长。

在脚本中，我们使用data属性来定义一个名为progress的变量，并初始化为0。我们还定义了一个名为startProgress的方法，该方法使用setInterval函数来增加进度条的值，并在达到100时停止增长。

5. 运行Vue项目

使用以下命令启动Vue项目：

npm run dev

打开浏览器并访问http://localhost:8080，您应该可以看到一个简单的进度条和一个按钮。单击按钮，进度条应该开始增长。