陕西建设厅网站首页,wordpress在IE9显示错位,重庆美食制作,网页游戏手机怎么玩此插件为另一位漂亮的前端同事小姐姐封装,觉得非常好用于是决定记载下来,便于复用
如图需要动态传入需要分配权重的数组,平均分配可以自动将100%平均分给数组中的值 如果手动拖拽,则会自动计算可拖动最大区域,便于最终总权重必定为100%
el-alert classmerge-alertel-alert classmerge-alert typewarning :closablefalsediv slottitle classdisplay-flexdiv styleheight:28px;line-height:28px所选的参与评分类型权重加起来应等于100%已配置 span stylefont-weighScore:600{{ totalWeight || 0 }}/span %。/divel-button clicksetAllExpWeight sizemini typetext平均分配/el-button/div/el-alertel-divider/el-dividerdiv classcourse-exp-weighScore-listdiv v-foritem in form.courseObjectiveWeightList :keyitem.iddiv stylepadding:10px;el-row typeflex justifyspace-betweenel-col :span24p{{item.name}} /p/el-col/el-rowel-row typeflex justifyspace-between :gutter13el-col :span16 stylepadding-left: 15px;ultralabx-slider v-modelitem.weight :maxreferenceWeight[item.id]/ultralabx-slider/el-colel-col classtext-right :span8el-input-number v-modelitem.weight sizemini :min0 :maxreferenceWeight[item.id] :precision0/el-input-number%/el-col/el-row/divdiv classdashed/div/div/divcomponents: {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组件需要联动使用
templatediv classultralabx-slider-boxel-slider classdown-slider v-modelmaxNumber :marks{[maxNumber]: ${maxNumber}%} disabled/el-sliderel-slider classup-slider v-modelcurNumber :maxmaxNumber :disableddisabled :stylewidth: ${maxNumber}%/el-slider/div
/templatescript
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,};},
};
/scriptstyle langscss
.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;}}
}
/stylestyle langscss scoped
.ultralabx-slider-box {position: relative;.up-slider {position: absolute;left: 0;top: 0;z-index: 1001;}.down-slider {}
}
/style
