一、创作来源
1、项目系统功能太多,界面无法展开
2、office风格的ribbon菜单就不错
3、npm中暂无对应的ribbon menu
二、创作思路
1、定义组件对象
a、MainRibbon:主要容器
b、RibbonTabPage:tab面板
c、RibbonGroup:分组面板
d、RibbonLargeImageWithText:图片文字按钮
2、事件
defineEmits:defineEmits 是vue3提供的方法,又称为自定义事件,不需要引入可以直接使用,用于子组件与父组件通信。
EventBus是一个用于在Vue应用程序中实现发布/订阅模式的工具。你可以创建一个全局的Vue实例,作为中央事件总线,然后在任何组件中通过on和emit方法来订阅和发布事件。这种方式适用于非常简单的通信需求,用来解决兄弟组件之间通信问题,但在大型项目中使用时可能会出现难以维护的问题。
3、组件显示
shallowRef是一个函数,用于创建一个基本类型的响应式引用。与ref不同,shallowRef只会对其传入的值进行浅层次的响应式处理。也就是说,如果传入的是对象,则不会对对象内部的属性进行响应式处理。
使用shallowRef可以避免不必要的响应式更新,提高性能。当我们知道某个数据不需要进行深层次的响应式处理时,就可以选择使用shallowRef。
例如,当我们从服务器获取到一个包含大量数据的对象时,我们可能只需要对该对象的某个属性进行响应式处理,而不需要对整个对象进行响应式处理。这时候,使用shallowRef可以更好地满足我们的需求。
4、实现效果
创作不易,有需要请联系作者
好文阅读
发表评论