vue 自己实现简单的 element select下拉框

使用vue实现简单的select下拉选择

看看效果

下面看看代码如何实现：

1.代码结构：

index.js文件  注册全局组件

TySelect.vue文件 

样式代码：

参数说明

1.父组件传递给子组件的参数

optiions 格式为数组默认为空的

width可动态设置ty-select的宽度 默认值为空; 默认值可设置为300px;

loading 加载数据是的状态

tyMultiple 是否可以多选 默认false 

valueType 为true是选中的值为当前数据的整条数据都传递给父组件，如果为false的话 传递当前选中数据的id  默认为false

watch: {} 监听options数据

发生变化的时候判断是多选还是单选，单选不作处理，多选的话在原来数据的基础上添加selectFlag字段 （用来判断是否选中）

openSelect 方法触发时 

this.$emit('visible-change'， this.options.length === 0 ? this.selectFlag : false) 这里调用父组件方法是用来获取下拉列表的数据，这里的参数进行判断，下拉列表内有数据了就返回false不需要在进行获取，列表为空的话返回下拉列表的开关，开为true获取数据，关闭为false不获取数据。这里我没做滚动加载，如果有滚动加载的话就得另行处理了。

document.addEventListener('click', this.handleSelectShow) 添加事件监听 点击下拉列表以外的区域关闭下拉列表 这里我参考的这篇文章 搜了很多自己也试了半天才好了 

https://blog.csdn.net/xingyu_qie/article/details/78831045（评论里的有说的不错的）

https://download.csdn.net/download/zhangchao19890805/9855750

下面是点击选中的时候的判断

首先是判断 this.tyMultiple 是否支持多选   如果是多选的传递出去的值就是数组格式的  否则就是单个数据

多选框的代码  checked是否选中这里判断有点套的多   首先判断是否多选，不是多选直接返回选中的id，如果是多选的那么返回选中的对象的id，一开始对象时空的不存在id 所以这里要判断选中对象为真的时候才返回checkId.id 否则返回‘’

 

选中的值处理这单选的就直接赋值给对象传递出去， 多选就要操作数组，如果已经选择过了就从数组中摘除出去，否则添加进去。

 

这是使用时的代码  handleChange当点击确定选中的值的时候触发

                               visible-change 这里是当打开下拉的时候触发的方法  获取远程的数据然后传递给子组件。获取数据的时候传递给子组件的loading为true 显示loading  获取完毕为false 显示数据

我们这个选中的值是在别的地方展示的 所以这里我直接用的label放了个插槽     标签没有使用input  如果要使用input的话 label这里的插槽切换成input使用   我们这里也是必须点击确定按钮触发选中后的值的  不是选中数据后直接触发   所以要使用的话也得改造下  不难

知识积累，有不足的地方希望各位评论中指出来改进