layout 自定义问题

[InfernalAzazel]

1. layout 的收缩展开的可以自定义图标?
2. tabs 可以自定义样式吗？

已经使用 pro 开发 4个项目 开源2个，主要还是想皮肤定义好看一些....
现在想弄第三个开源项目 admin 要好看些，作为主要模板。

[tolking]

1. 可以增加一个插槽
2. 自己改样式或者自己封装

组件库中绝大部分的代码都有导出，可以任意引用需要代码

[InfernalAzazel]

1. 暂时的解决方法

  const targetElement = document.querySelector('.header-fold-btn');

  // 删除目标元素下的所有子元素
  while (targetElement!.firstChild) {
    targetElement!.firstChild.remove();
  }

  // 创建 <img> 元素
  const imgElement = document.createElement('img');
  imgElement.src = 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg'; // 设置非活跃时的图标路径

  // 创建一个 MutationObserver 实例
  const observer = new MutationObserver(() => {
    const isActive = targetElement!.classList.contains('is-active');

    if (isActive) {
      imgElement.src = 'https://cosmoscatts-frais.netlify.app/assets/logo-a8796777.svg';
      console.log('active')
    } else {
      imgElement.src = 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg'; // 设置非活跃时的图标路径
      console.log('no active')
    }
  });

  // 配置 MutationObserver 监听的选项
  const observerOptions = {
    attributes: true,  // 监听属性变化
    attributeFilter: ['class'],  // 监听 class 属性
  };

  // 启动 MutationObserver
  observer.observe(targetElement!, observerOptions);
  // 将 <img> 元素添加到目标元素中
  targetElement!.appendChild(imgElement);

效果:

2. 自己封装，可以给一个例子吗？简单的例子就行了，前端不是很熟悉。

[tolking]

ProLayout 的源码就是例子啊

[InfernalAzazel]

如果写 vue ts 是武侠范畴那么 源码封装就是仙侠，在下不才只能看看 css 怎么改了，或许那天突破到玄幻位面在搞搞看。

[InfernalAzazel]

我看能不能改造成类是这样的，感觉很美！

[InfernalAzazel]

ProLayout 的源码就是例子啊

[tolking]

新版本增加了 ProLayout ProTabs 的插槽，应该可以满足你的自定义需求

[InfernalAzazel]

厉害，我现在试试看！