百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

Vue实战073:可输入的下拉框组件功能实现

xsobi 2024-11-26 10:16 1 浏览

我们在开发项目时候经常会遇到这样的需求,提供一个可选择的下拉框,下拉列表中提供了常见的选项。当所提供选项选项无法满足用户需求时用户可以自行输入所需参数。为了满足大部分的用户需求我们可以封装一个通用组件来满足多种需求,当调用的组件的时候配置好参数就可以快速实现所需功能了。

?组件实现的功能:

1,可定义组件宽度,下拉宽度与组件宽度一致;类型number,默认值100;

2,可定义后缀,默认为空;

3,可定义是否只读,默认为false;

4,可定义下拉列表选项,类型数组,默认为空;

5,可定义输入框中值显示位置,分别为居左、居中、居右;分队对应的可输入值为left、center、right,默认居中即center。

6,可定义下拉按钮显示,类型布尔值,默认为true(显示)。

定义模板

这里利用了element中的popover弹出框组件中嵌套下拉列表来实现下拉选项,当选择下拉选项中的值时将该值赋值给input框中的绑定值。而input框主要使用了些动态样式并监听了鼠标获取焦点、键盘输入、键盘删除、鼠标失去焦点等触发事件 ,来实时改变输入框中显示的值。

定义CSS样式

这里我用的是scss预处理器,在修改popover组件样式时我们用到了深度作用选择器::v-deep,具体的可以参考文章Vue实战072:CSS样式中的各种深度作用选择器的使用,这里需要注意的是控制弹出框与input框的宽度一致,在popover组件上添加一个样式获取上级组件的宽度以达到控制弹出窗父级组件的宽度,这样popover中就可以获取到父级组件的宽度,再通过深度作用选择器来定位组件中的DOM元素并进行修改即可。

定义功能逻辑

props中是留给用户调用组件时配置的参数值,前面文章Vue实战071:Element实现WEB颜色选择器功能中有提到过prop传递过来的值都是单向下行绑定,子组件不能修改由父组件传递过来的值。所以这里我们同样定义一个变量来接受父级传递过来的值,然后通过计算属性拼接后缀显示。当选择下拉选项中的值时将该值在复制给变量,同时监听显示值的变化并通过this.$emit将该值传递给父级组件。

组件调用

组件中只有下拉列表必须提供数据的,其他参数都定义了默认值所以可选填。这样用户就可以非常灵活的使用该组件了,也大大提高了组件的可使用范围。这里没看到组件引入是因为我对组件进行了全局自动化注册,可以参考文章Vue实战070:组件的局部注册和全局注册(含自动化注册)功能实现

总结:

以上内容是小编给大家分享的Vue实战073:可输入的下拉框组件功能实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考专栏:Vue实战系列,在此也非常感谢大家对小编的支持!

相关推荐

js向对象中添加元素(对象,数组) js对象里面添加元素

一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...

JS小技巧,如何去重对象数组?(一)

大家好,关于数组对象去重的业务场景,想必大家都遇到过类似的需求吧,这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一:使用.filter()和....

「C/C++」之数组、vector对象和array对象的比较

数组学习过C语言的,对数组应该都不会陌生,于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string,也是一种动态数组。能够在运行阶段设置vector对象的长度,可以在末...

如何用sessionStorage保存对象和数组

背景:在工作中,我将[{},{}]对象数组形式,存储到sessionStorage,然后ta变成了我看不懂的形式,然后我想取之用之,发现不可能了~记录这次深刻的教训。$clickCouponIndex...

JavaScript Array 对象 javascript的array对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0,第二个索引值为1,以此类推。更多有...

JavaScript中的数组Array(对象) js array数组

1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同,数组中可以存储一组有序的数据,-数组中存储的数据我们称其为元素(element)-数组中的每一个元素都有一...

数组和对象方法&数组去重 数组去重的5种方法前端

列举一下JavaScript数组和对象有哪些原生方法?数组:arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组,而是返回一个新数组...

C++ 类如何定义对象数组?初始化数组?linux C++第43讲

对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量,例如int...

ElasticSearch第六篇:复合数据类型-数组,对象

在ElasticSearch中,使用JSON结构来存储数据,一个Key/Value对是JSON的一个字段,而Value可以是基础数据类型,也可以是数组,文档(也叫对象),或文档数组,因此,每个JSON...

第58条:区分数组对象和类数组对象

示例设想有两个不同类的API。第一个是位向量:有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...

八皇后问题解法(Common Lisp实现)

如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢?这个著名的问题可以方便地通过一种树搜索方法来解决。首先,我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中,皇后可以沿...

visual lisp修改颜色的模板函数 怎么更改visual studio的配色

(defunBF-yansemokuai(tuyuanyanse/ss)...

用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀

1、首先请加载lisp程序,加载方法如下:在菜单栏选择工具——加载应用程序——添加,选择lisp程序然后加载,然后选择添加到启动组。2、然后是添加自定义栏以及图标,方法如下(以...

图的深度优先搜索和广度优先搜索(Common Lisp实现)

为了便于描述,本文中的图指的是下图所示的无向图。搜索指:搜索从S到F的一条路径。若存在,则以表的形式返回路径;若不存在,则返回nil。...

两个有助于理解Common Lisp宏的例子

在Lisp中,函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数;甚至可以和另一个Lisp函数组成一个整体,并加以利用。Lisp的宏,是实现上述特色的...