RuoYi框架中使用lib-flexible排除treeselect组件适配

RuoYi框架中使用lib-flexible排除treeselect组件适配

在使用RuoYi框架时，我们可以利用lib-flexible.js来实现页面自适应。但是，有些组件，例如treeselect组件，可能不需要进行lib-flexible的适配。这时，我们可以通过判断组件名称来排除适配，使页面更加灵活。

具体步骤

1. 在 index.html 文件中引入 lib-flexible.js 和设置 rem 基准值的代码。

2. 在判断是否为treeselect组件的代码块中，添加排除条件。

//判断是否为treeselect组件，排除适配
if (!/^treeselect-/.test(name)) {
  el.setAttribute('data-dpr', dpr);
  el.setAttribute('data-font-size', initFontSize);
  doc.documentElement.style.fontSize = initFontSize + 'px';
  flexible.refreshRem();
}

其中，/^treeselect-/.test(name) 表示判断 name 属性是否以 treeselect- 开头，如果是则不进行适配。需要注意的是，这里的 name 属性指的是自定义组件的名称，而不是标签名。

代码解析

• /^treeselect-/.test(name)：正则表达式，用于匹配以 treeselect- 开头的字符串，如果匹配成功，则返回 true，否则返回 false。
• name：自定义组件的名称，可以通过组件的属性或其他方式获取。

总结

通过以上步骤，就可以在RuoYi框架中排除treeselect组件的lib-flexible适配了，从而提高页面渲染效率，改善用户体验。