您现在的位置是:首页 > 正文

基于Element UI的Select控件实现多选框中单行显示&左右移动

2024-02-29 15:17:52阅读 0

控件主要功能,可以单行显示多选的tag,并且可以利用左右键移动tag在组件中的位置

直接上代码:

<el-select
			v-model="tags"
			ref="tagsSelect"
			multiple
			filterable
			remote
			clearable
			popper-class="tag-input-options"
			:remote-method="searchTags"
			:loading="isSearching"
			class="tag-input"
			@keyup.native.left="navLeft"
			@keyup.native.right="navRight">
			<el-option
				v-for="item in tagOptions"
				:key="item.id"
				:label="item.full_path.map(f => f.name).join('  >  ')"
				:value="item.id">
				<span class="tag-option" v-html="highlightTagOption(item.name)"></span>
			</el-option>
  		</el-select>

下面是处理逻辑,主要是navLeft以及navRight方法的实现(typescript):

主要思路就是改变left,控制tag在select中的位移

const TAGS_SELECTOR = '.tag-input .el-select__tags';
const TAG_SELECTOR = '.tag-input .el-select__tags .el-tag';

private navLeft() {

		let $hitTagDoms = $(TAG_SELECTOR + '.is-hit');
		if (!$hitTagDoms.length) {
			$(TAG_SELECTOR).last().addClass('is-hit');
			return;
		} else if ($hitTagDoms.is($(TAG_SELECTOR).first())) {
			$(TAG_SELECTOR).removeClass('is-hit');
			$(TAG_SELECTOR).last().addClass('is-hit');
			$(TAGS_SELECTOR).css('left', '11px');
			return;
		}

		let $lastTagDom = $hitTagDoms.hasClass('is-hit') ? $hitTagDoms.prev() : $hitTagDoms;
		$(TAG_SELECTOR).removeClass('is-hit');
		$lastTagDom.addClass('is-hit');

		let firstTagRect = $(TAG_SELECTOR).get(0).getBoundingClientRect() as DOMRect;
		let containerTagRect = $('.tag-input').get(0).getBoundingClientRect() as DOMRect;
		
		let left = Number.parseFloat($(TAGS_SELECTOR).css('left'));
		left = Number.isNaN(left) ? 0 : left;
		let totalLeft = left + ($lastTagDom.innerWidth() as number);

		if (totalLeft >= containerTagRect.x - firstTagRect.x + 11) { // 11 is padding left of tags
			totalLeft = left + containerTagRect.x - firstTagRect.x + 11;
		}
		
		$(TAGS_SELECTOR).css('left', totalLeft + 'px');
	}
private navRight() {

		let $lastHitTagDoms = $(TAG_SELECTOR + '.is-hit');
		if (!$lastHitTagDoms.length || $lastHitTagDoms.is($(TAG_SELECTOR).last())) { return; }

		$(TAG_SELECTOR).removeClass('is-hit');
		let $hitTagDoms = $lastHitTagDoms.next();
		$hitTagDoms.addClass('is-hit');

		let hitTagRect = $hitTagDoms.get(0).getBoundingClientRect() as DOMRect;
		let containerTagRect = $('.tag-input').get(0).getBoundingClientRect() as DOMRect;

		if (hitTagRect.right + 56 > containerTagRect.right) { // 56 is width of search button
			let left = Number.parseFloat($(TAGS_SELECTOR).css('left'));
			left = Number.isNaN(left) ? 0 : left;
			let totalLeft = left - ($hitTagDoms.innerWidth() as number);
			if ($hitTagDoms.is($(TAG_SELECTOR).last())) { // assure input showing
				totalLeft = 0;
			}
			$(TAGS_SELECTOR).css('left', totalLeft + 'px');
		}
	}

为了不让select控件多选换行,需要覆盖一下相关的css:

.tag-input {
		width: 645px;
		overflow-x:hidden;

		.el-select__tags {
			flex-wrap: nowrap;
			justify-content: flex-end;
			transition: left .5s;
        }
}

上面这样实现方式还有几个问题:

1)左右键会影响select中的input光标位置

