parent
b1846ebfb3
commit
4f59ed78db
@ -0,0 +1,193 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-04 18:13:45
|
||||||
|
* @LastEditTime: 2021-11-05 09:56:25
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/components/v-percent/index.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="v-p-outter">
|
||||||
|
<span class="v-p-item" v-for="(item,index) in colorArr" :key="index" :style="{background: showColor[index] || '#051a33' }"></span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "v-percent",
|
||||||
|
props: {
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: "#3373CC",
|
||||||
|
},
|
||||||
|
num: {
|
||||||
|
type: Number,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
percentage: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
reverse: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
prarmObj() {
|
||||||
|
return {
|
||||||
|
color: this.color,
|
||||||
|
num: this.num,
|
||||||
|
percentage: this.percentage,
|
||||||
|
reverse: this.reverse,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
prarmObj: {
|
||||||
|
handler() {
|
||||||
|
let a = []
|
||||||
|
if (this.reverse) {
|
||||||
|
a = this.gradientColor(
|
||||||
|
"#05182e",
|
||||||
|
this.color,
|
||||||
|
this.num
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
a = this.gradientColor(
|
||||||
|
this.color,
|
||||||
|
"#05182e",
|
||||||
|
this.num
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.colorArr = a
|
||||||
|
let n = Math.floor(this.percentage * this.colorArr.length);
|
||||||
|
let cArr = [];
|
||||||
|
for (let i = 0; i < this.num; i++) {
|
||||||
|
let ele = "#051a33";
|
||||||
|
if (i >=this.num - n && !this.reverse) {
|
||||||
|
ele = this.colorArr[i];
|
||||||
|
}
|
||||||
|
if(this.reverse && i < n) {
|
||||||
|
ele = this.colorArr[i];
|
||||||
|
}
|
||||||
|
cArr.push(ele);
|
||||||
|
}
|
||||||
|
this.showColor = cArr;
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
colorArr: [],
|
||||||
|
showColor: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
colorRgb(sColor) {
|
||||||
|
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||||
|
let color = sColor.toLowerCase();
|
||||||
|
if (color && reg.test(color)) {
|
||||||
|
if (color.length === 4) {
|
||||||
|
let sColorNew = "#";
|
||||||
|
for (var i = 1; i < 4; i += 1) {
|
||||||
|
sColorNew += color
|
||||||
|
.slice(i, i + 1)
|
||||||
|
.concat(color.slice(i, i + 1));
|
||||||
|
}
|
||||||
|
color = sColorNew;
|
||||||
|
}
|
||||||
|
//处理六位的颜色值
|
||||||
|
let sColorChange = [];
|
||||||
|
for (let i = 1; i < 7; i += 2) {
|
||||||
|
sColorChange.push(parseInt("0x" + color.slice(i, i + 2)));
|
||||||
|
}
|
||||||
|
return sColorChange;
|
||||||
|
} else {
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
colorHex(rgb) {
|
||||||
|
let _this = rgb;
|
||||||
|
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||||
|
if (/^(rgb|RGB)/.test(_this)) {
|
||||||
|
let aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
|
||||||
|
let strHex = "#";
|
||||||
|
for (let i = 0; i < aColor.length; i++) {
|
||||||
|
let hex = Number(aColor[i]).toString(16);
|
||||||
|
hex = hex < 10 ? 0 + "" + hex : hex; // 保证每个rgb的值为2位
|
||||||
|
if (hex === "0") {
|
||||||
|
hex += hex;
|
||||||
|
}
|
||||||
|
strHex += hex;
|
||||||
|
}
|
||||||
|
if (strHex.length !== 7) {
|
||||||
|
strHex = _this;
|
||||||
|
}
|
||||||
|
return strHex;
|
||||||
|
} else if (reg.test(_this)) {
|
||||||
|
let aNum = _this.replace(/#/, "").split("");
|
||||||
|
if (aNum.length === 6) {
|
||||||
|
return _this;
|
||||||
|
} else if (aNum.length === 3) {
|
||||||
|
let numHex = "#";
|
||||||
|
for (let i = 0; i < aNum.length; i += 1) {
|
||||||
|
numHex += aNum[i] + aNum[i];
|
||||||
|
}
|
||||||
|
return numHex;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
gradientColor(startColor, endColor, step) {
|
||||||
|
let startRGB = this.colorRgb(startColor); //转换为rgb数组模式
|
||||||
|
let startR = startRGB[0];
|
||||||
|
let startG = startRGB[1];
|
||||||
|
let startB = startRGB[2];
|
||||||
|
|
||||||
|
let endRGB = this.colorRgb(endColor);
|
||||||
|
let endR = endRGB[0];
|
||||||
|
let endG = endRGB[1];
|
||||||
|
let endB = endRGB[2];
|
||||||
|
|
||||||
|
let sR = (endR - startR) / step; //总差值
|
||||||
|
let sG = (endG - startG) / step;
|
||||||
|
let sB = (endB - startB) / step;
|
||||||
|
|
||||||
|
let colorArr = [];
|
||||||
|
for (let i = 0; i < step; i++) {
|
||||||
|
//计算每一步的hex值
|
||||||
|
let hex = this.colorHex(
|
||||||
|
"rgb(" +
|
||||||
|
parseInt(sR * i + startR) +
|
||||||
|
"," +
|
||||||
|
parseInt(sG * i + startG) +
|
||||||
|
"," +
|
||||||
|
parseInt(sB * i + startB) +
|
||||||
|
")"
|
||||||
|
);
|
||||||
|
colorArr.push(hex);
|
||||||
|
}
|
||||||
|
return colorArr;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.v-p-outter {
|
||||||
|
width: 160px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.v-p-item {
|
||||||
|
width: 10px;
|
||||||
|
height: 16px;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #051a33;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue