vue+less 电池电量图标组件

父组件调用

 <battery-icon :quantity=40  style="width:70px;"></battery-icon>

组件代码

<template><div class="electric-panel" :class="bgClass"><div class="panel" :style="{transform: `rotate(${rotate}deg)`}"><div class="remainder" :style="{width: quantity +'%'}" /></div><div v-show="showText" :style="{marginLeft: (parseFloat(rotate)? 0 : '10') + 'px'}"class="text">{{ quantity }}%</div></div></template><script>
/*** 电池电量Icon*/
export default {props: {// 电量值quantity: {type: Number,default: 0},// 是否显示电量值showText: {type: Boolean,default: true},// 旋转角度rotate: {type: String,default: '0'}},computed: {bgClass() {if (this.quantity >= 50) {return 'success'}//  else if (this.quantity >= 15) {//   return 'warning'// }//  else if (this.quantity >= 1) {//   return 'danger'// } else {return 'danger'}}}
}
</script><style lang="less" scoped>
@color-success: #34A94D;
// @color-warning: orange;
@color-danger: #FA3220 ;
.panel(@color) {.panel {border-color: @color;&:before {background: @color;}.remainder {background: @color;}}.text {color: @color;}
}
.electric-panel {display: flex;justify-content: center;align-items: center;.panel {box-sizing: border-box;width: 30px;height: 14px;position: relative;border: 2px solid #ccc;padding: 1px;border-radius: 3px;&::before {content: '';border-radius: 0 1px 1px 0;height: 6px;background: #ccc;width: 4px;position: absolute;top: 50%;right: -4px;transform: translateY(-50%);}.remainder {border-radius: 1px;position: relative;height: 100%;width: 0%;left: 0;top: 0;background: #fff;}}.text {text-align: left;width: 42px;}&.success {.panel(@color-success);}// &.warning {//   .panel(@color-warning);// }&.danger {.panel(@color-danger);}
}
</style>

vue+less 电池电量图标组件相关推荐

Android 绘制电池电量图标（含充电状态）。
Android 绘制电池电量图标在视频播放等全屏情况下有用到. 先在布局文件中写一个ImageView <?xml version="1.0" encoding=" ...
安卓修改电池容量教程_安卓手机端修改电池电量图标的教程
5.修改电量显示为1%,电池图标为原版+数字显示风格.你一定不全知道的秘密,安卓手机拨号键代码大全.在安卓手机拨号面板中输入以下拨号代码就可执行一些鲜为人知的键盘隐藏功能,这些是开发者所熟知的,但普通 ...
修改电量android,安卓手机端修改电池电量图标的教程
安卓手机端是可以给电池电量图标进行修改的,恐怕大家都不知道吧,不同的系统基本都有比一样的电量图标,这就导致了不是每一个人都喜欢同一个图标,现在我就来为大家讲解如何在手机端修改电量图标的教程. 第一步: ...
Android自定义电池电量显示组件(kotlin，java)
最近产品研发需求需要显示在线设备的电池电量状态,然后UI给出的效果的图是这样的于是就开始了自定义个,因为是项目特定的UI所以很多属性都没有直接抽取到styles里面了,直接上代码(因为项目是使用ko ...
QT制作电池电量图标
利用QT实现电池电量显示好充电动态效果,先看效果图: 电池电量颜色划分: 电池gif:0-29–红色剩余电量数字:红色电池gif:红色30-54–黄色剩余电量数字:红色电池gif:55-100 ...
android 电池绘制,Android绘制电池电量图标
Android手动绘制电池图标展示 1.[代码][Java]代码 public class PowerIconView extends View { private int borderColor = ...
解决win10下栏不显示电池电量图标问题
1.搜索栏找到"设备管理器". 2.找到并展开电池选项,分别右键单击两个子项,先禁用,再重新启用,一般情况下通知区域中的图标就会重现了. 以上就是Win10电池图标消失的恢复方法了 ...
【uni-app】菜菜的我xie了一个电池电量组件
最近在用uni-app开发app项目.因为首页需要有个电池电量按钮来显示硬件设备的剩余电量.为了保证开发进度,所以直接就在插件市场拉了个插件直接使用了. 这种组件还是挺少的,所以样式只能说是勉勉强强. ...
动态显示电池电量Icon Vue 电量Icon 电池电量
动态显示电池电量Icon Vue 电量Icon 电池电量效果 Vue 代码实现 <template><div class="electric-panel" :c ...

vue+less 电池电量图标组件

父组件调用

组件代码

vue+less 电池电量图标组件相关推荐

最新文章

热门文章