element-plus学习笔记(一)

element-plus学习笔记(一)

目录

引入Element-plus(main.js)

router-link 的下划线去除

通过CSS实现hover效果控制另一元素

Item居中设置

布局

Container 布局容器

 Basic规范

 Icon图标

Link文字链接

Menu 菜单

引入Element-plus(main.js)

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
app.use(ElementPlus)

router-link 的下划线去除

a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

通过CSS实现hover效果控制另一元素

<div class="course">

.course:hover {
  border-bottom: 1px solid pink;
}

• 点击样式：.course:active

Item居中设置

.text-style {
  font-size: 16px;
  color: #FFF;
  width: 200px;
  height: 50px;
  position: relative;
  left: 60px;
  top: 20px;
  margin: auto;
}

布局

• Layout | Element Plus

• 组件默认使用 Flex 布局，不需要手动设置 type="flex"。

  请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

• 对齐方式
  • 默认使用 flex 布局来对分栏进行灵活的对齐。
  • 可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式

<el-row>
    <el-col :span="24">24</el-col>
</el-row>
<el-row>
    <el-col :span="18">18</el-col>
</el-row>
<el-row>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
    <el-col :span="6">6</el-col>
</el-row>
<el-row type="flex" justify="center">
    <el-col :span="4">4</el-col>
    <el-col :span="4">4</el-col>
    <el-col :span="4">4</el-col>
</el-row>
<el-row type="flex" justify="center">
    <el-col :span="4" :offset="1">4</el-col>
    <el-col :span="4" :offset="1">4</el-col>
    <el-col :span="4" :offset="1">4</el-col>
</el-row>

 

Container 布局容器

• Container 布局容器 | Element Plus
• 用于布局的容器组件，方便快速搭建页面的基本结构：
• <el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。
• <el-header>：顶栏容器。
• <el-aside>：侧边栏容器。
• <el-main>：主要区域容器。
• <el-footer>：底栏容器。
• 以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。 此外， <el-container>的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个 <el-container>

<!--  -->
<template>
    <div class="container_el">
        <h2>Container</h2>
        <el-container>
            <el-header>header</el-header>
            <el-container>
                <el-aside>aside</el-aside>
                <el-main>main</el-main>
            </el-container>
            <el-footer>footer</el-footer>

        </el-container>

    </div>
</template>

<script>
    export default {
        name: "Container",
    }
</script>
<style>
    .container_el {
        width: 100%;
        color: #fff;
    }

    .el-container {
        background-color: #eee;
    }

    .el-header {
        background-color: yellow;
    }

    .el-footer {
        background-color: green;
    }

    .el-aside {
        background-color: blue;
        max-width: 240;
        min-height: 300;
    }

    .el-main {
        background-color: pink;
    }
</style>

 Basic规范

• 字体：Typography | Element Plus
  • html或body标签中添加

font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

• 颜色：Color 色彩 | Element Plus
• 边框：Border | Element Plus

 Icon图标

• Icon 图标 | Element Plus

• 参考：Element-UI - Vue项目整合Element-UI & Icon图标 & 自定义Icon图标_kaven-CSDN博客
• Element-UI提供了一套常用的图标集合。直接通过设置类名为el-icon-iconName来使用即可，上面的代码中也有涉及。

<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p>

<el-button type="primary" icon="el-icon-search">搜索</el-button>

• 改变图标颜色：

<i class=" el-icon-s-custom" style="font-size: 16px; color: green"></i>

• 改变字体颜色，图标颜色

• 把图标当做字体

Link文字链接

• Link | Element Plus

Menu 菜单

• Menu 菜单 | Element Plus

<template>
  <div id="app">
    <div class="left-bar">
      <el-row class="tac">
        <el-col :span="12" class="el-menu-style">
          <h5 style="color: #000;">Default colors</h5>
          <!-- <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose"> -->
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" style="height: 600px;">
            <el-sub-menu index=" 1">
              <template #title>
                <i class="el-icon-location"></i>
                <span>首页</span>
              </template>
              <el-menu-item>
                <i class="el-icon-goods"></i>
                <router-link to="/ele_btn">商品</router-link>
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <router-link to="/form_el">表单</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <router-link to="/layout_el">布局</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <router-link to="/container_el">容器</router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <router-view></router-view>
  </div>
</template>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
      'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  }

  #app {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    background-color: #fff;
    color: #fff;
  }

  a {
    text-decoration: none;
    color: #fff;
  }

  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
</style>