此插件为另一位漂亮的前端同事小姐姐封装,觉得非常好用于是决定记载下来,便于复用
如图需要动态传入需要分配权重的数组,平均分配可以自动将100%平均分给数组中的值
如果手动拖拽,则会自动计算可拖动最大区域,便于最终总权重必定为100%文章来源:https://www.toymoban.com/news/detail-649103.html
<el-alert class="merge-alert" type="warning" :closable="false">
<div slot="title" class="display-flex">
<div style="height:28px;line-height:28px">所选的参与评分类型权重加起来应等于100%,已配置 <span style="font-weighScore:600">{{ totalWeight || 0 }}</span> %。</div>
<el-button @click="setAllExpWeight" size="mini" type="text">平均分配</el-button>
</div>
</el-alert>
<el-divider></el-divider>
<div class="course-exp-weighScore-list">
<div v-for="item in form.courseObjectiveWeightList" :key="item.id">
<div style="padding:10px;">
<el-row type="flex" justify="space-between">
<el-col :span="24">
<p>{{item.name}} </p>
</el-col>
</el-row>
<el-row type="flex" justify="space-between" :gutter="13">
<el-col :span="16" style="padding-left: 15px;">
<ultralabx-slider v-model="item.weight" :max="referenceWeight[item.id]"></ultralabx-slider>
</el-col>
<el-col class="text-right" :span="8">
<el-input-number v-model="item.weight" size="mini" :min="0" :max="referenceWeight[item.id]" :precision="0"></el-input-number>
%
</el-col>
</el-row>
</div>
<div class="dashed"></div>
</div>
</div>
components: {
ultralabxSlider,
},
computed: {
totalWeight() {
let total = 0;
this.form.courseObjectiveWeightList.forEach((item) => {
total += item.weight;
});
return total;
},
referenceWeight() {
let obj = {};
this.form.courseObjectiveWeightList.forEach((item) => {
let { id } = item;
obj[id] = 100;
this.form.courseObjectiveWeightList
.filter((item) => item.id !== id)
.forEach((item) => {
obj[id] -= item.weight || 0;
});
if (obj[id] < 0) {
obj[id] = 0;
}
});
return obj;
},
},
methods:{
setAllExpWeight() {
//平均分配
let weightArr = this.disNumber(
100,
this.form.courseObjectiveWeightList.length
);
this.form.courseObjectiveWeightList.map((item, index) => {
item.weight = weightArr[index];
});
},
disNumber(num, len) {
let average = Math.floor(num / len)
let remainder = num % len
let arr = new Array(len).fill(average)
if (remainder > 0) {
for (let i = 0; i < remainder; i++) {
arr[i]++
}
}
return arr
}
}
// 模拟数据 ,需要自行替换
form.courseObjectiveWeightList = [ { "id": "1689911475658219522", "name": "好好生活啊", "weight": 0 }, { "id": "1689910525744832514", "name": "好日子", "weight": 0 }, { "id": "1689156584639741954", "name": "实验知识1", "weight": 0 } ]
下面是封装ultralabx-slider组件需要联动使用文章来源地址https://www.toymoban.com/news/detail-649103.html
<template>
<div class="ultralabx-slider-box">
<el-slider class="down-slider" v-model="maxNumber" :marks="{[maxNumber]: `${maxNumber}%`}" disabled></el-slider>
<el-slider class="up-slider" v-model="curNumber" :max="maxNumber" :disabled="disabled" :style="`width: ${maxNumber}%`"></el-slider>
</div>
</template>
<script>
export default {
name: "ultralabxSlider",
props: {
value: {
type: Number,
default: 0,
},
max: {
type: Number,
default: 100,
},
disabled: {
type: Boolean,
default: false,
},
},
watch: {
value: {
immediate: true,
handler(val) {
if (val === this.curNumber) {
return;
}
this.curNumber = val;
},
},
max: {
immediate: true,
handler(val) {
this.maxNumber = val;
},
},
curNumber: {
immediate: true,
handler(val) {
if (val === this.value) {
return;
}
this.$emit("input", val);
},
},
},
data() {
return {
curNumber: 0,
maxNumber: 100,
};
},
};
</script>
<style lang="scss">
.ultralabx-slider-box {
.el-slider__button {
width: 10px;
height: 10px;
border-width: 4px;
}
.el-slider__bar,
.el-slider__runway {
height: 4px;
border: 1px solid transparent;
top: -1px;
}
.el-slider__button-wrapper {
top: -16px;
}
.up-slider {
.el-slider__runway {
background-color: transparent;
}
.el-slider__bar {
border: 1px solid #409eff;
}
}
.down-slider {
.el-slider__runway {
border-color: #e4e7ed;
&.disabled .el-slider__button {
border: 1px dashed #ff8e1f;
}
}
.el-slider__bar {
border-color: #ff8e1f;
border-style: dashed;
background-color: #ffffff;
}
.el-slider__marks-text {
color: #ff8e1f;
font-size: 12px;
line-height: 2.3;
white-space: nowrap;
bottom: 0.333333em;
margin-top: 0;
}
}
}
</style>
<style lang="scss" scoped>
.ultralabx-slider-box {
position: relative;
.up-slider {
position: absolute;
left: 0;
top: 0;
z-index: 1001;
}
.down-slider {
}
}
</style>
到了这里,关于vue中封装自动计算比例滑块的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!