基于elementUI下拉菜单项el-dropdown自定义封装
<template>
<div>
<el-dropdown trigger="click" @command="handleCommand">
<el-input v-model="form.key1" suffix-icon="el-icon-arrow-down" placeholder="请选择"></el-input>
<el-dropdown-menu slot="dropdown">
<el-input v-model="form.key2" suffix-icon="el-icon-search" placeholder="搜索语言"></el-input>
<div class="group-content">
<vue-scroll :ops="ops" ref="groupRef">
<div class="group-list">
<div v-for="item in languages" :key="item.title">
<div ref="titleRef">{{ item.title }}</div>
<el-dropdown-item
v-for="(item, index) in 10"
:key="`${index}+${item.title}`"
class="sort-item"
:command="index"
>
<span>中文</span>
</el-dropdown-item>
</div>
</div>
</vue-scroll>
<div class="key-list">
<div v-for="item in keyList" :key="item" @click="goIndex(item)">
{{ item }}
</div>
</div>
</div>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
data() {
return {
form:{
key1:'',
key2:''
},
keyList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
languages:[
{
title:'A',
},
{
title:'B',
},
{
title:'C',
},
{
title:'D',
},
],
//滚动条定义配置项
ops: {
vuescroll: {},
scrollPanel: {
scrollingX: false,//关闭横向滚动
},
rail: {
keepShow: true,
},
bar: {
hoverStyle: true,
onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
background: "#efefef", //滚动条颜色
opacity: 0.8, //滚动条透明度
},
},
}
},
methods:{
goIndex(key){
const groupRef=this.$refs.groupRef.$children[0].$el
const titleRef=this.$refs.titleRef
titleRef.forEach(item=>{
if(item.innerText===key){
groupRef.scrollTo({
top:item.offsetTop,
behavior:'smooth'
})
}
})
},
handleCommand(key){
console.log(key)
this.form.key1='中文'
}
}
}
</script>
<style scoped lang="scss">
/* 设置选项样式 */
/* 设置弹出框的宽高 */
/deep/ .el-dropdown-menu {
width: 800px;
// height: 400px;
padding: 10px;
.sort-item {
display: inline-block;
width: 100px;
padding: 0 15px;
margin: 10px 15px 2px 0;
line-height: 32px;
font-size: 14px;
color: #333333;
text-align: center;
cursor: pointer;
}
.group-content{
position: relative;
height:420px;
margin-top: 20px;
.group-list{
height: 400px;
padding-right: 20px;
}
.key-list{
position: absolute;
right: 25px;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #999;
div{
text-align: center;
cursor: pointer;
}
}
}
}
</style>
实现效果：
