《前端》vue-vant框架之进度条process实现--2020年7月5日(后期补充)

最新推荐文章于 2024-05-06 16:57:39 发布
最新推荐文章于 2024-05-06 16:57:39 发布
阅读量1.4k 收藏
点赞数
分类专栏： 前端 vue-vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bellediao/article/details/107142841
版权

 

一、进度条

写了个框架，大概思路如下：:percentage="getperct()"这里是一个函数，用来获取进度值，这个getperct方法里返回的就是工作的进度百分比。具体还需要根据需求，获取进度实现进度条功能。

 

    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.9/lib/vant.min.js"></script>
</head>

<body>
    <div id='app'>
        <van-progress :percentage="getperct()" stroke-width="8" pivot-text="橙色" color='#f2826a' />
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
最低0.47元/天 解锁文章
bellediao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VueCLI 通过process，web前端开发初学者
2401_84091502的博客
04-04 1068
点击这里即可免费获取，包括答案解析。链图片转存中…(img-AUcLA41O-1712222723757)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）点击这里即可免费获取，包括答案解析。[外链图片转存中…(img-ADRn27HP-1712222723757)]
前端process-definition框架
wwsl123的博客
08-04 843
前端process-definition框架 版本 作者 时间 描述 V1.0.0 胡绍利 2020年7月1日 ...
vue-vant-template:基于vue-cli@3.0、vuex、vue-router、vant、axios、mockjs的移动端框架
05-30
vue-vant-模板 项目设置 yarn install 为开发编译和热重载 yarn run serve 为生产编译和缩小 yarn run build 运行你的测试 yarn run test Lints 和修复文件 yarn run lint 运行你的单元测试 yarn run test:unit 自定义配置 请参阅。
6个非常经典Web前端使用的炫丽进度条（一）
08-18
在线效果：http://ynif.v099.10000net.cn/demo/jindu/1/jindu/index.html
vue-vant-template:带有VantUI的Vue移动项目模板
05-20
模板 Vue移动端项目模板，组件库 项目设置 $ yarn install 编译和热重装以进行开发 $ yarn run serve 编译并最小化生产 $ yarn run build 整理和修复文件 $ yarn run lint:fix 自定义配置 请参阅。
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vant组件开发源码学习（一）
qq_46093896的博客
09-18 2969
以Button组件为例，对vantUI组件开发流程进行了简单梳理和分析。
前端轻量级web进度条 – Nprogress & nanobar
Carrie_zzz的博客
06-10 2073
前言 进度条库是前端中常见的库之一，bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件，使用简便。轩枫阁用过Nprogress，用于页面刚打开时的页面加载进度显示。 官网 NProgress.js：http://ricostacruz.com/nprogress/ nanobar.js：http://nanobar.micron...
响应式前端框架Bootstrap系列（13）进度条
@黄小泽的个人博客
01-15 1417
进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。进度条的颜色样式有以下几种：.progress-bar-success、.progress-bar-info、.progress-bar-warning、.progress-bar-danger。 演示代码： 默认进度
前端案例50---2.Process Steps
weixin_44564140的博客
07-28 310
前端案例22.Process Steps2.1案例分析2.2 功能分析2.2.1 html设计2.2.2 css设计2.2.3 js设计2.3 其他 2.Process Steps 2.1案例分析 该项目通过button实现页面进程加载的动态展示，主要难点为通过js实现当点击button时动态更新加载条 加载条主要分为圆圈的样式变化和横线的样式变化 2.2 功能分析 2.2.1 html设计 html设计相对简单，一个div包含5个div（一条线+4个圈），下边是两个按钮 [外链图片转存失败,源站可能有防
ProcessBar（美观的进度条）
12-13
进度条 美观。渐变色，图案，图片背景（前景），有valuechanged事件和finished事件
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant简介这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖npm install// ...
vue-vant-mobile:vue结合vant的移动端项目
05-22
Vue-vant-Mobile 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vant ui progress进度条组件样式调整
qq_41421033的博客
02-01 2501
组件api: pivot-text- 进度文字内容 string 百分比。区分效果一没有用flex布局, 用了定位样式。这里把pivot-text的值设置为空。效果二是文字在进度条内部。
vue手写音频播放进度条 支持拖拽
Maggie_01的博客
12-22 1197
样式如图 主要实现拖拽事件，支持移动端、PC端。
2024年前端最全vue+vant搭建移动端框架，进阶加薪全靠它
最新发布
2401_84620231的博客
05-06 1062
以 VUE_APP_ 开头的变量，在代码中可以通过 process.env.VUE_APP_ 访问。比如,VUE_APP_BASE_API = ‘development’ 通过process.env.VUE_APP_BASE_API访问。除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量NODE_ENV 和BASE_URL。
前端工程化(1)：process.env环境的使用
Golden_CHJ
01-02 9675
前端工程化(1)：process.env环境的使用 0 在前端工程化中，我们需要根据开发环境还是生产环境来进行判断某些函数是否执行、某些字段是否变化。简单来说就是环境变量 1 简单的例子 一个最简单的例子，从vue-template-admin的vue.config.js某一行来说. const port = process.env.port || process.env.npm_config_port || 9528 // dev port 这个赋值语句赋值了访问端口声明 process.env.p
多线程Process进度条
bodaowang的专栏
02-10 1871
using System; using System.Threading; using System.Windows.Forms; namespace WindowsFormsApplication2 { public partial class Form1 : Form { public Form1()
vant中进度条算法
xiaoHelloWord的博客
01-02 2569
vant中进度条的用法 进度条需要算一下才能按照比例增加
vue---自定义进度条组件
08-19
Vue中可以使用自定义组件来实现进度条的功能。下面是一个简单的示例： ```vue <template> <div class="progress-bar"> <div class="progress" :style="{ width: progress + '%' }"></div> </div> </template> <script> export default { props: { progress: { type: Number, required: true } } } </script> <style> .progress-bar { width: 200px; height: 10px; background-color: #f0f0f0; } .progress { height: 100%; background-color: #42b983; } </style> ``` 在上面的代码中，我们定义了一个名为 "progress-bar" 的自定义组件。它接受一个名为 "progress" 的属性，该属性用于指定进度条的进度。进度条的宽度根据 "progress" 属性的值动态计算并设置。 在使用这个自定义组件时，可以像下面这样传入 "progress" 属性的值： ```vue <template> <div> <custom-progress-bar :progress="50" /> </div> </template> <script> import CustomProgressBar from './CustomProgressBar.vue' export default { components: { CustomProgressBar } } </script> ``` 在上面的代码中，我们在父组件中使用了自定义组件 "custom-progress-bar"，并将 "progress" 属性设置为

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值