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

这篇具有很好参考价值的文章主要介绍了vue中封装自动计算比例滑块。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vue中封装自动计算比例滑块,vue.js,javascript,ecmascript 

 

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

如图需要动态传入需要分配权重的数组,平均分配可以自动将100%平均分给数组中的值

vue中封装自动计算比例滑块,vue.js,javascript,ecmascript

 如果手动拖拽,则会自动计算可拖动最大区域,便于最终总权重必定为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 % 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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 深入理解 ECMAScript modules:提升你的 JavaScript 技能(一)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月20日
    浏览(44)
  • BCSP-玄子前端开发之JavaScript+jQuery入门CH07_ECMAScript 6基础

    4.7.1 ECMAScript 6 简介 ECMAScript 6.0(简称 ES6) 是JavaScript语言的下一代标准 正式发布于2015年6月 目标 使JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言 版本升级 ECMAScript 2015 ECMAScript 2016 ECMAScript 2017 ECMAScript和JavaScript 的关系 前者是后者的规格,后者是前者的

    2023年04月27日
    浏览(54)
  • 记录--封装一个通过js调用的全局vue组件

    在使用vue项目编写的时候,不可避免的会碰到需要时js api来调用组件进行显示的情况 例如饿了么element ui 的 Notification 通知、Message 消息提示等组件 虽然已经提供了,但是由于api的限制,我们只能通过特定的参数来有限的改变组件的样式 之前的文章说过可以使用 new Vue() 、

    2024年02月09日
    浏览(58)
  • JavaScript的数学计算库:decimal.js

    An arbitrary-precision Decimal type for JavaScript. 整数和浮点数 简单但功能齐全的 API 复制 JavaScript 和对象的许多方法 Number.prototype Math 还处理十六进制、二进制和八进制值 比 Java 的 BigDecimal JavaScript 版本更快,更小,也许更容易使用 无依赖关系 广泛的平台兼容性:仅使用 JavaScript 1

    2024年02月09日
    浏览(41)
  • js封装SDK 在VUE、小程序、公众号直接调用js调用后端接口(本文以vue项目为例)

    1.封装一个js文件 msgSdk.js 注意:需要修改这个请求地址  apiServiceAddress 2.在index.html中引入 msgSdk.js文件 和 jquery文件 3.在页面中调用

    2024年04月27日
    浏览(39)
  • JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js

    一、计算精度现象举例 举例1、加法 举例2、减法    举例3、乘法 举例3、除法 二、JS为什么会有计算精度的问题 JavaScript 内部只有一种数字类型Number,也就是说,JavaScript 语言的底层根本没有整数,所有数字都是以IEEE-754标准格式64位浮点数形式储存,1与1.0是相同的。因为有

    2024年02月10日
    浏览(42)
  • 用javascript做一个计算器,用js做一个计算器代码

    大家好,给大家分享一下怎么用javascript做一个简单的计算器,很多人还不知道这一点。下面详细解释一下。现在让我们来看看! 页面布局设计(HTML+CSS)   由于在之前的博客中有对html和css进行详细的讲解,再次就不多叙述,直接上代码。因为js中用到了JQuery选择器所以在

    2024年02月04日
    浏览(69)
  • JavaScript+Selenium自动化测试_selenium和js能一起做自动化测试

    var webdriver = require(‘selenium-webdriver’), By = webdriver.By, until = webdriver.until; var driver = new webdriver.Builder() .forBrowser(‘chrome’) .build(); driver.get(‘https://www.baidu.com’); driver.findElement(By.id(‘kw’)).sendKeys(‘webdriver’); driver.findElement(By.id(‘su’)).click(); driver.wait(until.titleIs(‘webdriver_百度

    2024年04月25日
    浏览(46)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • 详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第三节 (封装TabBar JS版)

    本组件通过HML布局、CSS样式和JS逻辑封装实现一个通用的Tabbar。支持可配置的Tab项和对应页面,可以方便接入到不同页面中,提高开发效率。 HML部分采用Flex布局实现Tabbar的整体结构,包含多个Tab项。 CSS部分定义样式,包括图标大小、文字颜色等样式参数。支持后续扩展。 JS部分提

    2024年02月04日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包