/*
* @Author: shs
* @Date: 2019-04-19 17:48:39
* @Last Modified by: shs
* @Last Modified time: 2019-04-22 11:30:55
*/
<template>
<div class="p-r" style="overflow: hidden" :style="{width: widths, background: 'lightgray'}">
<div class="p-a" :style="{width: actwidths, background: '#4cf9ff'}"></div>
<span class="left"><span>{{dataf.cur}}</span>{{dataf.leftword}}</span><span class="right">{{dataf.rightword1}}<span>{{dataf.total}}</span>{{dataf.rightword2}}</span>
</div>
</template>
<script>
export default {
data () {
return {
actwidths: '0%'
}
},
props: {
dataf: {
type: Object,
default: {
total: 0,
cur: 0,
leftword: '台开机',
rightword1: '总',
rightword2: '台'
}
},
widths: {
type: String,
defalut: '100%'
},
settings: {
type: Object,
defalut: { }
}
},
methods: { },
watch: {
data: function(val, old) {
if (val.total !== 0 && val.cur !== 0) { //total
this.actwidths = ((val.cur/val.total) * 100).toFixed(1) +'%'
console.log(this.actwidths)
}
}
},
mounted () { //wait dom loading, operate data if (this.dataf.total !== 0&&this.dataf.cur !== 0) { //total
console.log(this.dataf)
this.actwidths = ((this.dataf.cur/this.dataf.total) * 100).toFixed(1) +'%'
console.log(this.actwidths)
}
}
}
</script> <style lang="scss" scoped>
$back-fill: #4cf9ff;
$height: 30px;
$font-color: white;
.p-r {
position: relative;
width: 100%;
height: $height;
}
.p-a {
display: inline-block;
position: absolute;
top: 0;
left: 0;
height: $height;
}
.p-a:after {
content: '';
display: inline-block;
position: absolute;
top: 0;
right: -10px;
border-top: 20px solid $back-fill;
border-left: 5px solid $back-fill;
border-right: 5px solid transparent;
border-bottom: 20px solid transparent;
}
.left {
display: inline-block;
position: absolute;
top:0;
left: 10px;
height: $height;
width: 50%;
line-height: $height;
color: $font-color;
}
.right {
display: inline-block;
position: absolute;
top: 0;
right: 10px;
height: $height;
width: 50%;
line-height: $height;
text-align: right;
color: $font-color;
}
</style>

  

vue的props 属性类似于bug的东西的更多相关文章

  1. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  2. vue组件之属性Props

    组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息. ...

  3. vue & modal props & form data update bug

    vue & modal props & form data update bug OK <div> <BindModal :dialogBindVisible=&qu ...

  4. Vue2.x源码学习笔记-Vue实例的属性和方法整理

    还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...

  5. Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次

    key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...

  6. [转]Vue中用props给data赋初始值遇到的问题解决

    原文地址:https://segmentfault.com/a/1190000017149162 2018-11-28更:文章发布后因为存在理解错误,经@Kim09AI同学提醒后做了调整,在此深表感谢 ...

  7. Vue中用props给data赋初始值遇到的问题解决

    Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论   这篇文章主要介绍了Vue中用props给dat ...

  8. Vue2.0 【第二季】第7节 Component 组件 props 属性设置

    目录 Vue2.0 [第二季]第7节 Component 组件 props 属性设置 第7节 Component 组件 props 属性设置 一.定义属性并获取属性值 二.属性中带' - '的处理方式 ...

  9. Vue computed props pass params

    Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...

随机推荐

  1. 系统键盘按钮keyCode大全

    字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 ...

  2. Java中instanceof和isInstance的具体区别

    Java中instanceof和isInstance的具体区别 在Think in Java泛型这一章遇到这个问题,一些博客模糊提到了isInstance是instanceof的动态实现,查阅文档参考 ...

  3. 打包jar文件并自动运行

    1,首先在eclipse 或MyEclipse 中测试通过,没有问题,(每次修改要update Maven) 2,修改pom.xml ---把build中改为<excludes> < ...

  4. 转 Android:文件下载和写入SD卡学习小结

    转自 http://blog.csdn.net/zzp_403184692/article/details/8160739  一.文件下载  Android开发中,有时需要从网上下载一些资源以供用户使 ...

  5. Kafka Zookeeper 基本命令示例

    Kafka 新建Topic bin/kafka-topics. --replication-factor --partitions --topic my-topic 查看已存在Topic列表 bin/ ...

  6. HTML标签及属性

    HTML 标签大全及属性  来源:http://www.cnblogs.com/Mr-liyang/p/5797976.html 基本结构标签:<HTML>,表示该文件为HTML文件< ...

  7. 冲刺NOIP2015提高组复赛模拟试题(五)1.数学作业

    1. 数学作业 [问题描述] 路人丙的数学老师非常乏力,他喜欢出一些非常乏力的数学题来为难乏力的学生们.这次数学老师布置了一堆的数学题作为作业,而且这些数学题有个共同的特点是都求C(N,M)中不同质因 ...

  8. [SoapUI] 通过编程的方式设置当前的Environment

    testRunner.testCase.testSuite.project.setActiveEnvironment("Live")

  9. Ubuntu14.04下使用PPA安装php5.6,php7

    1.为了使用ppa(Personal Package Archives) 选安装依赖: # apt-get install python-software-properties 2.添加不同版本php ...

  10. C#通过Redis实现分布式锁

    Redis有三个最基本属性来保证分布式锁的有效实现: 安全性: 互斥,在任何时候,只有一个客户端能持有锁. 活跃性A:没有死锁,即使客户端在持有锁的时候崩溃,最后也会有其他客户端能获得锁,超时机制. ...