ElementPlus学习

Element-Plus与Element-Ui的区别

Element-Ui：对应Element2；基于vue2.0的桌面端组件库，不支持手机版
Element-Plus: 对应于Element3; 基于Vue3的前端Ui库，支持手机版

使用Element-Plus中的组件需要注意的地方

1.组件中的部分属性在赋值时要采用动态绑定(v-bind或“:”)的形式才生效,没有采用动态绑定的解释为字符串字面量，采用动态绑定的将其值解释为整型或其它基本数据类型、变量名称、单个表达式。

Element-Plus 中的组件

一、边框

```css
border-radius: 0px;  //无边框
border-radius: 2px:	 //小圆角
border-radius: 4px;  //大圆角
border-radius: 20px; //圆形圆角
```

二、Icon图标

1. 结合el-icon使用,el-icon 为 raw SVG 图标提供额外的属性

   <!--ICON图标,el-icon 为rawe SVG 提供额外的属性，也可以单独使用不从祖先节点继承任何属性-->
   <el-icon size="30"  class="icon is-loading"> 
      <edit>通过类名is-loading实现edit图标在2秒内旋转360度</edit> 
   </el-icon>
   

2. 直接使用 SVG 图标

    <!--单独使用不从祖先节点继承任何属性，但无法通过类名class=is-loading 实现图标自动旋转-->
    <goods style="width: 1.5em; height: 1.5em; margin-right: 8px; color:red;" class="icon is-loading"></goods>
   

三、Button按钮

1. Button的plain属性和text属性一起设置时，最终体现的是text属性,而plain属性不会生效

     <el-button type="primary" plain text>Primary</el-button>	//plain属性不会生效
   

2. Button组件的所有boolean类型属性在赋值时必须采用/动态绑定/的形式

    <el-button type="primary"      >Primary</el-button>	//不体现plain属性特征
    <el-button type="primary" plain>Primary</el-button>	//不体现plain属性特征
    <el-button type="primary" plain="true">Primary</el-button>		//不体现plain属性特征
    <el-button type="primary" :plain="false">Primary</el-button>	//体现plain属性特征
    <el-button type="primary" :plain="0">Primary</el-button>		//体现plain属性特征
    <el-button type="primary" :plain="1">Primary</el-button>		//体现plain属性特征
   

3. Button组件中的下列属性同时设置时，只能表现出其中一个属性的特征：
   相互排斥的属性(按照体现出的特征优先级排序)： link > text > plain; link > text > circle > round
   相互结合的属性：circle + plain; round + plain; text + bg

4. Button组件中所有 非boolean类型属性
   size 属性取值有： ’larg’ 、 ‘default’、 ‘small’
   type 属性取值有：‘primary’、‘success’、 ‘warning’、‘danger’、‘info’
   loading-icon 属性：略
   icon 属性：略
   native-type 属性取值有：‘button’、‘submit’、‘reset’
   color 属性： 略