vue实现简单的 element select下拉框 vue封装简单的下拉选择 vue下拉选择 vue select组件

it2022-05-05 87

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

看看效果

下面看看代码如何实现：

1.代码结构：

index.js文件注册全局组件

TySelect.vue文件

<template> <div class="ty-select" :style="{width:width}"> <div class="select-type" @click="openSelect"> <slot class="select-name" name="selectType"></slot> <label class="down-icon" :class={active:selectFlag}></label> </div> <div class="selectLists" :class="{active:selectFlag}" v-loading="loading"> <ul v-if="tyMultiple"> <li v-for="(v, i) in newOptions" :key="i" @click.stop="selectValue(v)"> <input class="checkbox" type="checkbox" :checked="v.selectFlag" @click.stop="selectValue(v)"> <p>{{v.name}}</p> </li> </ul> <ul v-else> <li v-for="(v, i) in newOptions" :key="i" @click.stop="selectValue(v)"> <input class="checkbox" type="radio" name="group" :checked="checkTag === null ? false : (checkTag.id === v.id ? true : false)" @click.stop="selectValue(v)"> <p>{{v.name}}</p> </li> </ul> <div class="enter"> <button @click="enter">确定</button> </div> </div> </div> </template> <script> export default { props: { options: { type: Array, default: () => [] }, width: { type: String, default: () => '300px' }, loading: { type: Boolean, default: () => false }, tyMultiple: { type: Boolean, default: () => false }, valueType: { // 为true是选中的值为当前数据的整条数据都传递给父组件，如果为false的话传递当前选中数据的id type: Boolean, default: () => false } }, watch: { options (val, oldVal) { this.newOptions = this.tyMultiple ? val.map(v => ({...v, selectFlag: false})) : val } }, data () { return { selectFlag: false, checkTag: null, checkTags: [], newOptions: [] } }, mounted () {}, methods: { // 打开下拉列表自组件传递事件调用父组件内的方法拿到下拉列表的数据 openSelect () { this.selectFlag = !this.selectFlag this.$emit('visible-change', this.options.length === 0 ? this.selectFlag : false) // 添加事件监听监听点击下拉框外的区域时关闭下拉 document.addEventListener('click', this.handleSelectShow) }, // 当点击区域外的地方时下拉列表隐藏 handleSelectShow (e) { if (this.$el.contains(e.target)) return false this.selectFlag = false this.checkTags = [] this.checkTag = null this.selectMultipe() document.removeEventListener('click', this.handleSelectShow) }, // 点击选中的值 selectValue (v) { // 多选 if (this.tyMultiple) { const newTags = this.checkTags.filter(item => item.id !== v.id) // 如果选中值在checkTags中，则去掉该值，等于是取消选择 if (newTags.length === this.checkTags.length) { this.checkTags.push(v) } else { this.checkTags = newTags } this.selectMultipe(v) return false } // 单选 this.checkTag = v }, // 点击确定按钮传递所选值给父组件关闭下拉框清除掉所选的数据 enter () { this.$emit('handleChange', this.tyMultiple ? this.checkTags : this.checkTag) this.checkTags = [] this.checkTag = null this.selectMultipe() this.selectFlag = false }, // 是否显示选中多选的时候函数处理 selectMultipe (v) { if (this.checkTags.length === 0) { this.newOptions.forEach(item => { item.selectFlag = false}) return false } this.checkTags.forEach(item => { if (item.id === v.id) { v.selectFlag = true } else { v.selectFlag = false } }) } } } </script>

样式代码：

参数说明

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 否则返回‘’

// 点击选中的值 selectValue (v) { // 多选 if (this.tyMultiple) { const newTags = this.checkTags.filter(item => item.id !== v.id) // 如果选中值在checkTags中，则去掉该值，等于是取消选择 if (newTags.length === this.checkTags.length) { this.checkTags.push(v) } else { this.checkTags = newTags } this.selectMultipe(v) return false } // 单选 this.checkTag = v },

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

<ty-select @handleChange="handleChange" @visible-change="getMusicTags($event, 1)" :options="emotions" width="100px" :loading="selectLoading" :tyMultiple="true"> <label slot="selectType">情绪</label> </ty-select>

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

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

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

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

专利

最新回复(0)