Vue3 按钮根据屏幕宽度展示折叠按钮

文章目录

一、组件封装
二、使用
三、最终效果(参考)
四、参考

一、组件封装

ButtonFold.vue

1、获取父组件的元素，根据元素创建动态插槽
2、插槽中插入父元素标签。默认效果和初始状态相同。
3、当屏幕宽度缩小时，部分按钮通过 dropdown 的方式展示出来，doropdown 默认按钮使用 ... 图标
4、firstHideBtnIndex 边界值可自定义

<!-- 按钮折叠组件 -->
<template><template v-for="(item, index) in btns"><slot v-if="isShowBtn(index)" :name="`slot${index}`"></slot></template><a-dropdown :trigger="['click']" v-if="isShowMoreBtns()"><a-button type="text"><EllipsisOutlined /></a-button><template #overlay><a-menu><template v-for="(item, index) in btns" :key="index" ><a-menu-item class="ant-pro-drop-down menu"v-if="index >= Number(firstHideBtnIndex)"><slot :name="`slot${index}`"></slot></a-menu-item></template></a-menu></template></a-dropdown>
</template><script lang="ts" setup>
import { throttle } from 'lodash-es';
import {EllipsisOutlined,
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';const slots = useSlots();
const router = useRouter();const btns = computed(() => slots.default?.());const firstHideBtnIndex = ref<number>(Number(btns.value?.length));btns.value?.forEach((x: any, i: number) => {Object.assign(slots, { [`slot${i}`]: () => ([x]) });
});const isShowBtn = (i: number) => {return i < Number(firstHideBtnIndex.value);
};const isShowMoreBtns = () => {return Number(firstHideBtnIndex.value) < Number(btns.value?.length);
};const foldResiez = throttle((e: any) => {setFirstBtnIndex();
}, 400);const setFirstBtnIndex = () => {if (document.body.scrollWidth < 1300 ) {firstHideBtnIndex.value = 4;} else {firstHideBtnIndex.value = Number(btns.value?.length);}
};onBeforeUpdate(() => {btns.value?.forEach((x: any, i: number) => {Object.assign(slots, { [`slot${i}`]: () => ([x]) });});setFirstBtnIndex();
});onMounted(() => {window.addEventListener('resize', foldResiez, false);
});onBeforeUnmount(() => {window.removeEventListener('resize', foldResiez, false);
});
</script><style scoped lang="scss"></style>

二、使用

当按钮较多时，在按钮外部使用 ButtonFold 组件包裹。
屏幕宽度变化在 ButtonFold 中监测

import ButtonFold from './ButtonFold.vue';<button-fold><button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>8</button>
</button-fold>