自定义了一个条形展示百分比的vue组件scalebar。代码如下:
<style>
.intoDiv {
border-radius: 2px;
box-shadow: 1px 1px 3px #c5c5c5;
}
</style>
<template>
<div id="J_PurchaseWrap">
<div :style="styles1">
<div class="intoDiv" :style="styles2"></div>
</div>
</div>
</template>
<script>
/****
* 条形展示百分比
* longof100: 为100%时,条形的长度
* height: 条形的高度
* scale: 展示的百分比,写成小数
* color: 条形的颜色
*
*/
export default {
name: "scalebar",
props: {
longof100: [Number, String],
height: [Number, String],
scale: [Number, String],
color: String
},
computed: {
styles1() {
let style = {};
if (this.longof100) {
style["width"] = this.longof100 + "px";
} else {
style.width = "100px";
}
if (this.height) {
styl