element-plus

官方文档Icon 图标 | Element Plus (element-plus.org)

首先要引入element-plus包

npm install element-plus

然后可以创建一个专门属于element的文件夹

vue文件包含三个部分，script，template，style，主要显示样式在template里面写，APP.vue是主要显示文件夹，若要显示elemnet的元素则需要在APP.vue的template里面引入

<element-view></element-view>

并且需要在main.js里面添加包

import './assets/main.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
// 注册图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(ElementPlus)
app.mount('#app')

第二个和第三个是引入element包

最后一个和for循环也是引入element的图标

按钮

<el-button><el-icon class="is-loading"><Search /></el-icon></el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
  <br><br><br>
  <el-button plain>Plain</el-button>
  <el-button type="primary" plain>Primary</el-button>
  <el-button type="success" plain>Success</el-button>
  <el-button type="info" plain>Info</el-button>
  <el-button type="warning" plain>Warning</el-button>
  <el-button type="danger" plain>Danger</el-button>
  <br><br><br>
  <el-button round>Round</el-button>
  <el-button type="primary" round>Primary</el-button>
  <el-button type="success" round>Success</el-button>
  <el-button type="info" round>Info</el-button>
  <el-button type="warning" round>Warning</el-button>
  <el-button type="danger" round>Danger</el-button>
  <br><br><br>
  <el-button :icon="Search" circle />
  <el-button type="primary" :icon="Edit" circle />
  <el-button type="success" :icon="Check" circle />
  <el-button type="info" :icon="Message" circle />
  <el-button type="warning" :icon="Star" circle />
  <el-button type="danger" :icon="Delete" circle />

按钮需要引入el-button

图标

<el-icon><></el-icon>

中间就是填写按钮种类，而el-icon后面可以填写属性什么的

图标可以和按钮嵌套，如

<el-button type="primary">Primary</el-button>

显示的是一个按钮，名称为Primary

<el-button type="primary">

<el-icon class="is-loading"><Search /></el-icon>

</el-button>

这样就完成了嵌套

将多个元素放到一起

<el-button-group>
    <el-button type="danger">
      <el-icon class="is-loading">
        <Edit/>
      </el-icon>
    </el-button>
    <el-button type="info">
      <el-icon>
        <Search/>
      </el-icon>
    </el-button>
  </el-button-group>

提示框

导包
import {ElMessage,ElMessageBox,ElNotification} from 'element-plus'

第一个是一个类似于函数，直接定义一个函数然后传入参数使用

const openMsg = () => {
  ElMessage({
    type:'success',
    message:'张耀光nb666',
    showClose:true

  })
}

使用的话直接在button标签后面添加@click

<el-button @click="openMsg">消息</el-button>

第二个是点击后出一个框可以选择两个按钮并进行相关操作，返回的是一个promise对象，可以用then和catch接收

const openconfirm = () => {
  ElMessageBox.confirm('确认？','标题',{
    type:'info',
    confirmButtonText:'确认',
    cancelButtonText:'取消'
  }).then(() => {
    console.log('确认')
  }).catch(() => {
    console.log('取消')
  })

}

第三个是和第一个类似的提示框，用法也类似，不过可以定义信息的位置和类型

const openNotifiy = () => {
  ElNotification({
    type:'warning',
    title:'我是帅哥的title',
    message:'我是帅哥的message',
    duration:2000
  })

}

导航栏

需要在APP.vue中引入

import {reactive,ref} from 'vue'

<h3>水平导航</h3>
  <el-menu mode="horizontal" :default-active="selectdefault" @select="selected1" background-color="#fff" text-color="#0ff" active-text-color="#f00" style="height: 50px">
    <el-menu-item index="1" @click="print">zyg</el-menu-item>
    <el-sub-menu index="2">
      <template #title>zyg1</template>
      <el-menu-item index="2-1">zyg2</el-menu-item>
      <el-menu-item index="2-2">zyg3</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3">zyg4</el-menu-item>
  </el-menu>

水平导航，可以通过更改el-menu标签中的属性来更改样式

el-menu-item导航栏中元素的名称

el-menu定义一个导航栏

<template #title>zyg1</template>定义index2中的标题

每嵌套一个标题就要添加一个

el-sub-menu

例如我想再在第二个下面再多嵌套一层

<el-sub-menu index="2-3">
        <template #title>zyg3</template>
        <el-menu-item index="2-2-1">zyg2-2-1</el-menu-item>
        <el-menu-item index="2-2-2">zyg2-2-2</el-menu-item>
      </el-sub-menu>

下拉单菜单

<el-dropdown @command="userCommand">
  <span>
    个人中心<el-icon><Search/></el-icon>
  </span>
  <template #dropdown>
    <el-dropdown-menu>
      <el-dropdown-item command="1">1</el-dropdown-item>
      <el-dropdown-item command="2">2</el-dropdown-item>
    </el-dropdown-menu>
  </template>
</el-dropdown>

其中command是事件监听函数，不能更改,但是command对应的函数空调更改

标签的嵌套

<el-dropdown @command="userCommand">
  <span>
    个人中心<el-icon><Search/></el-icon>
  </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="1">1</el-dropdown-item>
        <el-dropdown-item command="2">2</el-dropdown-item>
        <el-dropdown-item>
          <el-dropdown @command="userCommand">
            <span>子菜单</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="3-1">子选项1</el-dropdown-item>
                <el-dropdown-item command="3-2">子选项2</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>