element-puls使用心得

Posted 2023-03-25

参考技术A 1.使用插件unplugin-vue-components来自动按需导入组件很方便，但message等组件使用时需另外导入。

可通过

// main.js 中 

import ElMessage from'element-plus'  

const app=createApp()

app.config.globalProperties.$message = ElMessage 

的方式挂载到全局 property，然后通过：

// component.vue 中

import getCurrentInstance, ref from "vue";

const proxy = getCurrentInstance();

proxy.$message 

的方式调用。相较于官方文档，在组件中import，然后直接调用ElMessage 麻烦一点，但axios，vue-router等这些也都需要全局挂载，然后在组件中通过proxy调用，所以还是一次性全局挂载所有东西方便一些。

2.element-plus icon图标的导入。

将全部icon全局注册后再使用更方便，如下：

import * as ElIconModules from "@element-plus/icons";    // 统一导入el-icon图标

// 利用for/in循环统一注册el-icon图标

for (let iconName in ElIconModules)

  app.component(iconName, ElIconModules[iconName]);  //ps：对象可通过obj[key]的方式取值



3.element-plus tree组件的踩坑

tree组件中根据角色id打开权限列表，data属性和default-checked-keys属性需要每次打开都重新请求，如果data在声明周期函数中只进行一次请求获取，那default-checked-keys只会在第一个打开的角色的权限列表中生效，后面打开的角色权列表均与第一次打开的相同。

sizeToFit()使用心得

sizeToFit()使用心得：

很多的初学者，包括我在内，当初在学习的时候，特别纠结什么时候用这个sizeToFit()。 下面我就来分享一下我的一些使用心得。

一.我们先来看看官方文档对sizeToFit（）的声明：（Swift版本的）

// calls sizeThatFits: with current view bounds and changes bounds size.

// 翻译：调用sizeThatFits方法：参数（与当前视图范围和变化的界限大小）。

   public func sizeToFit() 

// return ‘best‘ size to fit given size. does not actually resize view. Default is return existing view size

// 翻译：返回‘最好‘的大小以适合给定大小。实际上不调整视图。默认值是返回现有的视图大小

  public func sizeThatFits(size: CGSize) -> CGSize

从官方文档中我们可以看出,调用sizeToFit的时候，类似于系统会根据内容的帮我布局一个它认为最合适的大小。

另外sizeToFit()声明在UIView中，所以我们的所有的视图控件，都可以调用这个方法

二.既然所有的控件都可以调用这个方法，但是实际的开发中，我们好像也不经常使用它，来做一些布局什么的？

原因：我们一般在不方便手动布局的时候才调用sizeToFit方法，下面我们就具体的看看哪些场合，不适合手动布局：

1.navigationBar中对navigationItem的设置，（添加两个视图以上的控件到Item）

2. toolBar中的对UIBarButtonItem的设置（一般我们还要添加弹簧控件）

上述两种场合就可以用sizeToFit这个方法，来让系统给我们做自动布局。（注意：如果就添加一个控件的话，我们直接设置fram也是可以的）

3.在tabBar中我们不能手动的添加的子控件，因为tabBar是根据控制器系统默认自动添加的tabBarItem。（猜想系统可能也会自动调用了这个方法）

4.UILabel中添加文字，然后让调整label的大小来适应文字，我们也调用sizeToFit的方法