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