此插件为另一位漂亮的前端同事小姐姐封装,觉得非常好用于是决定记载下来,便于复用
如图需要动态传入需要分配权重的数组,平均分配可以自动将100%平均分给数组中的值
如果手动拖拽,则会自动计算可拖动最大区域,便于最终总权重必定为100%
<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 % lenlet 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组件需要联动使用
<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>
