文档章节

vue中进度条的使用

花飘零
 花飘零
发布于 2017/04/25 09:15
字数 169
阅读 120
收藏 0

vue:

                    <table>
                        <thead class="thead">
                            <tr>
                                <th>序号</th>
                                <th>小组名称</th>
                                <th>组长</th>
                                <th>成员人数</th>
                                <th>项目进度</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in items">
                                <td>{{item.id}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.gradePerson}}</td>
                                <td>{{item.person}}</td>
                                <td>
                                    <div class="progress">
                                        <span class="progressing" v-bind:style=" 'width:' + (item.time/17)*100 +'%' ">
                                            <span class="percentage">{{item.time}}/17</span>
                                        </span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

js:

 data() {
        return {
            items: [
                {
                    id: '01',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '10',
                }, {
                    id: '02',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '5',
                }, {
                    id: '03',
                    name: '名人组',
                    gradePerson: '王小虎',
                    person: '5人',
                    time: '8',
                }]

        }

}

 

css:

              .progress{
                    width: 100%;
                    height: 15px;
                    background: #f1dea9;
                    border: 1px solid #ecc353 ;
                    border-radius: 10px;
                    text-align: center;
                    color:#fff;
                    .progressing{
                        position: relative;
                        float: left;
                        margin: 0 auto;
                        height: 16px;
                        background: #ecc353;
                        border-radius: 10px;
                        .percentage{
                            margin-left:50px;
                        }
                    }
                }

 

              

 

© 著作权归作者所有

共有 人打赏支持
花飘零
粉丝 0
博文 36
码字总数 4735
作品 0
德州
私信 提问
手把手教你实现一个 Vue 进度条组件!

最近在个人的项目中,想对页面之间跳转的过程进行优化,想到了很多文档或 npm 等都用到的页面跳转进度条,于是便想自己去实现一个,特此记录。 来看下 npm 搜索组件时候的效果: so 下面咱们...

我的卡
2018/11/16
0
0
这才是我想要的彩虹进度条-[vue-ins-progress-bar]

想在 vue 项目中拥有 instagram 那种绚丽的彩虹进度条? 不如试试这个 vue-ins-progress-bar Demo Live Demo Install Usage APIs Source Repository: vue-ins-progress-bar Author: @meloalri......

melo的微博
2018/07/11
0
0
vue页面加载闪烁问题的解决方法

v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性。 也就是说,在使用v-if时,若值为false,那...

Jack088
2018/12/12
0
0
Vue插件开发流程详解-从开发到发布至npm(二)

 前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,(这里感谢博客园的网友,给我点赞推荐了) 说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入...

大灰狼的小绵羊哥哥
2018/09/16
0
0
vue插件开发流程详解-从开发到发布至npm(二)

  前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果封装vue插件,如何测试vue插件,...

阿逗
2018/09/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

scala学习(一)

学习Spark之前需要学习Scala。 参考学习的书籍:快学Scala

柠檬果过
13分钟前
0
0
按钮点击-30秒钟Jquery倒计时实现

记录一个按钮点击后倒计时定时器的功能(常用于短信验证码功能),方便以后查看复用! //(1)定义按钮点击事件,下面第一句应该在jquery的ready函数 $('#querybbs').click(queryBbs);  ...

em_aaron
17分钟前
0
0
通俗易懂解释网络工程中的技术,如STP,HSRP等

导读 在面试时,比如被问到HSRP的主备切换时间时多久,STP几个状态的停留时间,自己知道有这些东西,但在工作中不会经常用到,就老是记不住,觉得可能还是自己基础不够牢固,知识掌握不够全面...

问题终结者
昨天
3
0
看了一下Maven的内容

了解了Maven其实是一个跨IDE的标准构建工具,能推广的原因估计是借了仓库的便利。 另一个作用是可以通过Maven的功能在社区版的IDEA去创建Web项目,下次实践看看

max佩恩
昨天
2
0
day27:expect批量杀进程|

1、linux下当前目录有一个文件ip-pwd.ini,内容如下: [root@localhost_002 shell100]# cat ip-pwd.ini 10.111.11.1,root,xyxyxy10.111.11.2,root,xzxzxz10.111.11.3,root,12345610.......

芬野de博客
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部