element-plus组件库的使用

女爷i 2024-04-01 15:29 81阅读 0赞

![在这里插入图片描述][924e49429f4b436f99a2a9d6a55d9a9e.webp_pic_center]

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

## 一、安装 ##

[https://element-plus.gitee.io/zh-CN/guide/installation.html][https_element-plus.gitee.io_zh-CN_guide_installation.html]

### 方法一：使用vue ui命令 ###

### 方式二：打开命令行，进入项目目录中，执行命令 ###

npm install element-plus --save
    npm install @element-plus/icons-vue

#### 第一步：打开命令行 输入vue ui 进入可视化的界面管理工具 ####

C:\Users\Lenovo>vue ui
    �  Starting GUI...
    �  Ready on http://localhost:8000

![在这里插入图片描述][e3682e963103413685fec918d7b4df8c.png]

#### 第二步：点击依赖安装，搜索 element-plus，选中安装 ####

![在这里插入图片描述][174974c774fd4404bf9e98e0269cef2f.png]

#### 第三步：项目中配置element-plus和icons-vue（开发项目直接copy就可以） ####

import {
         createApp } from 'vue'
    
    //导入安装的element-plus
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import * as ElementPlusIconsVue from '@element-plus/icons-vue'
    import App from './App.vue'
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
    
    const app = createApp(App)
    
    //注册element-plus
    app.use(ElementPlus,{
        
    	locale: zhCn,
    })
    
    //注册图标库
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        
      app.component(key, component)
    }
    
    app.mount('#app')

## 二、使用 ##

### 1、按钮组件的使用 ###

<template>
    	<h1>element组件库的使用演示</h1>
    	
    	<el-button icon='Delete' type="primary">按钮</el-button>
    	<el-button icon='User' color="#fff">按钮</el-button>
    	
    	<el-button color="#fff" icon="Share">按钮</el-button>
    	<el-button icon='Delete' type="success">按钮</el-button>
    	
    	
    	<el-divider border-style="dashed" />
    	
    	<el-row class="mb-4">
    	    <el-button round>Round</el-button>
    	    <el-button icon="User" type="primary" round>确认</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>
    	  </el-row>
    
    </template>

![在这里插入图片描述][c8f6d627b8a34155949b64f2f79d9e58.png]

### 2、图标组件的使用 ###

#### 单独使用图标组件 ####

<el-icon color="#ff007f" size="100px"><StarFilled /></el-icon>
    <el-icon color="#0000ff" size="100px"><Message /></el-icon>

![在这里插入图片描述][29617fb1e0374030b7dcf481b8f85f13.png]

#### 按钮中使用图标组件 ####

<el-row class="mb-4">
        <el-button round>Round</el-button>
        <el-button icon="User" type="primary" round>确认</el-button>
        <el-button icon="Share" type="success" round>Success</el-button>
        <el-button icon="Platform" type="info" round>Info</el-button>
        <el-button icon="Football" type="warning" round>Warning</el-button>
        <el-button icon="Comment" type="danger" round>Danger</el-button>
    </el-row>

![在这里插入图片描述][553a651d81e549cab759d01abd98bb7d.png]

### 3、分割线组件 ###

<template>
    	<h1>分割线组件</h1>
    	<el-divider>
    	      <el-icon><star-filled /></el-icon>
    	</el-divider>
    	
    	<el-divider content-position="right">分割线</el-divider>
    </template>

### 4、页面布局组件 ###

<el-container>
    	      <el-header style="background: burlywood;">Header</el-header>
    	      <el-container>
    			  
    	        <el-aside width="200px">
    				<div style="height:800px;background: antiquewhite;">左侧</div>
    			</el-aside>
    	        
    			<el-main>
    				<div style="height:800px;background: mediumaquamarine;">右侧</div>
    			</el-main>
    	      </el-container>
    </el-container>

### 5、单行布局组件 ###

<el-row :gutter="20">
        <el-col :span="6">
    		<div class="box">div1</div>
    	</el-col>
        <el-col :span="6">
    		<div class="box">div2</div>
    	</el-col>
        <el-col :span="6">
    		<div class="box">div3</div>
    	</el-col>
        <el-col :span="6">
    		<div class="box">div4</div>
    	</el-col>
    </el-row>

