引言:
在现代的用户界面设计中,特别是在管理和数据展示类应用中,经常会遇到操作按钮过多而导致界面显得拥挤的情况。为了提升用户体验和界面的可操作性,开发了MoreButtons组件。这个组件专为解决操作列按钮过多的问题而设计,它能够有效地管理和展示大量按钮,并在超出指定数量时将多余的按钮收纳进一个更多选项的下拉菜单中。这样一来,不仅能够简化界面布局,还能保持界面的整洁和可读性,使用户能够更轻松地进行操作和导航。
组件配置:
属性名类型默认值描述reverseBooleanfalse是否反转更多按钮的图标显示showNumNumber0最多显示的按钮数量triggerString"click"触发下拉菜单展示的方式,可选值包括 "click" 和 "hover"插槽:
组件源码:
export default {
name: "MoreButtons",
props: {
reverse: {
// 图标是否反转
type: Boolean,
default: false,
},
showNum: {
type: Number,
default: 0,
},
trigger: {
type: String,
default: "click",
},
},
data() {
return {};
},
methods: {
renderMoreButton(list = [], appendDom) {
return (
{list
.filter((item) => item.tag)
.map((item) => {
// 转换为文本形式
item.componentOptions.propsData.type = "text";
// 移除text为空的按钮
return (
class={[ item.componentOptions.children[0] && item.componentOptions.children[0].text === "" ? "hidden" : "", ]} > {[item]}
);
})}
{appendDom}
);
},
},
render() {
const buttonList = this.$slots.default || [];
const appendDom = this.$slots.append || [];
const trigger = this.trigger;
if (buttonList.length === 0 && !appendDom) {
// 兼容插槽内容
return
;}
const baseButtons = buttonList.slice(0, this.showNum);
const moreButtons = buttonList.slice(this.showNum);
return (
);
},
};
.c-more-button {
display: inline-block;
margin-left: 10px;
&.is-reverse {
::v-deep .el-icon-more {
transform: rotate(90deg);
}
}
}
::v-deep .el-dropdown-menu {
&__item {
.el-button--text {
width: 100%;
font-size: 14px;
}
&.hidden {
display: none;
}
}
}
组件使用示例:
template>
import MoreButtons from './MoreButtons.vue';
export default {
components: {
MoreButtons
}
}