2)在下拉框显示的时候,删除tag,会造成下拉框的位置偏移

3)把tag滑到最开始的时候,从前往后删除tag,会造成空白,因为没有调整left值

可以提供解决的思路:

1)可以不用left,right键控制移动tag,换成其他键

2)在删除的时候,手工隐藏下拉框,在输入搜索的时候在显示出来

3)在删除的时候,调整left值

private renderingTag() {
		let $firstTagDom = $(TAG_SELECTOR + ':first-child');
		if ($firstTagDom.length) {
			let firstTagRect = $firstTagDom.get(0).getBoundingClientRect() as DOMRect;
			let containerTagRect = $('.tag-input').get(0).getBoundingClientRect() as DOMRect;

			if (firstTagRect.left > containerTagRect.left + 11) { // 11 is margin left
				let left = Number.parseFloat($(TAGS_SELECTOR).css('left'));
				left = Number.isNaN(left) ? 0 : left;
				left -= (firstTagRect.left - containerTagRect.left - 11);
				$(TAGS_SELECTOR).css('left', left + 'px');
			}
		}
	}

 

下面看下效果图:

网站文章

  • 枚举类中获取枚举值的几种方法 热门推荐

    在开发的过程中我们经常会定义枚举类,枚举类中获取枚举值的方式也有很多种,下面我们就探究一下大家常用的几种方式: 枚举类 public enum TestEnum { ONE(1,&quot;one&q...

    2024-02-29 15:17:45
  • vulnhub THE PLANETS: EARTH渗透笔记

    vulnhub THE PLANETS: EARTH渗透笔记

    靶机下载地址:https://www.vulnhub.com/entry/the-planets-earth,755/#downloadkali ip地址。

    2024-02-29 15:17:36
  • 七、SpringCloud实用篇_Nacos配置管理

    七、SpringCloud实用篇_Nacos配置管理

    一、Nacos配置管理 nacos除了可以做注册中心,同样可以做配置管理来使用。 1.1、统一配置管理 当微服务部署的实例越来越多,达到数十、数百时,逐个修改微服务配置就会让人抓狂,而且很容易出错。我...

    2024-02-29 15:17:03
  • var let const

    let使用let关键字声明的变量具有块级作用域,可以防止循环变量变成全局变量使用let关键字声明的变量不存在变量提升使用let关键字声明的变量具有暂时性死区const使用const关键字声明的常量,具...

    2024-02-29 15:16:56
  • python爬虫-urllib-handler和代理

    有了handler就能用代理了。

    2024-02-29 15:16:50
  • springboot-邮件发送

    导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifact...

    2024-02-29 15:16:22
  • java 正则表达式备忘笔记

    java中的正则表达式主要有两个作用,一个是判断字符串是否匹配正则表达式,另一个是通过正则表达式来截取字符串中的一部分。判断是否匹配指定表达式的语法 String str = "33as"; St...

    2024-02-29 15:16:13
  • css 文字颜色渐变

    background: linear-gradient(90deg, #F8BA02 0%, #FFFFFF 100%);-webkit-background-clip: text;color: transparent;把这几行代码放在要设置的文字的css上即可

    2024-02-29 15:16:05
  • 框架——JavaEE(J2EE)相关

    框架——JavaEE(J2EE)相关

    1、什么是JavaEE? Java EE,Java 平台企业版(Java Platform Enterprise Edition),之前称为Java 2 Platform, Enterprise Ed...

    2024-02-29 15:15:36
  • message: ‘Error: 请检查 project.config.json 是否存在及是否有效 (code 19)Error: 请检查 project.config.json 是否存在及是否有效

    message: ‘Error: 请检查 project.config.json 是否存在及是否有效 (code 19)Error: 请检查 project.config.json 是否存在及是否有效

    D:\\\微信web开发者工具\\cli.bat auto --project --auto-port 9420。/cli --project --auto -port 9420。解决方案:原因是路径带有中文、空格,更换英文路径即可。在pycharm中运行微信开发者工具命令。windows10运行时出现错误。

    2024-02-29 15:15:29