Vue--进度条

挺有意思的,大家可以玩一玩儿:

前端代码如下:可以直接运行的代码。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优美的进度条</title>
  <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }
    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 0.5s;
    }
    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>
</head>
<body>
  <div id="app">

    <!-- 进度条显示 -->
    <div class="progress">
      <div class="inner" :style="{ width: percent + '%'}">
        <span> {{percent}} %</span>
      </div>
    </div>

    <!-- 点击监听 -->
    <button v-if="this.percent > 0" @click="add(-10)">进度减10%</button>
    <button v-if="this.percent < 100" @click="add(10)">进度加10%</button>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    
    const app = new Vue({
      el: '#app',
      data: {
        percent: 50
      },
      methods: {
        add (a) {
            this.percent += a;
            //写个异步函数
            if(this.percent === 100) {
                setTimeout(function(){
                    alert('进度条完成啦!')
                }, 500)
            }
            
        }
      }
    })
  </script>
</body>
</html>
相关推荐
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光1 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军1 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5201 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Qlittleboy2 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
Days20502 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端2 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿2 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL2 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉2 小时前
Vue组件化开发介绍
前端·javascript·vue.js