ELement Plus

于 2024-10-05 15:20:27 发布
阅读量736 收藏 4
点赞数 11
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43731078/article/details/142714294
版权

1 Element Plus入门

介绍：基于 Vue3，面向设计师和开发者的组件库
官网网址 https://element-plus.org/zh-CN/

1.1 Element Plus安装

  1. 百度直接搜索： elementplus，找到官网 https://element-plus.org/zh-CN/
  2. 点击上方的"指南"–>“安装”–>“使用包管理器”
  3. 打开 IDEA 终端 注意：如果有未关闭的 VUE 项目，要先终止项目
  4. 复制"使用包管理器"中的第 1 句命令(npm install element-plus --save)，回车执行安装，安装成功后重启项目
  5. 找到"快速开始"–>并复制图示的两句代码
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
  1. 找到 VUE 项目中的 main.js 文件，粘贴刚刚复制的这两行代码，如图所示：
  2. 并且要在下面的代码中添加：
    //.use(ElementPlus) 引入ElementPlus组件库
    createApp(App).use(ElementPlus).use(store).use(router).mount(‘#app’)
  3. 创建测试页面,添加 el-button 进行测试
  4. 测试：若页面按钮有样式效果，说明 ElementPlus 组件库安装成功

1.2 src/main.js 文件内容

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

1.3 src/App.vue 文件内容

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/a">文本指令</router-link> |
    <router-link to="/b">属性绑定指令</router-link> |
    <router-link to="/c">双向绑定指令</router-link> |
    <router-link to="/d">事件绑定指令</router-link> |
    <router-link to="/e">循环指令</router-link> |
    <router-link to="/f">隐藏显示指令</router-link> |
    <br>
    <router-link to="/g">计算器练习</router-link> |
    <router-link to="/h">猜数字练习</router-link> |
    <router-link to="/i">员工列表练习</router-link> |
    <router-link to="/j">个人简历练习</router-link> |
    <br>
    <router-link to="/k">El-按钮组件</router-link> |
  </nav>
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

1.4 src/router/index.js 文件内容

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {path:'/about', component: () => import('../views/AboutView.vue')},
  {path:'/a', component: () => import('../views/AView.vue')},
  {path:'/b', component: () => import('../views/BView.vue')},
  {path:'/c', component: () => import('../views/CView.vue')},
  {path:'/d', component: () => import('../views/DView.vue')},
  {path:'/e', component: () => import('../views/EView.vue')},
  {path:'/f', component: () => import('../views/FView.vue')},
  {path:'/g', component: () => import('../views/GExec.vue')},
  {path:'/h', component: () => import('../views/HExec.vue')},
  {path:'/i', component: () => import('../views/IExec.vue')},
  {path:'/j', component: () => import('../views/JExec.vue')},
  {path:'/k', component: () => import('../views/KView.vue')},
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

1.5 src/views/KView.vue 文件内容

<template>
  <!-- 如果按钮有样式 说明element-plus组件库引入成功了 -->
  <!-- 如果写el-button有提示 说明IDEA插件element安装成功了 -->
  <!-- 参照笔记完成以上两步 注意需要重启IDEA! -->        
  <h1>El-按钮组件</h1>
  <el-button>按钮</el-button>
</template>

<script setup></script><style scoped></style>

2 组件使用练习

2.1 Button 按钮组件

  1. type 切换按钮主题色 (primary蓝 success绿 info灰 warning黄 danger红)
  2. plain 镂空按钮
  3. round 胶囊型按钮
  4. circle 圆形按钮
  5. disabled 禁用按钮
  6. link 链接按钮
<template>
  <h1>El-按钮组件</h1>
  <!-- 如果按钮上有样式效果,说明El组件库引入成功了 -->
  <!-- 如果<el-button有提示,说明IDEA的element插件安装成功了 -->
  <!-- 参照笔记完成以上两步,注意:需要重启IDEA! -->
  <el-button>按钮</el-button>
  <!-- type切换按钮主题色 primary蓝 danger红 info灰 success绿 warning黄-->
  <!-- plain镂空按钮 round圆角按钮 circle圆形按钮 disabled禁用按钮 -->
  <el-button type="primary">蓝按钮</el-button>
  <el-button type="danger" plain>红按钮</el-button>
  <el-button type="info" round>灰按钮</el-button>
  <el-button type="success" circle>绿按钮</el-button>
  <el-button type="warning" disabled>黄按钮</el-button>
  <hr>
  <!-- 链接按钮 -->
  <a href="https://www.baidu.com">
    <el-button link>链接按钮</el-button>
  </a>
  <a href="https://www.tmooc.cn">
    <el-button link type="primary">达内</el-button>
  </a>

  <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 />
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

<style scoped>

</style>

2.2 Icon图标组件

  1. 在如下网址：找到并复制的代码
    https://element-plus.org/zh-CN/component/icon.html#注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
  1. 在 main.js 中粘贴刚刚复制的代码（引入 EL 图标相关内容 ）
  2. main.js 完整代码（这是一次性的代码，无需多次配置）
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//1.引入element-plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//3.引入element-plus图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
//4.遍历ElementPlusIconsVue对象中的所有图标组件并注册到app中
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

//2.app.use(ElementPlus) 使用Element-plus组件库
app.use(ElementPlus).use(store).use(router).mount('#app')
  1. 直接左键单击图标，就可以自动复制该图标的代码
  2. 测试图标的代码
<template>
  <h1>El-图标组件</h1>
  <el-icon><Message /></el-icon>
  <!-- 注意:图标库需要在main.js中引入! -->
  <!-- size修改图标尺寸 color修改图标颜色 -->
  <!-- 注意:这里的图标并不是传统的.png或.jpg等图片,是SVG矢量图
   SVG可缩放矢量图形,可以直接嵌入在html中,任何分辨率下都可以清晰显示-->
  <el-icon size="50px" color="red"><Delete /></el-icon>
</template>

<script setup></script>

2.3 Message 消息提示组件

https://element-plus.org/zh-CN/component/message.html

<template>
  <h1>El-消息提示组件</h1>
  <el-button @click="f(1)">成功消息</el-button>
  <el-button @click="f(2)">警告消息</el-button>
  <el-button @click="f(3)">错误消息</el-button>
  <el-button @click="f(4)">普通消息</el-button>
  <el-button @click="f(5)">可关闭的消息</el-button>
</template>

<script setup>
//注意! ElMessage需要导入!
import {ElMessage} from "element-plus";

const f = (x)=>{
  switch (x){
    case 1 : ElMessage.success('成功的提示消息');break;
    case 2 : ElMessage.warning('警告的提示消息');break;
    case 3 : ElMessage.error('错误的提示消息');break;
    case 4 : ElMessage('普通的提示消息');break;
    case 5 : ElMessage.error({message:'可关闭的提示消息',showClose:true});
  }
}
</script>

<style scoped>

</style>

2.4 Radio 单选组件

https://element-plus.org/zh-CN/component/radio.html

  1. 所有单选项需要放到el-radio-group中，且需要在group上设置双向绑定用来提交值
  2. el-radio 圆形单选项
  3. el-radio-button 单选按钮
  4. value用来设置当前单选选项的值
  5. label用来设置当前单选选项显示的文本，也可以直接写在标签之间
<template>
  <h1>El-单选组件</h1>
  <el-radio-group v-model="edu">
    <!-- value保存当前选项的值 label保存当前选项显示的文本   -->
    <el-radio value="初中" label="学历:初中"></el-radio>
    <el-radio value="高中" label="学历:高中"></el-radio>
    <el-radio value="本科" label="学历:本科"></el-radio>
    <el-radio value="硕士">学历:硕士</el-radio>
  </el-radio-group>
  <h4>您选中的学历是:{{edu}}</h4>
  <hr>
  <el-radio-group v-model="pr">
<!--  <el-radio-button v-for="p in arr">{{p.title}}</el-radio-button>-->
    <el-radio-button v-for="p in arr" :value="p.price" :label="p.title"></el-radio-button>
  </el-radio-group>
  <h4>您选中的价格是:{{pr}}</h4>
</template>

<script setup>
import {ref} from "vue";

const edu = ref('本科');

const pr = ref('2500');
//准备数组用来存放原始数据
const arr = ref([
  {title:'五粮液',price:500},
  {title:'茅台',price:2500},
  {title:'汾酒',price:330},
  {title:'梦之蓝',price:368}
]);
</script>

<style scoped>

</style>

2.5 Select选择器组件

https://element-plus.org/zh-CN/component/select.html

  1. 所有下拉选项需要放到el-select中，且需要设置双向绑定用来提交值
  2. value用来设置当前选项的值
  3. label用来设置当前选项显示的文本，也可以直接写在标签之间
<template>
  <h1>El-选择器组件</h1>
  <el-select placeholder="请选择一个你喜欢的城市" style="width:50%;" v-model="city">
    <el-option label="北京" value="bj"></el-option>
    <el-option label="西湖" value="xh"></el-option>
    <el-option label="潍坊" value="wf"></el-option>
    <el-option value="cc">长春</el-option>
  </el-select>
  <h4>您选择的城市是:{{city}}</h4>
</template>

<script setup>
import {ref} from "vue";

const city = ref('xh');
</script>

<style scoped>

</style>

2.6 Switch开关组件

https://element-plus.org/zh-CN/component/switch.html

<template>
  <h1>El-开关组件</h1>
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #0aa1ed; --el-switch-off-color: #ff4949"
  />
  是否为管理员<el-switch v-model="isAdmin"></el-switch>
  是否显示图片<el-switch v-model="isShow"></el-switch>
  <hr>
  <img src="fcq.jpg" width="200" v-if="isShow">
  <hr>
  <!-- :active-value="1"数字1表示开关打开 :inactive-value="0"数字0表示开关关闭 -->
  <el-switch v-model="num" :active-value="1" :inactive-value="0"></el-switch>
  <!-- :active-value="'1'"字符串1表示开关打开 :inactive-value="'0'"字符串0表示开关关闭 -->
  <el-switch v-model="numStr" :active-value="'1'" :inactive-value="'0'"></el-switch>
</template>

<script setup>
import { ref } from 'vue'

const num = ref(0);
const numStr = ref('1');

const value1 = ref(true)
const value2 = ref(true)
const isAdmin = ref(false);
const isShow = ref(true);
</script>

<style scoped>

</style>

2.7 Form表单组件

https://element-plus.org/zh-CN/component/form.html

  • 表单所有内容需要写在el-form中
  • 每个表单项需要写在el-form-item中
  • label-width=“80” 控制所有表单项的宽度
  • show-password 可以设置密码输入框的密码隐藏或显示
<template>
  <h1>El-表单组件</h1>
  <h2>注册页面</h2>
  <!-- 要求:接收用户输入的数据,在控制台打印完整的user对象的信息 -->
  <el-form label-width="80" style="width: 500px;margin: 0 auto;">
    <el-form-item label="用户名">
      <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input placeholder="请输入密码" show-password v-model="user.password"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="user.gender">
        <el-radio-button label="男" value="1"></el-radio-button>
        <el-radio-button label="女" value="0"></el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="所在地">
      <el-select v-model="user.city" placeholder="请选择你心仪的城市">
        <el-option label="成都" value="cd"></el-option>
        <el-option label="兰州" value="lz"></el-option>
        <el-option label="太原" value="ty"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="管理员">
      <el-switch v-model="user.isAdmin"></el-switch>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="show()">注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
  import {ref} from "vue";

  const user = ref({
    username:'',
    password:'',
    gender:'',
    city:'',
    isAdmin:false
  });
  const show = ()=>{
    console.log(user.value);
  }
</script>

<style scoped>

</style>

2.8 Table表格组件

https://element-plus.org/zh-CN/component/table.html

  • :data 表格数据绑定
  • prop 表格列对应的源数据属性名
  • label 表格列的标题
  • width 当前列的宽度
  • type=“”
    • selection可显示多选框
    • index可显示编号,从1开始
  • 如果写自定义内容,需要加到template标签中
    • 从scope中可获取 $index 表示当前行数据的索引值,默认从0开始
    • 从scope中可获取 row 表示当前行数据
<template>
  <h1>El-表格组件</h1>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="住址" />
  </el-table>
  <hr>
  <el-table :data="arr">
    <el-table-column type="selection" width="80"></el-table-column>
    <el-table-column label="编号" type="index" width="80"></el-table-column>
    <el-table-column label="姓名" prop="name" width="180"></el-table-column>
    <el-table-column label="工资" prop="salary" width="180"></el-table-column>
    <el-table-column label="岗位" prop="job"></el-table-column>
    <el-table-column label="操作">
      <!--自定义列模板:自定义列的显示内容 -->
      <!--scope保存了当前行数据的索引$index(从0开始)与当前行的完整数据row -->
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from "vue";

const arr = ref([
  {name:'张三',salary:3000,job:'维修员'},
  {name:'李四',salary:4000,job:'销售员'},
  {name:'王五',salary:5000,job:'护林员'},
  {name:'赵六',salary:6000,job:'程序员'}
]);
const del = (i,emp)=>{
  if(confirm('您确认要删除'+emp.name+'吗?')){
    arr.value.splice(i,1);
  }
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped>

</style>

2.9 Menu菜单组件

https://element-plus.org/zh-CN/component/menu.html

  • mode=“” 修改菜单模式 vertical默认垂直 horizontal水平
  • background-color=“” 背景颜色
  • text-color=“” 文字颜色
  • active-text-color=“” 激活文字颜色
  • default-active=“5” 设置默认激活项
  • @select=“handleSelect” handleSelect = (index, indexPath) => {}
    • index表示选中的当前这个菜单项的index值
    • indexPath表示到达当前选中的菜单项需要经过的路径
<template>
  <h1>El-菜单组件</h1>
  <el-menu mode="horizontal" @select="handleSelect"
           active-text-color="red" default-active="6-2"
           text-color="purple" background-color="lightblue">
    <el-menu-item index="1">首页</el-menu-item>
    <el-menu-item index="2">直播课</el-menu-item>
    <el-menu-item index="3">脱产课</el-menu-item>
    <el-menu-item index="4">线上课</el-menu-item>
    <el-menu-item index="5">免费课</el-menu-item>
    <el-sub-menu index="6">
      <template #title>关于我们</template>
      <el-menu-item index="6-1">联系方式</el-menu-item>
      <el-menu-item index="6-2">公司地址</el-menu-item>
      <el-menu-item index="6-3">求职招聘</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
//index指的是选中的当前菜单项的index值,比如选中"线上课",那么index的值就是4
//indexPath指的是如何到达当前被选中的这个菜单项,比如6,6-3可以找到"求职招聘"
const handleSelect = (index, indexPath) => {
  console.log(index, indexPath)
}
</script>

<style scoped>

</style>

2.10 Layout布局组件

https://element-plus.org/zh-CN/component/layout.html#layout

  • el-row 均匀等分24份
  • el-col :span=“n” 表示当列占n份
  • :gutter=“20” 天沟,其实指的是列与列之间的内间距
  • :offset=“n” 列偏移,默认值为0,默认靠左,n为几表示向右移动几列
  • 布局嵌套:内层充当父元素的元素需要重新作为el-row,它的子元素瓜分它的24列
<template>
  <h1>El-布局组件</h1>
  <el-row>
    <el-col :span="6">哈哈哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈哈哈</el-col>
    <el-col :span="6">哈哈哈哈哈哈</el-col>
  </el-row>
  <h3>两张图</h3>
  <el-row>
    <el-col :span="12"><img src="rich.jpg" style="width:100%;"></el-col>
    <el-col :span="12"><img src="rich.jpg" style="width:100%;"></el-col>
  </el-row>
  <h3>六张图</h3>
  <el-row :gutter="20">
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>
  <h3>列偏移</h3>
  <!-- :offset 列偏移,默认值为0,默认靠左,写几表示向右移动几列 -->
  <el-row>
    <el-col :offset="4" :span="20"><img src="rich.jpg" style="width:100%;"></el-col>
  </el-row>
  <el-row>
    <!-- 居中:图片12列,还剩12列,向右移动了6列,左右各6列,所以图片居中 -->
    <el-col :offset="6" :span="12"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>
  <!-- 有三张图,它们的宽度比为 1:2:3 -->
  <el-row>
    <el-col :span="4"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="8"><img src="2024.png" style="width:100%;"></el-col>
    <el-col :span="12"><img src="2024.png" style="width:100%;"></el-col>
  </el-row>
  <!-- 有8列,内容为1 2 ... 8,均分一行 -->
  <el-row :gutter="10">
   <el-col :span="3" v-for="item in 8">{{ item }}</el-col>
  </el-row>

</template>

<script setup>

</script>

<style scoped>

</style>

2.11 Container容器组件

https://element-plus.org/zh-CN/component/container.html

<!--  <h1>El-容器组件</h1>-->
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!-- 1.顶部栏标题 -->
        <h1 style="background-color: #0aa1ed;color: #fff;">后台管理系统</h1>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!-- 2.菜单栏-菜单组件 -->
          <el-menu style="margin-left: 20px;">
            <el-menu-item index="1">用户管理</el-menu-item>
            <el-menu-item index="2">车辆管理</el-menu-item>
            <el-menu-item index="3">电子围栏管理</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 3.主体内容放表格  -->
          <el-table :data="arr">
            <el-table-column label="编号" width="80" type="index" align="center"></el-table-column>
            <el-table-column label="姓名" prop="name" align="center"></el-table-column>
            <el-table-column label="年龄" prop="age" align="center"></el-table-column>
            <el-table-column label="性别" prop="gender" align="center"></el-table-column>
            <el-table-column label="手机号" prop="phone" align="center"></el-table-column>
            <el-table-column label="地址" prop="addr" align="center"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {ref} from "vue";

const arr = ref([
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'},
  {name:'张飞',age:18,gender:'男',phone:'18811112222',addr:'北京市学院路圣熙8号'}
]);
</script>

<style scoped>

</style>

2.12 Carousel轮播图组件

https://element-plus.org/zh-CN/component/carousel.html

  • 所有轮播图项 el-carousel-item 必须放到轮播图 el-carousel 标签中
  • trigger=“” 默认值hover悬停切换轮播项,也可设置成click点击切换
  • type=“card” 可以修改轮播图以卡片形式切换
<template>
  <h1>El-走马灯组件</h1>
  <el-carousel style="width: 380px;">
    <el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item>
  </el-carousel>

  <!-- trigger="click" 鼠标点击下方指示灯时触发切换,默认悬停切换 -->
  <el-carousel style="width: 380px;" trigger="click">
    <el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item>
  </el-carousel>

  <!-- type="card" 轮播图使用卡片样式 -->
  <el-carousel style="width: 900px;" type="card">
    <el-carousel-item><img src="carousel1.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel2.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel3.jpg" style="width:100%;height:100%;"></el-carousel-item>
    <el-carousel-item><img src="carousel4.jpg" style="width:100%;height:100%;"></el-carousel-item>
  </el-carousel>
</template>

<script setup>

</script>

<style scoped>

</style>

2.13 Card卡片组件

https://element-plus.org/zh-CN/component/card.html

<template>
  <h1>El-卡片组件</h1>
  <el-row :gutter="10">
    <el-col :span="6" v-for="item in 4">
      <el-card>
        <img src="mwzz.png" style="width:100%;">
        <p>《宝可梦》:妙蛙种子</p>
        <div style="margin-bottom: 40px;">
          <span style="float: left;">属性:草、毒</span>
          <span style="float: right;">好友:小火龙</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>

</script>

<style scoped>

</style>

2.14 DateTimePicker 日期时间选择器

https://element-plus.org/zh-CN/component/datetime-picker.html

type属性 定义选择器的类型

  • date 日期选择器
  • datetimerange 日期时间范围选择器
    • range-separator=“到” 范围选择器中的分隔符
    • start-placeholder=“开始啦” 开始日期输入框的提示占位符
    • end-placeholder=“结束啦” 结束日期输入框的提示占位符

format属性 定义日期时间的显示值的格式

  • YYYY-MM-DD 年月日
  • YYYY-MM-DD HH:mm:ss 年月日 时分秒

value-format属性 定义日期时间提交值的格式

  • YYYY-MM-DD 年月日
  • YYYY-MM-DD HH:mm:ss 年月日 时分秒

@change=“” 事件 监听日期选择,一旦变化立即触发

<template>
  <h1>El-日期时间选择器组件</h1>
  <el-date-picker
      type="date"
      v-model="rq"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      @change="console.log(rq)"
  ></el-date-picker>
  <br>
  <el-date-picker
      type="datetimerange"
      range-separator="到"
      start-placeholder="开始啦"
      end-placeholder="结束啦"
      v-model="times"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      @change="console.log(times)"
  ></el-date-picker>
</template>

<script setup>
import {ref} from "vue";

const rq = ref('');
//因为要保存开始时间与结束时间,所以要使用数组
const times = ref([]);
</script>

<style scoped>

</style>

2.15 优化

  1. 解决日期控件默认英文显示问题(汉化)
  2. 解决表格拖拽页面大小报错BUG
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//1.引入element-plus组件库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//3.引入element-plus图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//5.1修改elementPlus默认中文
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const app = createApp(App)
//4.遍历ElementPlusIconsVue对象中的所有图标组件并注册到app中
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

//2. app.use(ElementPlus) 使用Element-plus组件库
//5.2 app.use(ElementPlus,{ locale: zhCn })将El本地化为中文
app.use(ElementPlus,{ locale: zhCn }).use(store).use(router).mount('#app')

//6.解决ResizeObserver Error
const debounce = (fn, delay) => {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
    constructor(callback) {
        callback = debounce(callback, 16);
        super(callback);
    }
}

2.16 员工列表练习

<template>
  <h1>员工列表综合练习</h1>
  <el-form style="width: 600px;margin: 0 auto;">
    <el-form-item label="姓名">
      <el-input placeholder="请输入姓名" v-model="emp.name"></el-input>
    </el-form-item>
    <el-form-item label="工资">
      <el-input placeholder="请输入工资" v-model="emp.salary"></el-input>
    </el-form-item>
    <el-form-item label="岗位">
      <el-input placeholder="请输入岗位" v-model="emp.job"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="add()">点我提交</el-button>
    </el-form-item>
  </el-form>

  <!-- 定义表格 -->
  <el-table :data="arr" style="width:600px;margin: 0 auto;">
    <el-table-column label="编号" type="index" align="center" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名" align="center"></el-table-column>
    <el-table-column prop="salary" label="工资" align="center"></el-table-column>
    <el-table-column prop="job" label="岗位" align="center"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from "vue";
//定义数组用来保存多个员工对象
const arr = ref([]);
//定义空的员工对象,双向绑定,用来存用户输入的数据
const emp = ref({name:'',salary:'',job:''});
//定义添加员工的方法
const add = ()=>{
  //将员工信息存入数组中
  arr.value.push(emp.value);
}
const del = (i,emp)=>{
  if(confirm('是否要删除'+emp.name+'员工?')){
    //删除数组中的元素
    arr.value.splice(i,1);
  }
}
</script>

<style scoped>

</style>

2.17 页面综合练习

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!--3.编写顶部导航栏-->
        <el-menu mode="horizontal"
           background-color="#0aa1ed" text-color="#fff"
           active-text-color="#ff0" default-active="3">
          <el-menu-item index="1">精彩活动</el-menu-item>
          <el-menu-item index="2">精品女装</el-menu-item>
          <el-menu-item index="3">品牌男装</el-menu-item>
          <el-menu-item index="4">母婴产品</el-menu-item>
          <el-menu-item index="5">数码科技</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <!-- 4.编写主体轮播图 -->
        <el-carousel style="height: 240px;">
          <el-carousel-item v-for="url in bannerArr">
            <img :src="url" style="width:100%;height:100%;">
          </el-carousel-item>
<!--          <el-carousel-item><img src="/imgs/banner1.jpg" style="width:100%;height:100%;"></el-carousel-item>-->
<!--          <el-carousel-item><img src="/imgs/banner2.jpg" style="width:100%;height:100%;"></el-carousel-item>-->
<!--          <el-carousel-item><img src="/imgs/banner3.jpg" style="width:100%;height:100%;"></el-carousel-item>-->
<!--          <el-carousel-item><img src="/imgs/banner4.jpg" style="width:100%;height:100%;"></el-carousel-item>-->
<!--          <el-carousel-item><img src="/imgs/banner5.jpg" style="width:100%;height:100%;"></el-carousel-item>-->
        </el-carousel>
        <!-- 5.商品列表 -->
        <el-row :gutter="10">
         <el-col :span="6" v-for="p in productArr" style="margin: 10px 0;">
           <el-card style="padding-bottom:20px;">
             <img :src="p.url" style="width:100%;height:100%;">
             <p>{{p.title}}</p>
             <div>
               <span style="float:left;color:red;">¥{{p.price}} <s>{{p.oldPrice}}</s> </span>
               <span style="float:right;">销量:{{p.saleCount}}</span>
             </div>
           </el-card>
         </el-col>
        </el-row>
      </el-main>
      <el-footer
      style="background-color:#282c30;color:#666;height:200px;padding-top:40px;">
        <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
        <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
      </el-footer>
    </el-container>
  </div>
</template>


<script setup>
import {ref} from "vue";
//1.准备轮播图数组
const bannerArr = ref(["/imgs/banner3.jpg", "/imgs/banner4.jpg", "/imgs/banner5.jpg"]);
//2.准备商品对象数组
const productArr = ref([
  {title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
  {title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装", price: 233, oldPrice: 598, url: "/imgs/b.jpg", saleCount: 2342},
  {title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季", price: 233, oldPrice: 598, url: "/imgs/c.jpg", saleCount: 2342},
  {title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚", price: 233, oldPrice: 598, url: "/imgs/d.jpg", saleCount: 2342},
  {title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花", price: 233, oldPrice: 598, url: "/imgs/e.jpg", saleCount: 2342},
  {title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领", price: 233, oldPrice: 598, url: "/imgs/f.jpg", saleCount: 2342},
  {title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦", price: 233, oldPrice: 598, url: "/imgs/g.jpg", saleCount: 2342},
  {title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
  {title: "imone2021秋款黑色小西装外套女韩版学生宽松学", price: 233, oldPrice: 598, url: "/imgs/i.jpg", saleCount: 2342},
  {title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫", price: 233, oldPrice: 598, url: "/imgs/j.jpg", saleCount: 2342},
  {title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修", price: 233, oldPrice: 598, url: "/imgs/k.jpg", saleCount: 2342},
  {title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色", price: 233, oldPrice: 598, url: "/imgs/l.jpg", saleCount: 2342}]);
</script>

<style scoped>
p {
  /* 强制文本不允许换行 */
  white-space: nowrap;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 超出去的文本替换成省略号 */
  text-overflow: ellipsis;
}
</style>
Circle in Circle
关注
element plus 手册离线
03-25
Element Plus 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的组件，用于构建现代化的 Web 应用程序。这个"element plus 手册离线"版本是为了那些在网络不稳定或者无法连接到互联网的情况下，依然能...
HTML-引入Vue3和Element Plus
04-24
Vue3是Vue.js的最新版本，提供了许多性能优化和新特性，而Element Plus则是一个基于Vue3的高质量UI组件库，能够帮助开发者快速构建美观的用户界面。 首先，我们需要在HTML文件（如`index.html`）中引入Vue3。Vue3...
element plus 安装
09-13 2402
使用element plus，需要nodejs环境，然后通过npm先安装vue3，再安装element plus
Element Plus 实例详解（一）___安装设置
逆境清醒的博客
03-23 3万+
Element Plus是基于Vue 3，面向设计师和开发者的组件库。一、前言。二、安装方法。三、Element Plus用法。四、Element Plus 安装使用小实例
Element Plus 基本使用
qq_62377885的博客
03-23 6100
Element Plus 基本使用官网地址element-plus 基本使用具体部署请看。
Element Plus介绍
DevCorner的Pro技术博客
05-12 1万+
Element Plus 是一套为构建基于 Vue 3 的组件库而设计的 UI 组件库（UIKit）。它为开发者提供了一套丰富的 UI 组件和扩展功能，帮助开发者快速构建高质量的 Web 应用。
【优质书籍推荐】Vue.js 3.x+Element Plus从入门到精通
热门推荐
weixin_43178406的博客
04-30 4万+
本文深入讲解了全栈开发巨作：《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，希望能对学习Vue.js+Element Plus框架的同学们有所帮助。 文章目录 1. 前言 2. 书籍推荐 2.1 内容简介 2.2 本书作者 2.3 本书目录 2.4 适合读者 3. 购买链接
vue3的Element plus （一）
this__valve的博客
06-04 1661
Element Plus 是一个基于 Vue 3 的 UI 组件库，它是对 Element UI 组件库的升级和扩展。Element Plus 提供了一套美观、易用且高效的组件，可以用于构建现代化的 Web 应用程序。
从 0 开始在项目中引入 Element Plus
Becomin' Charles
02-23 1845
本文介绍了，如何从 0 开始在 Vue 3 项目中引入 Element Plus，并实现了一个小 Demo。
详细分析Element Plus中的ElMessageBox弹窗用法（附Demo及模版）
码农研究僧的博客
05-19 7293
Element Plus 是一个基于 Vue 3 的组件库，其中包括各种类型的弹窗组件，用于在网页上显示信息或与用户进行交互 主要的弹窗组件包括 ElMessageBox.alert、ElMessageBox.prompt 和 ElMessageBox.confirm 等
Element Plus 实例详解（二）___Button 按钮
逆境清醒的博客
03-25 1万+
Element Plus Basic 基础组件里Button 按钮，是常用的操作按钮，提供了Button 按钮的基础用法、Button 按钮禁用状态、链接按钮、文字按钮、图标按钮、按钮组等功能，本篇里我们一起来试用一下Element Plus的 Button 按钮组件。可以自定义按钮颜色。系统将自动计算 hover 和 active 颜色。实现效果：
Element Plus官网
qq_40895460的博客
09-17 7950
Element - 网站快速成型工具 (gitee.io)
基于Vue3+Element Plus后台管理系统模版源码.zip
10-26
基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element ...
Vue3 Element Plus表格导入导出示例
07-15
在Vue3框架中，Element Plus库提供了一套强大的表格组件，可以满足开发中常见的数据展示、操作需求。本文将深入探讨如何在Vue3项目中利用Element Plus实现表格的导入和导出功能，包括数据的CSV格式导入和导出，以及...
基于Vue3+Element Plus实现改换 saas，自动引入等功能，使用 Element Plus 免费开源的中后台模版
10-10
**Vue3 + Element Plus 实现 SaaS 管理后台** Vue3 是 Vue.js 的最新版本，它带来了许多性能优化和开发体验上的提升，如Composition API、Suspense、Teleport等新特性。Element Plus，则是Element UI的下一代，它是...
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 612
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 384
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 5871
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1183
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
element plus
04-28
Element Plus是一种基于Vue.js框架的UI组件库，是Element UI的升级版。它提供了许多常用的UI组件，例如按钮、表格、表单、弹窗等，使得开发人员能够更加便捷地构建用户界面。 Element Plus的设计理念是简洁、易用和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值