Plugin Light

Appearance

1. 开始 ​

element-ui 组件库升级为 element-plus，记录下差异。

2. el-dialog 组件​ ​

2.1. 是否显示 ​

  • Element-UI​​ 使用 :visible.sync 进行双向绑定
  • Element-Plus​​ 改用 v-model 或 :model-value
diff
<el-dialog
-  :visible.sync="dialogVisible"
+  v-model="dialogVisible"
>
</el-dialog>

2.2. padding ​

element-plus 中 el-dialog 中默认有 padding，去除方法：

css
.el-dialog {
  --el-dialog-padding-primary: 0;
}

2.3. footer ​

用 footer 插槽，才有 .el-dialog__footer 元素，之前写的样式才能生效。

diff
<el-dialog>
-  <div slot="footer">
-  </div>
+  <template #footer>
+    <!-- 这里的内容会渲染到 .el-dialog__footer -->
+  </template>
</el-dialog>

2.4. custom-class ​

custom-class 已废弃，直接使用 class。

3.el-table ​

3.1 el-table 插槽语法​ ​

  • Element-UI​​ 使用 slot-scope
  • Element-Plus​​ 改用 #default
diff
<template
-  slot-scope="scope"
+  #default="scope"
>

</template>

###3.2 el-table没有has_gutter类名

diff
- .has-gutter
+ .el-table__header thead

4. el-icon 使用方式​ ​

  • ​​Element-UI​​ 使用 class 引入图标
  • Element-Plus​​ 改用 <el-icon> 组件
diff
-  <i class="el-icon-edit"></i>
+  <el-icon><Edit /></el-icon>

业务中常用的有：

之前：

ts
<i
  class="el-icon-plus"
/>
ts
import { Plus as ElIconPlus } from '@element-plus/icons-vue';

现在：

html
<el-icon>
  <ElIconPlus />
</el-icon>

5. el-select ​

element-plus 中 el-select 边框去除方法

css
:root .el-select {
  --el-select-width: 184px;

  &__wrapper,
  &__wrapper.is-hovering,
  &__wrapper.is-focused {
    box-shadow: none;
  }
}

6. el-checkbox ​

1、element-ui 中的 checkbox 没有默认高度，element-plus 中的 .el-checkbox 有默认高度为 32px。

这一点会对后面绝对定位的图标产生影响。

2、label 作为 value 来使用已经被 废弃, 建议label 只用来表示展示的文字 3、true-label、false-label、controls 已被废弃

diff
.icon-question {
-  top: 4px;
+  top: 9px;
}

<el-checkbox
-  label="测试"
-  true-label=1
-  false-label=2
-  controls="1"
>
</el-checkbox>

7. el-button ​

type="text" 已被废弃，可替换成 link & type="primary"。

diff
<el-button
-  type="text"
+  link
+  type="primary"
>
  button
</el-button>

参考：button

##8.el-upload

element-ui 上传图片时是通过判断是否传入:on-preview去显隐预览按钮，element-plus则会默认显示预览按钮，如果想隐藏可以使用css将其去除

diff
<el-upload
+  class="el-upload"
>
</el-upload>

.el-upload{
  :deep(){
    .el-upload-list__item-actions{
      &:hover{
        span{
          margin: 0;
        }
        .el-upload-list__item-preview{
          display: none;
        }
      }
    }
  }
}

9.el-radio ​

label 作为 value 来使用已经被 废弃, 建议label 只用来表示展示的文字

diff
<el-radio
  label="标签"
+ value="1"
>
</el-radio>

10.el-input ​

1、label 属性废弃 2、v-model不支持修饰符

diff
<el-input
-  label="标签"
-  v-model.numer="1"
>
</el-input>

11.其他 ​

11.1样式问题 ​

elementPlus大量使用css变量去控制样式，如果需要改具体样式需要去修改对应的css变量，而不是像elementui去改具体的css属性