日常开发经验11.28

曾经终败给现在 2023-10-02 15:31 11阅读 0赞

**目录**

1.element-ui更改图标icon大小

2. :style 常用的方法

3.z-index的层叠性

4. 单行文本溢出的写法

5.elementUI+配合路由进行页面跳转

--------------------

### 1.element-ui更改图标icon大小 ###

.size-icon{
      font-size: 25px;
    }

### 2. :style 常用的方法 ###

--------------------

### 3.z-index的层叠性 ###

> 有一个固定定位的侧边栏，鼠标经过侧边栏出现一个div是绝对定位，要求固定定位的字在上面，div在下面，设置固定定位z-index是9999，而div的绝对定位z-index是1，但是效果为达到效果，但是给div设置为-1的时候就可以了。

--------------------

### 4. 单行文本溢出的写法 ###

> **使用text-overflow属性，并且要加width宽度属性**

overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

--------------------

### 5.elementUI+配合路由进行页面跳转  ###

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][]

**场景：**

> 页面中点击‘**了解更多**’，分别进入不同的页面，但是它和右侧毫无关联。

**解决**：

> activename是elementui提供的选中下标，我们可以设置他的下标名字和路由名称一样，然后把这个activename当做路由的地址，就可以实现点击跳转到相应页面。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ee477171b3d54a88b487189ff8de2862.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3a26963b685642f49f1fb69e2fa50037.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_18,color_FFFFFF,t_70,g_se,x_16