首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >el-select选中变色及百分比怎么做

el-select选中变色及百分比怎么做

作者头像
程序媛夏天
发布于 2024-01-18 13:21:43
发布于 2024-01-18 13:21:43
31700
代码可运行
举报
运行总次数:0
代码可运行
效果图:

选中后超过80%的显示红色,没有则显示黄色,没有百分比的不变颜色。

解决思路:

1.A思路:用的是获取dom节点,每切换一次就获取dom节点,然后给它变色;但是这样子的缺点就是有时候切换就会不显示颜色,这个原因是它捕获不到最新的dom节点。 2.B思路:用的vue里面的:class,并且就是设置一个变量,如果这个变量为true就是红色,否则就是false黄色,但是这样子不能正确显示百分比出来。 3.C思路:就是在外面蒙一层div,设置宽度和颜色为变量,定义一个函数,在改变下拉框的时候调用函数并且传入参数。

源代码:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 <div class="stock-location">
          <el-form-item :label="$t('lang.intoStockLocation')" prop="shelvesSn">
            <div class="changeColor" style="position: relative;">
            //使用内联样式,在它的外面给它加个div盒子,设置两个变量:宽度和颜色
              <div
                :style="{
                  position: 'absolute',
                  backgroundColor: backgroundColorShelves,
                  width: backgroundWidthShelves + 'px',
                  height: '40px',
                  borderRadius: '5px'
                }"
              ></div>
              <el-select
                v-model="ruleForm.shelvesSn"
                class="shelfLocation"
                :placeholder="$t('lang.pleaseSelect')"
                @change="handleShelvesChange"
                popper-class="changeColor-select"
              >
                <el-option
                  :label="
                    item.shelvesUsage > 0
                      ? $t('lang.shelfUsage', {
                          shelf: item.shelvesSn,
                          usage: item.shelvesUsage
                        })
                      : item.shelvesSn
                  "
                  :value="item.shelvesSn"
                  v-for="(item, index) in shelvesList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div class="unit">{{ $t("lang.shielf") }}</div>
          </el-form-item>
       
          <el-form-item
            prop="shelvesLevel"
            :label="$t('lang.nth')"
            label-width="22px"
          >
            <div class="changeColor" style="position: relative;">
              <div
                :style="{
                  position: 'absolute',
                  backgroundColor: backgroundColor,
                  width: backgroundWidth + 'px',
                  height: '40px',
                  borderRadius: '5px'
                }"
              ></div>
              <Popover placement="top" :imageUrl="imgUrl" v-if="imgUrl">
                <el-select
                  v-model="ruleForm.shelvesLevel"
                  class="shelfLevel"
                  :placeholder="$t('lang.pleaseSelect')"
                  @change="handleLevelChange"
                  popper-class="changeColor-select"
                >
                  <el-option
                    :label="
                      item.usage > 0
                        ? $t('lang.levelUsage', {
                            level: item.level,
                            usage: item.usage
                          })
                        : item.level
                    "
                    :value="item.level"
                    v-for="(item, index) in levelList"
                    :key="index"
                  ></el-option>
                </el-select>
              </Popover>
              <el-select
                v-else
                v-model="ruleForm.shelvesLevel"
                class="shelfLevel"
                :placeholder="$t('lang.pleaseSelect')"
                @change="handleLevelChange"
              >
                <el-option
                  :label="
                    item.usage > 0
                      ? $t('lang.levelUsage', {
                          level: item.level,
                          usage: item.usage
                        })
                      : item.level
                  "
                  :value="item.level"
                  v-for="(item, index) in levelList"
                  :key="index"
                ></el-option>
              </el-select>
            </div>
            <div class="unit">{{ $t("lang.level") }}</div>
          </el-form-item>
        </div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
