Element-plus 与Element 2.x的差异-部分

一、 组件里插槽的书写变化：

组件	Element-plus	Element 2.x	备注
input 插槽	#append	slot="append"	插槽名称没有变化只是写法有差异
input 默认插槽	#default 默认插槽	slot	使用#default自定义输入建议的模板。该 scope 的参数为item，表示当前输入建议对象。

默认插槽，可以同时支持多个插槽，例如：

<el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" >
 <template #suffix>
 <i class="el-icon-edit el-input__icon" @click="handleIconClick"> </i> 
 </template>
 <template #default="{ item }">
 <div class="name">{{ item.value }}</div>
 <span class="addr">{{ item.address }}</span>
 </template>
 </el-autocomplete>

 

二、新增组件

Element-plus新增组件	标签
Skeleton-骨架屏	<el-skeleton style="width: 240px"> <template #template> <el-skeleton-item variant="image" style="width: 240px; height: 240px;" /> <div style="padding: 14px;"> <el-skeleton-item variant="p" style="width: 50%" /> <div style="display: flex; align-items: center; justify-items: space-between;" > <el-skeleton-item variant="text" style="margin-right: 16px;" /> <el-skeleton-item variant="text" style="width: 30%;" /> </div> </div> </template> </el-skeleton>	默认没有加载出来页面之前显示的默认框架
Empty-空状态	<el-empty description="描述文字"></el-empty>	没有内容的时候展示的提示
Affix -固钉	<el-affix :offset="120"> <el-button type="primary">距离顶部 120px</el-button> </el-affix>	默认固定在页面顶部
TimeSelect 时间选择	<el-time-select v-model="value" start='08:30' step='00:15' end='18:30' placeholder="选择时间"> </el-time-select>	用于选择或输入日期
Space 间距	<el-space direction="vertical" alignment="start" :size="30"> <el-card class="box-card" style="width: 250px" v-for="i in 3" :key="i"> <template #header> <div class="card-header"> <span>Card name</span> <el-button class="button" type="text">Operation button</el-button> </div> </template> <div v-for="o in 4" :key="o" class="text item"> {{ 'List item ' + o }} </div> </el-card> </el-space>	通过调整 size 的值来控制间距的大小 可供选择的内建的值有 mini, small, medium, large, 分别对应 4px, 8px, 12px, 16px. 默认的间距大小为 small 也就是 8px 您也可以通过自定义的 size 来控制大小

写的不全，希望看到的 知道其他差异，评论或者私信 告知我。我会更新~共同学习~谢谢