【Vue3.0】使用elementui组件库element-plus美化投票功能

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

前言

小伙伴们大家好。前面一篇文章中我们利用vue3.0实现了一个超级简单的投票功能，虽然功能是实现了也达到了巩固vue3.0知识点的目的，但是页面没有添加任何样式也没有进行任何的UI设计，因此页面很丑。前端作为一个项目的门面是万万不能少了样式和ui设计的，因而本篇文章就将在上一篇的基础上添加一些样式，引用一些新的UI组件库。 先来看下优化前后的效果草图，实际页面更好看一点

element-plus

本着尽可能少的写样式我们本次案例中引用了elementui的UI组件库，我们用的是vue3.0，因此对应的elementui也需要用支持3.0版本的组件库 element-plus。下面梳理一下具体的实现步骤：

• 首先通过npm或者yarn安装组件库： npm install element-plus 或者 yarn add element-plus
• 在main.js文件中将组件库的样式文件导入：import 'element-plus/dist/index.css'
• 因为我们只是用到几个组件库，所以我们采用按需引入的形式，即用到哪些组件就导入哪些组件。按需导入，element官方为我们提供了两种导入方式
  • 自动导入：也是官方推荐的，但是按照官方的步骤一顿操作下来发现并不行，果断放弃
  • 手动导入：这个按照官方步骤即可实现没有问题，最后还是老老实实采用了这种方式
• 我们的按钮要用到elementui中的图标，因此还需要安装一下图标库：npm install @element-plus/icons （这步先别急着操作，看完后面的小坑后再操作）

避开两个小坑

• 坑1：我个人习惯在vscode的终端（Terminal）中去操作命令行，然而当我在Terminal中按照element官方的指导去安装图标库的时候，死活就是装不上总是报不识别的错误。在经过不同的尝试后，后来发现切换到系统自带的cmd命令行中就可以安装成功了
• 坑2：当我们在使用图标按钮的时候，官方给出的示例是这样的：

//javascript
	<script setup>
		import { Check } from '@element-plus/icons' 
	</script>
复制代码

<!--html-->
<el-button type='success' :icon="Check" circle />
复制代码

操作下来没有问题，是我们想要的图标按钮，然而不知为什么非要在script标签中添加一个setup，这就导致原来script中的逻辑代码全都无效了，因此引进了一个按钮导致原来的功能都失效了，这显然是得不偿失的。如果把setup去掉原来功能正常了，按钮的样式又没了。经过一番折腾和尝试，最终找到了一种解决办法：

• 把< script setup >这个标签全部删除，然后在我们原有的script中导入图标库
• 如果想把图标作为组件使用，则需把导入后的图标在components中进行注册，然后再在模板中直接作为标签使用
• 如果想把图标作为响应式属性使用，那么在导入图标后必须像其它响应式属性一样再通过setup函数中的return暴露出去，这样才可以在模板中作为属性使用

• 作为组件使用

// 作为组件使用
import { Check } from '@element-plus/icons' 
export default{
	components:{Check}
}
复制代码

<el-icon><Check /></el-icon>
复制代码

• 作为响应式属性使用

import { Check } from '@element-plus/icons' 
export default {
	setup(){
		// ...
		return{
			Check
		}
	}
}
复制代码

<el-button type='success' :icon="Check" circle />
复制代码

使用UI库优化投票功能

好了一切准备工作都做好了，那么我们就开始来改造我们的投票小案例吧。

• 首先我们采用组件库中的card组件将我们页面的全部内容进行包裹，投票标题放在card的header中
• 支持人数，反对人数和支持率仍然还是分别用三个div包裹，但是我们需要手动添加一些样式
• 在三个div中分别嵌套一个子div，子div的宽度和背景颜色通过计算属性来控制，目的是让我们更直观的看到数字和图的同时变化
• 将原来的两个原始button换成elementui的el-button组件，type属性分别为‘success’和‘danger’，icon分别为‘Check’和“Close”，注意：icon在导入后需要通过setup方法的return暴露出去才可生效
• 最后需要在setup函数中添加4个计算属性：supWidth，oppWidth、supBgc和oppBgc分别用于控制支持人数和反对人数的宽度和背景色，别忘了先通过return暴露出去再使用。

