+
@@ -61,20 +62,23 @@ const props = defineProps({
},
color: {
type: Object,
- default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)"
+ default: "linear-gradient(270deg, #63e700 0%, #19674c 100%)",
},
labelWidth: {
type: Number,
- default: 80
- }
+ default: 80,
+ },
+ labelPosition: {
+ type: String,
+ default: "left",
+ },
});
const max = ref(100);
watch(
() => props.data,
() => {
- getMax()
-
+ getMax();
}
);
@@ -85,16 +89,16 @@ function getMax() {
}
onMounted(() => {
- getMax()
-})
+ getMax();
+});
function getColor(val) {
if (props.color instanceof String) {
return props.color;
}
if (props.color instanceof Array) {
- const colors = [...props.color]
- colors.sort((a, b) => b.percentage - a.percentage)
+ const colors = [...props.color];
+ colors.sort((a, b) => b.percentage - a.percentage);
for (let i = 0; i < colors.length; i++) {
if (val > colors[0].percentage) {
return colors[0].color;
@@ -118,9 +122,7 @@ function getColor(val) {
}
.bar-item {
font-size: 17px;
- height: 32px;
&[size="large"] {
- height: 42px;
.bar-item_content {
.bar-item_content-bar {
height: 13px;
@@ -128,7 +130,6 @@ function getColor(val) {
}
}
&[size="small"] {
- height: 25px;
font-size: 12px;
}
.bar-item-label {
@@ -138,6 +139,20 @@ function getColor(val) {
white-space: nowrap;
text-overflow: ellipsis;
}
+ &[position="left"] {
+ height: 32px;
+ line-height: 32px;
+ }
+ &[position="top"] {
+ margin-bottom: 4px;
+ .bar-item-label {
+ width: 100%;
+ text-align: left;
+ }
+ .bar-item_content {
+ width: calc(100% - 80px);
+ }
+ }
.bar-item_content {
width: calc(100% - var(--label-width) - 80px);
.bar-item_content-bar {
diff --git a/src/components/file/upload-group.vue b/src/components/file/upload-group.vue
index 6ef7021..30e6b9e 100644
--- a/src/components/file/upload-group.vue
+++ b/src/components/file/upload-group.vue
@@ -73,6 +73,7 @@
style="width: 200px"
v-model="item.classId"
clearable
+ v-if="fileClasss.length"
>
修改文件分类