vue中封装自动计算比例滑块

 

 

 此插件为另一位漂亮的前端同事小姐姐封装,觉得非常好用于是决定记载下来,便于复用

如图需要动态传入需要分配权重的数组,平均分配可以自动将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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/36266.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

zookeeper常用命令

zookeeper常用命令 1. 下载安装2. 配置说明2.1 配置 3. zookeeper的常见命令3.1 server端启动停止等命令3.2 客户端连接等命令3.3 客户端简单常用命令3.3.1 查看目录&#xff08;查看数据结构&#xff09;3.3.2 删除目录3.3.3 创建目录3.3.4 创建目录并写入值 查看节点值3.3.5…

Apache JMeter:完全指南

Apache JMeter 是一款开源的性能测试工具&#xff0c;可以用于测试 Web 应用程序、FTP 服务器、数据库等各种类型的服务器。本文将以 JMeter 5.5 为例介绍 JMeter 的使用方法。 下载和安装 由于 JMeter 是使用 Java 开发的&#xff0c;因此在运行之前必须先安装 JDK。您可以在…

Android中tools属性的使用

参考&#xff1a; 1.Android:Tools命名空间原来是有大用处的 2.Android中tools属性的使用 3.工具属性参考文档 4. 命名空间介绍 5. 注解 6. lint 7. 资源压缩shrink-resources 目录 一、概述二、引入tools命名空间三、tools 命名空间的作用有哪些&#xff1f;四、tools 命名空间…

年薪6.5万美元|生物医学老师获美国耶鲁大学博士后职位

I老师就职于双非二本院校&#xff0c;希望通过出国研修以提升科研背景&#xff0c;在公派访学和申请导师出资的博士后之间&#xff0c;其选择了后者。最终我们落实了美国耶鲁大学的职位&#xff0c;头衔为Associate Research Scientist&#xff08;副研究科学家&#xff09;&am…

Selenium 自动化 | 案例实战篇

Chrome DevTools 简介 Chrome DevTools 是一组直接内置在基于 Chromium 的浏览器&#xff08;如 Chrome、Opera 和 Microsoft Edge&#xff09;中的工具&#xff0c;用于帮助开发人员调试和研究网站。 借助 Chrome DevTools&#xff0c;开发人员可以更深入地访问网站&#xf…

Observability:识别生成式 AI 搜索体验中的慢速查询

作者&#xff1a;Philipp Kahr Elasticsearch Service 用户的重要注意事项&#xff1a;目前&#xff0c;本文中描述的 Kibana 设置更改仅限于 Cloud 控制台&#xff0c;如果没有我们支持团队的手动干预&#xff0c;则无法进行配置。 我们的工程团队正在努力消除对这些设置的限制…

uniapp动态底部tab栏

实现思路&#xff1a; 创建一个js文件用来存放所有的tabbar,不同的数组表示不同的tabbar组合。 创建一个vue文件用来制作底部tabbar组件。 使用vuex存储用户的身份信息,根据身份信息切换tabbar组合。 具体步骤&#xff1a; 新建一个tabbar.js文件&#xff0c;将…

SpringBoot 整合MyBatis

整合MyBatis 官方文档&#xff1a;http://mybatis.org/spring-boot-starter/mybatis-spring-boot-autoconfigure/ Maven仓库地址&#xff1a;https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter/2.1.3 整合测试 导入 MyBatis 所需要的…

数据结构笔记--优先队列(大小根堆)经典题型

1--项目的最大利润 题目描述&#xff1a; 输入&#xff1a;正数数组 costs&#xff0c;costs[i] 表示项目 i 的花费&#xff1b;正数数组 profits&#xff0c;profits[i] 表示项目 i 的花费&#xff1b;正数 k 表示只能串行完成最多 k 个项目&#xff1b;m 表示拥有的资金&…

MySQL事务:确保数据完整性与并发性的关键