export default {
data(){
  return {
    //定义变量给它一个默认值
      backgroundColorShelves: "white",//货架编号
      backgroundWidthShelves: 0,
      backgroundColor: "white",//货架层级
      backgroundWidth: 0,
    
  }
},

//定义变颜色以及宽度变化的方法
//改变货架编号
 updateStyleShelves(percentage1, percentage2) {
    //为什么设置202是因为输入框的宽度是202
      this.backgroundWidthShelves = 202 * percentage1;
      this.backgroundColorShelves = percentage1 > 0.8 ? "#ffe2e2" : "#fff0e0";
      this.backgroundWidth = 202 * percentage2;
      this.backgroundColor = percentage2 > 0.8 ? "#ffe2e2" : "#fff0e0";
    },
    
//改变货架层级
    updateStyle(percentage) {
      this.backgroundWidth = 202 * percentage;
      this.backgroundColor = percentage > 0.8 ? "#ffe2e2" : "#fff0e0";
    },
    
 //改变货架编号的方法       
  handleShelvesChange(item) {
      //定义一个选中的货架
      const selectedShelf = this.shelvesList.filter(
        ele => ele.shelvesSn === item //item为货架编号
      );
      if (selectedShelf && selectedShelf.length > 0) {
        //监控层
        this.levelList = selectedShelf[0].floors || [];
        this.shelvesUsePercentage = Number(selectedShelf[0].shelvesUsage) / 100;
        this.ruleForm.shelvesLevel = this.levelList.length > 0 ? 1 : "";
        this.defaultlevelUsePercentage = Number(this.levelList[0].usage) / 100; //选择货架编号的默认第一个的货架的百分比
        // console.log("123",this.shelvesUsePercentage, this.defaultlevelUsePercentage)
        //调用变色的方法,将货架编号百分比以及货架层数百分比传进去
        this.updateStyleShelves(
          this.shelvesUsePercentage,
          this.defaultlevelUsePercentage
        );
         }
      this.checkSelectedShelves();
    },
    
 //改变货架层级的方法   
  handleLevelChange(val) {
      this.defineUsagePercentAndImageUrl(val);
      this.updateStyle(this.levelUsePercentage);
  }
 </script>

第一种思路重现: (从代码上来看逻辑没有问题,但是获取不到最新的dom节点,这就导致了bug)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
handleShelvesChange(item) {
      //定义一个选中的货架
      const selectedShelf = this.shelvesList.filter(
        ele => ele.shelvesSn === item
      );
      if (selectedShelf && selectedShelf.length > 0) {
       //监控层
        this.levelList = selectedShelf[0].floors || [];
        this.shelvesUsePercentage = Number(selectedShelf[0].shelvesUsage) / 100;
        this.ruleForm.shelvesLevel = this.levelList.length > 0 ? 1 : "";
        if (this.ruleForm.shelvesLevel) {
          this.defineUsagePercentAndImageUrl(this.ruleForm.shelvesLevel);
          // 插入背景色(货架层)
          if (this.isShowUsage) {
          //关键代码,他传的是选择器和百分比
            this.calculateSelectBackground(
              ".shelfLevel>.el-input",
              this.levelUsePercentage
            );
            // 插入背景色(货架)
            this.calculateSelectBackground(
              ".shelfLocation>.el-input",
              this.shelvesUsePercentage
            );
          }
        }
      }
      this.checkSelectedShelves();
    },
    changeCheckbox() {
      if (this.checked == false) {
        this.ruleForm.operateType = 0;
      } else {
        this.ruleForm.operateType = 2;
      }
    },
    // 用js向下拉选择框插入背景色百分比进度条
    calculateSelectBackground(selector, percentage) {
      console.log(selector, percentage);
      let dom = document.querySelector(selector);
      if (dom) {
        let lastDom = document.querySelector(`${selector}>div`);
        if (lastDom) {
          dom.removeChild(lastDom);
        }
        console.log(selector, percentage, 2);
        let domHeight = dom.offsetHeight - 2;
        let domWidth = dom.offsetWidth * percentage;
        let newDom = document.createElement("div");
        console.log(domHeight, domWidth, percentage, 3);
        //这样的写法
        newDom.style = `
          width: ${domWidth}px;
          height: ${domHeight}px;
          background: ${percentage > 0.8 ? "#ffe2e2" : "#fff0e0"};
          position: absolute;
          border-radius:4px;
          opacity:0.5;
          bottom:0px;
        `;
        dom.insertBefore(newDom, dom.children[0]);
      }
    },
    destroyDom(selector) {
      let dom = document.querySelector(selector);
      let lastDom = document.querySelector(`${selector}>div`);
      if (lastDom) {
        dom.removeChild(lastDom);
      }
    },
    handleLevelChange(val) {
      this.ruleForm.shelvesLevel = val;
      this.defineUsagePercentAndImageUrl(val);
      this.checkSelectedShelves();
      // console.log(this.isShowUsage);
      if (this.isShowUsage) {
        this.calculateSelectBackground(
          ".shelfLevel>.el-input",
          this.levelUsePercentage
        );
      } else {
        this.calculateSelectBackground(".shelfLevel>.el-input", 0);
      }
    },
    defineUsagePercentAndImageUrl(val) {
      const selectedItem = this.levelList.filter(item => item.level === val)[0];
      this.levelUsePercentage = Number(selectedItem.usage) / 100;
      this.imgUrl = selectedItem.url;
      this.isShowUsage = selectedItem.usage > 0; //图片对否显示:false不显示,true显示
    },
   checkSelectedShelves() {
      if (this.selectedShelvesList.length > 0) {
        const selectedShelf = this.selectedShelvesList.filter(
          item =>
            item.shelvesSn === this.ruleForm.shelvesSn &&
            item.shelvesLevel === this.ruleForm.shelvesLevel
        );
        if (selectedShelf.length > 0) {
          this.selectedShelvesList.forEach((elem, idx) => {
            if (
              selectedShelf[0].shelvesLevel === elem.shelvesLevel &&
              selectedShelf[0].shelvesSn === elem.shelvesSn
            ) {
              this.mouseIndex = idx;
              this.isSelectShow = true;
            }
          });
        } else {
          this.mouseIndex = -1;
          this.isSelectShow = false;
        }
      }
    },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-06-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Git
任意路径或者直接在桌面,右键,选择Git Bash Here,即进入Git操作面板
十玖八柒
2022/08/01
1K0
Git
Git 团队协作机制
岳:冲儿,我先把代码推送到远程库,你把代码clone到本地,自己研究一下,有发现推送到远程库,然后我再把远程库的代码拉下来。
用户9615083
2022/12/25
3530
Git 团队协作机制
git 入门教程之协同开发 原
前面我们已经介绍过远程仓库的相关概念,不过那时并没有深入探讨,只是讲解了如何创建远程仓库以及推送最新工作成果到远程仓库,实际上远程仓库对于团队协同开发很重要,不仅仅是团队协同开发的基础,也是代码备份的保障手段,现在我们先简单回忆下相关概念,以便为接下来的协同开发做好铺垫!
雪之梦技术驿站
2019/04/03
9150
git 入门教程之协同开发
                                                                            原
学习Git(二)基本操作
Git 基础操作 1. 创建版本库 什么是版本库呢?版本库又名仓库,英文名 repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被 Git 管理起来,每个文件的修改、删除,Git 都能跟踪,以便任何时刻都可以追踪历史,或者在将来某个时刻可以“还原”。 所以,创建一个版本库非常简单,首先,选择一个合适的地方,创建一个空目录: $ mkdir learngit $ cd learngit $ pwd /Users/learngit pwd命令用于显示当前目录。 如果你使用 Window
小歪
2018/04/04
9510
学习Git(二)基本操作
实习生 Git 不熟练,还没脸去问是种什么体验...
昨儿个我导师给了我个 Git 相关的小任务,不得不说我导师是真的好,他怕我不会还演示了一遍,奈何我只会 git clone。。。 还好他演示的时候把命令都留在终端上了,折腾了半小时我也算学的有模有样吧。 那半小时我坐立不安呐,又不会,又没脸去问,真尴尬。。。
看、未来
2022/05/06
3700
实习生 Git 不熟练,还没脸去问是种什么体验...
使用Git与GitHub协同开发并搭建私有GitLab代码托管服务器
Linus在1991年创建了开源的Linux,从此全世界的工程师参与了Linux的开发,期初Linus是通过手动diff的方式进行代码审核和合并的,后来BitKeeper的东家BitMover公司出于人道主义精神,授权Linux社区免费使用这个版本控制系统。安定团结的大好局面在2005年就被打破了,原因是Linux社区牛人聚集,不免沾染了一些梁山好汉的江湖习气。开发Samba的Andrew试图破解BitKeeper的协议(这么干的其实也不只他一个),被BitMover公司发现了(监控工作做得不错!),于是BitMover公司怒了,要收回Linux社区的免费使用权。Linus花了两周时间自己用C写了一个分布式版本控制系统,这就是Git!一个月之内,Linux系统的源码已经由Git管理了!如果当时BitMover公司专门为Linux发布一个社区版,也许这家公司也就名垂青史了,可是当时这家公司思想境界没那么高而且Linus也那么牛!
星哥玩云
2022/07/24
1.6K0
使用Git与GitHub协同开发并搭建私有GitLab代码托管服务器
Git-添加远程仓库
目前,在GitHub上的这个GitStudy仓库还是空的,GitHub告诉我们,可以从这个仓库克隆出新的仓库,也可以把一个已有的本地仓库与之关联,然后,把本地仓库的内容推送到GitHub仓库。
翎野君
2023/05/12
3410
Git-添加远程仓库
git/github使用完整教程(1)基础
像上面的命令,有很多Linux会友好地告诉你Git没有安装,还会告诉你如何安装Git。
全栈程序员站长
2022/08/20
2860
git/github使用完整教程(1)基础
Git之添加远程库
现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以让其他人通过该仓库来协作,真是一举
兮动人
2021/06/11
5470
Git之添加远程库
开始使用GitHub
同步到远程库 现在我们已经有了一个本地的git管理的项目。git是一个分布式项目管理系统,每一份项目文件中都包含该项目的几乎所有文件,所以其实任何参与项目的人都可以做服务器。现在比较流行的git项目托
mwangblog
2018/07/04
4540
【git#5】远程操作 & 标签管理
我们目前所说的所有内容(工作区,暂存区,版本库等等),都是在本地!也就是在你的笔记本或者计算机上。而我们的 Git 其实是分布式版本控制系统!什么意思呢?
IsLand1314
2025/05/09
1430
【git#5】远程操作 & 标签管理
Git使用
    yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel gcc perl-ExtUtils-MakeMaker
yaohong
2019/09/11
5550
Git使用
Git多仓库作子目录的双向同步:一次Git Subtree的实践
今年1月中旬的时候BZ在GitHub上收到Typecho社区组织typecho-fans的成员邀请,原来是想把所有TP的开源插件都整合到GitHub上进行维护。之前BLOG在使用Typecho的时候写了3个插件:新浪云存储SCS插件、移植自WordPress的音乐播放器插件和新浪微博同步插件,那如果放到typecho-fans上进行维护的话对使用者和开发者来说都是挺方便的。但是当时不知道怎么把之前这3个已经放在GitHub上进行维护的插件仓库作为子目录/仓库同步到typecho-fans的插件仓库中,所以一直都没有行动。
typecodes
2024/03/29
5060
Git多仓库作子目录的双向同步:一次Git Subtree的实践
git的分支远程连接和远程分支的拉取推送及冲突处理
添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了,所以,每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合并,最后,删除该feature分支。
不会飞的小鸟
2020/07/22
2.5K0
git初入门(四):远程仓库操作
申请到了 Git 远程仓库的帐号并创建了一个空的远程仓库现在我们就可以结合本地的仓库与远程仓库一起协同工作了,模拟多人协同开发,这里我们全部使用命令完成。
传说之下的花儿
2023/09/17
5260
git初入门(四):远程仓库操作
git一日速成
通过镜像网站下载git-for-windows Mirror (taobao.org),本教程使用版本为2.17.0.安装过程使用默认选项,在选择path选项时不改变环境变量,只通过git Bash使用即可(如下图)。
半旧518
2022/10/26
6050
git一日速成
git命令学习
git一键三连 git add . git commit -m "commit code" git push 查看本地库状态 git status 添加文件到暂存区 git add <file> 删除暂存区文件 git rm --cached <file> 将暂存区的文件提交到本地库 # "first commit" 提交信息 git commit -m "first commit" <file> 提交本地分支到远程库 git push 仓库别名/仓库地址 分支名 查看历史版本 # 查看历史版本日志 g
shaoshaossm
2022/12/26
3750
git命令学习
运维实用技能--Git常用命令(下部)
现在你有两个选择,一是确实要从版本库中删除该文件,那就用命令git rm删掉,并且git commit:
用户5766185
2019/07/08
8160
运维实用技能--Git常用命令(下部)
一文学会日常操作Git(环境配置、初始化、本地仓库和远程仓库操作和分支操作)
当安装Git后首先要做的事情是设置用户名称和email地址。这是非常重要的,因为每次Git提交都会使用该用户信息。
共饮一杯无
2022/11/28
5280
一文学会日常操作Git(环境配置、初始化、本地仓库和远程仓库操作和分支操作)
将代码传到github公库
Github顾名思义是一个Git版本库的托管服务,是目前全球最大的软件仓库,拥有上百万的开发者用户,也是软件开发和寻找资源的最佳途径 ,Github不仅可以托管各种Git版本仓库,还拥有了更美观的Web界面,您的代码文件可以被任何人克隆 ,使得开发者为开源项贡献代码变得更加容易,当然也可以付费购买私有库,这样高性价比的私有库真的是帮助到了很多团队和企业
星哥玩云
2022/09/15
4980
将代码传到github公库
相关推荐
Git
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档