Vue ElementUI el-dropdown 添加选中icon效果
直接上效果:注意 el-dropdown 是动态生成,在开发者工具里可以看到渲染完后的 Dom 其实是 一个 ul:注意el-dropdown-item 中的group 是自定义属性,用于分组显示。代码第 5/6 和 7/8行是有无 icon 的区别,根据 group 属性值做分组显示。<!--下拉列表--><el-dropdown class="dropdown-btn" @c
·
直接上效果:
注意 el-dropdown 是动态生成,在开发者工具里可以看到渲染完后的 Dom 其实是 一个 ul :
注意 el-dropdown-item 中的 group 是自定义属性,用于分组显示。
代码第 5/6 和 7/8 行是有无 icon 的区别,根据 group 属性值做分组显示。
<!--下拉列表 -->
<el-dropdown class="dropdown-btn" @command="onCommand" :hide-on-click="false">
<span class="el-dropdown-link">...</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item group="02" v-show="groupId=='02'" command="morning">上午</el-dropdown-item>
<el-dropdown-item group="01" v-show="groupId=='01'" command="morning" icon="custom-icon el-icon-check" >上午</el-dropdown-item>
<el-dropdown-item group="01" v-show="groupId=='01'" command="afternoon" >下午</el-dropdown-item>
<el-dropdown-item group="02" v-show="groupId=='02'" command="afternoon" icon="custom-icon el-icon-check">下午</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
使用 command 指令事件做显示切换:
onCommand(command) {
// 是否选中上午
let isMorning = command === 'morning' ? true : false;
// 当前点击的 下拉菜单 item 对象,注意是 arguments 第二个参数
let dropItem = arguments[1];
// 获取菜单的HTML id,其实就是 ul 的 id
let menuId = dropItem.$parent.$el.id
// 获取 li 列表
let menuList = document.getElementById(menuId).getElementsByTagName('li');
menuList.forEach(li => {
// group 是自定义属性
let group = li.getAttribute('group');
// 是“上午”且group=01,或 是“下午”且group=02 时显示 li
if((isMorning && group === '01' || (!isMorning && group === '02'))) {
li.style.display = ''
}
else {
li.style.display = 'none'
}
});
}
完整代码,这是一个 vue 文件
<template>
<div class="dropdown-main">
<!--下拉列表 -->
<el-dropdown class="dropdown-btn" @command="onCommand" :hide-on-click="false">
<span class="el-dropdown-link">...</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item group="02" v-show="groupId=='02'" command="morning">上午</el-dropdown-item>
<el-dropdown-item group="01" v-show="groupId=='01'" command="morning" icon="custom-icon el-icon-check" >上午</el-dropdown-item>
<el-dropdown-item group="01" v-show="groupId=='01'" command="afternoon" >下午</el-dropdown-item>
<el-dropdown-item group="02" v-show="groupId=='02'" command="afternoon" icon="custom-icon el-icon-check">下午</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
data() {
return {
groupId: '01'
}
},
methods: {
onCommand(command) {
// 是否选中上午
let isMorning = command === 'morning' ? true : false;
// 当前点击的 下拉菜单 item 对象,注意是 arguments 第二个参数
let dropItem = arguments[1];
// 获取菜单的HTML id,其实就是 ul 的 id
let menuId = dropItem.$parent.$el.id
// 获取 li 列表
let menuList = document.getElementById(menuId).getElementsByTagName('li');
menuList.forEach(li => {
// group 是自定义属性
let group = li.getAttribute('group');
// 是“上午”且group=01,或 是“下午”且group=02 时显示 li
if((isMorning && group === '01' || (!isMorning && group === '02'))) {
li.style.display = ''
}
else {
li.style.display = 'none'
}
});
}
}
}
</script>
<style lang="stylus" scoped>
.el-dropdown-link {
cursor pointer
}
.dropdown-main {
padding: 40px;
}
</style>
<style lang="stylus">
.custom-icon {
float:right;
margin-top: 10px;
}
.el-dropdown-menu__item {// 其实就是 li
width:80px;
padding: 0 15px;
}
</style>
更多推荐
已为社区贡献33条内容
所有评论(0)