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