console
// 创建 Vue 实例
new Vue({
el: '#app',
data: {
showMore: false, // 控制更多按钮下拉菜单的显示
userPermissions: ['button1', 'button3', 'button5', 'button7'], // 用户权限
allButtons: [ // 所有按钮的数据
{ name: 'button1', action: () => { /* 功能1 */ } },
{ name: 'button2', action: () => { /* 功能2 */ } },
{ name: 'button3', action: () => { /* 功能3 */ } },
{ name: 'button4', action: () => { /* 功能4 */ } },
{ name: 'button5', action: () => { /* 功能5 */ } },
{ name: 'button6', action: () => { /* 功能6 */ } },
{ name: 'button7', action: () => { /* 功能7 */ } },
{ name: 'button8', action: () => { /* 功能8 */ } },
],
},
computed: {
toolbarButtons() {
// 根据用户权限计算可见按钮
const visibleButtons = this.allButtons.filter(button => this.userPermissions.includes(button.name));
// 限制工具栏上最多显示 3 个按钮
if (visibleButtons.length > 3) {
return visibleButtons.slice(0, 3);
}
return visibleButtons;
},
moreButtons() {
// 计算剩余的按钮（不在工具栏按钮中的按钮）
return this.allButtons.filter(button => !this.toolbarButtons.includes(button));
},
},
});
<!DOCTYPE html>
<html>
<head>
<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<div class="toolbar">
<button v-for="button in toolbarButtons" :key="button.name" @click="button.action">{{ button.name }}</button>
<button v-if="moreButtons.length > 0" @click="showMore = !showMore">更多</button>
<div v-if="showMore" class="dropdown">
<button v-for="button in moreButtons" :key="button.name" @click="button.action">{{ button.name }}</button>
</div>
</div>
</div>
</body>
</html>