下面看看改造后的代码吧

• main.js添加样式代码

import 'element-plus/dist/index.css'
复制代码

• vote.vue改造 - 模板部分

<template>
	<div class="vote">
		<el-card class="box-card">
			<template #header>
				<h1>{{title}}</h1>				
			</tempalte>
			<div class="sup item">
				<div class="child" :style="{width:supWidth, background:supBgc}">支持人数：{{supCount}}/{{supCount+oppCount}}</div>
			</div>
			<div class="opp item">
				<div class="child" :style="{width:oppWidth, background:oppBgc}">反对人数：{{oppCount}}/{{supCount+oppCount}}</div>
			</div>
			<div class="sup item">
				<div class="child" :style="{width:supWidth, background:supBgc}">支持率：{{supRate}}%</div>
			</div>
		</el-card>
		<el-button type="success" :icon="Check" circle @click="support" />
		<el-button type="danger" :icon="Close" circle @click="oppose" />
	</div>
</template>
复制代码

• vote.vue改造 - 样式部分

.vote {
	width:100%;
	height:100%;
	& .item{
		margin-bottom:5px;
	}	
}

.child{
	width:100%;
	border-radius:5px;
}

.sup{
	width:100%;
	border:1px solid #67c23a;
	border-radius:5px;
	padding:2px;
}
.opp{
	width:100%;
	border:1px solid #f56c6c;
	border-radius:5px;
	padding:2px;
}
复制代码

• vote.vue改造 - javascript部分

import {ref,computed} from 'vue';
import {ElButton, ElCard } from 'element-plus'
import { Check, Close } from '@element-plus/icons'

export default {
	props:{
		title:{
			type:String,
			required:true
		}
	},
	components:{
		ElButton,
		ElCard,		
	},
	setup(){
		let supCount = ref(0);
		let oppCount = ref(0);
		// 支持方法
		const support = () => {
			supCount.value++; //用ref声明的响应式变量操作时应该用点value的形式
		} 
		//反对方法
		const oppose = () => {
			oppCount.value++ //用ref声明的响应式变量操作时应该用点value的形式
		}
		
		// 计算属性，计算支持率
		const supRate = computed(()=>{
			let totalCount = supCount.value + oppCount.value;
			return totalCount === 0 ? 0 : (supCount.value/totalCount*100).toFixed(2); // 保留2位小数
		});
		//========================新增部分开始
		const supWidth = computed(()=>{
			let totalCount = supCount.value + oppCount.value;
			return totalCount === 0 ? '100%' : `${(supCount.value/totalCount*100).toFixed(2)}%`; // 保留2位小数
		});
		const oppWidth = computed(()=>{
			let totalCount = supCount.value + oppCount.value;
			return totalCount === 0 ? '100%' : `${(oppCount.value/totalCount*100).toFixed(2)}%`; // 保留2位小数
		});
		const supBgc = computed(()=>{
			return supCount.value === 0? "":"#67c23a"
		});
		const oppBgc = computed(()=>{
			return oppCount.value === 0? "":"#f56c6c"
		});
		//========================新增部分结束

		//将所有成员暴露出去供模板使用
		return {
			supCount,
			oppCount,
			supRate,
			support,
			oppose,
			//新增暴露
			Check,//图标作为响应式属性需这里暴露出去
			Close,//图标作为响应式属性需这里暴露出去
			supWidth,
			oppWidth,
			subBgc,
			oppBgc
		}
	}	
}
复制代码

总结

本文我们引进了第三方组件库element-plus，用于美化我们的投票功能。在引入element-plus还分享了关于图标库安装和使用过程的两个小坑。经过一番的尝试和折腾终于实现了投票功能的美化，虽然只是一个超级简单的小功能，由于是摸索着进行优化所以也是耗费了一些时间的。 本次分享就到这里了，喜欢的小伙伴欢迎点赞评论加关注哦！