MySQL事务&#xff1a;确保数据完整性与并发性的关键 MySQL作为一种广泛使用的开源关系型数据库管理系统&#xff0c;具备强大的事务支持&#xff0c;以确保数据库操作的一致性、隔离性和持久性。本文将深入探讨MySQL中的事务概念、事务隔离级别以及事务的应用场景&#xff0c…

leetcode 516. 最长回文子序列(JAVA)题解

题目链接https://leetcode.cn/problems/longest-palindromic-subsequence/description/?utm_sourceLCUS&utm_mediumip_redirect&utm_campaigntransfer2china 目录 题目描述&#xff1a; 暴力递归&#xff1a; 动态规划&#xff1a; 题目描述&#xff1a; 给你一个…

Python学习过程笔记:主模块(main) 异常处理 命令行参数解析 日志记录 socket模块 类的私有方法 字节字符串

文章目录 1.Python中的主程序2.Python中的异常处理3.Python中的命令行参数解析4.Python中的日志记录5.网络编程socket模块6.Python中的私有方法7.Python中的字节字符串 1.Python中的主程序 if __name__ __main__在Python中&#xff0c;if __name__ __main__ 是一个常见的代码…

百日筑基篇——python爬虫学习(一)

百日筑基篇——python爬虫学习&#xff08;一&#xff09; 文章目录 前言一、python爬虫介绍二、URL管理器三、所需基础模块的介绍1. requests2. BeautifulSoup1. HTML介绍2. 网页解析器 四、实操1. 代码展示2. 代码解释1. 将大文件划分为小的文件&#xff08;根据AA的ID数量划…

简单认识Zabbix监控系统及配置

文章目录 一、zabbix概述1、定义2、zabbix监控原理3、监控对象4、zabbix的3种架构&#xff08;1&#xff09; C/S架构&#xff08;2&#xff09;分布式架构&#xff1a;zabbix-proxy-client架构&#xff08;3&#xff09; master-node-client架构 5、zabbix监控模式 二、部署za…

项目实战 — 消息队列(8){网络通信设计①}

目录 一、自定义应用层协议 &#x1f345; 1、格式定义 &#x1f345; 2、准备工作 &#x1f384;定义请求和响应 &#x1f384; 定义BasicArguments &#x1f384; 定义BasicReturns &#x1f345; 2、创建参数类 &#x1f384; 交换机 &#x1f384; 队列 &#x1f38…

【网络】传输层——TCP(滑动窗口流量控制拥塞控制延迟应答捎带应答)

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《网络》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 上篇文章对TCP可靠性机制讲解了一部分&#xff0c;这篇文章接着继续讲解。 &#x1f3a8;滑动窗口 在…

Springboot 实践(2)MyEclipse2019创建项目修改pom文件,加载springboot 及swagger-ui jar包

MyEclipse2019创建工程之后&#xff0c;需要添加Springboot启动函数、添加application.yml配置文件、修改pom文件添加项目使用的jar包。 添加Springboot启动函数 创建文件存储路径 &#xff08;1&#xff09;右键单击“src/main/java”文件夹&#xff0c;弹出对话框输入路径…

Android 简单的视频、图片压缩工具

首页需要压缩的工具包 1.Gradle implementation com.iceteck.silicompressorr:silicompressor:2.2.3 2.添加相关权限&#xff08;手机得动态申请权限&#xff09; <uses-permission android:name"android.permission.READ_EXTERNAL_STORAGE"/> <uses-p…

05 - 研究 .git 目录

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 1. HEAD2. config3. refs4. objects 1. HEAD 2. config 3. refs 4. objects Git对象一共有三种&#xff1a;数据对象 blob、树对象 tree以及提交对象 commit&#xff0c;这些对象都被保…

Vue 目录结构 vite 项目

Vue3 项目常用的目录结构和每个文件的作用【通过 vite 创建的项目】 vite目录结构&#xff1a; dist // 打包后生成的文件目录 node_modules // 环境依赖 public // 公共资源目录 favicon.ico …