![在这里插入图片描述][62b04a1a946c4f94a6c6c0adad9d4d3a.png]

### 5、数据展示组件 ###

<template>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column label="名字" width="180">
    		<template #default="scope">
    			{
       {scope.row}}
    		</template>
    	</el-table-column>	
        <el-table-column prop="address" label="地址" width="180" />
    	<el-table-column label="操作">
    		<template #default="scope">
    			<div v-if="scope.$index%2===0">
    				<el-button icon="Delete" type="danger">删除</el-button>
    				<el-button icon="Edit" type="primary" >编辑</el-button>
    			</div>
    			<div v-else>
    				<el-button icon="Delete" type="success">删除</el-button>
    				<el-button icon="Edit" type="warning" >编辑</el-button>
    			</div>
    			
    		</template>
    	</el-table-column>
      </el-table>
    </template>

![在这里插入图片描述][44a4e8db41b240d686b90a08ca2d5090.png]

### 6、表单组件 ###

<template>
    
    	  
    	 <el-form
    		  :model="loginForm"
    		  :rules="FormRules"
    	      label-width="120px"
    	      class="demo-ruleForm">
    	      <el-form-item label="密码" prop="password">
    	            <el-input v-model="loginForm.password"  type="password" />
    	      </el-form-item>
    	      <el-form-item label="姓名" prop="username">
    	        <el-input type="text" v-model="loginForm.username"/>
    	      </el-form-item>
    	      <el-form-item label="Age" >
    	        <el-input v-model="age" />
    	      </el-form-item>
    	      <el-form-item>
    	        <el-button type="primary" @click="submitForm(ruleFormRef)">Submit</el-button>
    	        <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
    	      </el-form-item>
    	</el-form>
    	
    </template>
    
    <script>
    	export default{
          
    		data(){
          
    			return{
          
    				loginForm:{
          
    							username:"",
    							password:"",
    							status:false,
    							},
    				// 登录表单的校验规则
    				FormRules:{
          
    					// username的校验规则
    					username:[
    						 {
           required: true, message: '用户名不能为空', trigger: 'blur' },
    					],
    					// password的校验规则
    					password:[
    						{
           required: true, message: '密码不能为空', trigger: 'blur' },
    						{
           min: 4,max: 18, message: '密码长度需要在4-18位之间', trigger: 'blur' },
    					]
    				}
    			}
    		},
    		methods:{
          
    			
    		}
    	}
    
    </script>
    
    <style scoped>
    .dialog-footer button:first-child {
          
      margin-right: 10px;
    }
    </style>

效果图：  
![在这里插入图片描述][791bbe8d7484407eb4dcac4cef522db6.png]

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

![在这里插入图片描述][ff5e77820bc142f89cbb5a3a0436232f.jpeg_pic_center]

[924e49429f4b436f99a2a9d6a55d9a9e.webp_pic_center]: https://img-blog.csdnimg.cn/924e49429f4b436f99a2a9d6a55d9a9e.webp#pic_center
[https_element-plus.gitee.io_zh-CN_guide_installation.html]: https://element-plus.gitee.io/zh-CN/guide/installation.html
[e3682e963103413685fec918d7b4df8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4de01400a4a64557af0fab80b9ead43e.png
[174974c774fd4404bf9e98e0269cef2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ce64ae75a9d94df4953132ef92773b14.png
[c8f6d627b8a34155949b64f2f79d9e58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/e8165e56e5524eec9d566c27ee93a38a.png
[29617fb1e0374030b7dcf481b8f85f13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8509b704f04145a7a984bddf95cae77a.png
[553a651d81e549cab759d01abd98bb7d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6002f7d98502445e8ca801a1aaa0799c.png
[62b04a1a946c4f94a6c6c0adad9d4d3a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/224afcfc3fef46cfb13fe3118eb5bbe5.png
[44a4e8db41b240d686b90a08ca2d5090.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bd20c177e5964646b3da96ffd8fd95d1.png
[791bbe8d7484407eb4dcac4cef522db6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/410a08dd36ff4d3b968898bea449a1d6.png
[ff5e77820bc142f89cbb5a3a0436232f.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/93c4e7a007b24df58b08e5808f036915.jpeg