如果有一系列的页面布局很类似，为了节省时间，我们可以把这些类似的页面所通用的属性和方法抽离成一个BaseView，让其它页面继承该基础页面，同时将一些经常改变的属性和差异的属性写到配置文件里。例如树容器初始时是否展开、某些图表是否显示等都可以写到配置文件里面。本文将带你实现该功能，抽离出BaseView页面组件，鉴于json文件无法写注释的情况，配置文件采取yml的格式

层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式，层叠性主要解决样式冲突的问题。那么,css是如何处理的呢

文本溢出隐藏是常见的需求，如果把需求升级为超出指定的几行隐藏呢，常见的作法是

.ellipsis-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制文本显示为3行 */
  overflow: hidden;
}

但是这种css方案有浏览器兼容性问题，火狐不支持。这种时候不得不使用javascript来实现,我们将实现一个Vue组件，需求如下:

1. 组件接收 title属性或slot内容，表示标题，如果没有则不显示标题。
2. 组件接收 maxHeight 属性，表示文本最多显示多少行，默认3行，超出则隐藏。
3. 鼠标悬浮tooltip 提示，鼠标移入时显示全部
4. 组件接收 ellipsis 属性，表示文本超出时显示的省略号，默认"..."。
5. 组件接收 showMore 属性(下拉或收起的图标)，表示是否显示“显示全部”按钮，默认显示。下拉或收起时要有动画过度。
6. 适配移动端，手机屏幕宽度小于768px时，隐藏标题。
7. 兼容主流浏览器，IE9+、Chrome、Firefox、Safari、Opera。
8. 适配不同的字体，使用不同的font-family，maxHeight不受影响
9. 使用ts setup 语法

在iframe嵌套的业务中，如果父页面需要向子页面发送消息，通过传统的iframe.contentWindow.postMessage和window.addEventListener('message',(data) => {})的方式，有时候会出现父页面发送了消息，但是子页面没有收到消息的情况，这一般是由于子页面加载并创建message监听的时机出现了延误。在这里我们通过发布订阅的方案来解决它。

Vue 3 的 customRef API 允许创建自定义 ref，提供对依赖项跟踪和更新的显式控制。它可以用于实现防抖、节流、自定义计算属性及性能优化。customRef 与 ref 的主要区别在于定制化程度，ref 更适合常规场景，而 customRef 提供更细粒度的控制。customRef 应用场景包括在获取和设置值时执行额外操作，例如与本地存储交互或实现防抖功能。本文利用customRef实现全局loading效果