This is the 19th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

preface

Hello, everyone. In the previous article, we used Vue3.0 to implement a super simple voting function. Although the function was realized and achieved the purpose of consolidating vue3.0 knowledge, the page did not add any style or carry out any UI design, so the page was very ugly. The front end, as the face of a project, is absolutely indispensable for styling and UI design, so this article will build on the previous one by adding styles and referencing some new UI component libraries. First look at the optimization before and after the effect sketch, the actual page looks better

element-plus

In order to write as little as possible, we use the UI component library of ElementUi in this case. We use VUe3.0, so the corresponding ElementUI needs to use the component library of Element-Plus that supports version 3.0. Here are the specific implementation steps:

  • Install the component library using NPM or YARN: NPM install element-plus or YARN add element-plus
  • Import the component library style file from main.js: import ‘element-plus/dist/index.css’
  • Because we are using only a few component libraries, we are importing on demand components as they come in. Import on demand. Element officially offers two ways to import
    • Automatic import: is also the official recommendation, but according to the official steps of a meal down operation found and not, give up decisively
    • Manual import: This can be implemented according to the official steps no problem, and finally honest use of this way
  • Our buttons will use ICONS in elementUI, so we will also need to install our ICONS library: NPM install @element-plus/ ICONS (don’t do this now, look for the ICONS later)

Avoid two potholes

  • Pit 1: I am used to operating the command line in vscode’s Terminal. However, when I install the icon library in Terminal according to element’s official instructions, I cannot install the icon library and always fail to recognize other errors. After different attempts, it was found that the installation was successful by switching to the CMD command line of the system
  • Pit 2: When using the icon button, the official example looks like this:
//javascript
	<script setup>
		import { Check } from '@element-plus/icons' 
	</script>
Copy the code
<! --html-->
<el-button type='success' :icon="Check" circle />
Copy the code

There was nothing wrong with the operation, it was the icon button we wanted, but somehow we had to add a setup to the script tag, which made all the logic in the original script invalid, so introducing a button made all the original functions invalid, which was obviously not worth the loss. If I take the setup out of the way and it works, the style of the button is gone. After some trial and error, a solution was finally found:

  • Delete the < script setup > tag completely and import the icon library into our script
  • If you want to use ICONS as components, you need to register the imported ICONS in components and then use them directly as labels in the template
  • If you want to use an icon as a reactive property, you must import the icon and expose it like any other reactive property through a return in the setup function before it can be used as a property in the template
  • Use as a component
// Used as a component
import { Check } from '@element-plus/icons' 
export default{
	components:{Check}
}
Copy the code
<el-icon><Check /></el-icon>
Copy the code
  • Used as a reactive property
import { Check } from '@element-plus/icons' 
export default {
	setup(){
		// ...
		return{
			Check
		}
	}
}
Copy the code
<el-button type='success' :icon="Check" circle />
Copy the code

Optimize voting with the UI library

Now that we’re all set, let’s get to work on our voting mini-case.

  • First, we use the card component in the component library to wrap all the content of our page, and put the voting title in the header of card
  • Yes, No, and Yes are still wrapped in three divs, but we need to add some styles manually
  • A sub-div is nested in the three divs, and the width and background color of the sub-div are controlled by calculating attributes. The purpose is to let us see the simultaneous changes of numbers and figures more intuitively
  • Replace the original two primitive buttons with elementui’s el-Button component with type attributes of ‘success’ and ‘Danger’ and ICONS of ‘Check’ and ‘Close’. Note: An icon must be exposed via a return from the setup method after import to take effect
  • Finally, we need to add four calculation properties in the setup function: supWidth, oppWidth, supBgc, and oppBgc to control the width and background color of the support and opposition numbers, respectively. Don’t forget to expose them by return before using them.

Let’s take a look at the modified code

  • Main.js adds style code
import 'element-plus/dist/index.css'
Copy the code
  • Vote. vue modification – Template section
<template>
	<div class="vote">
		<el-card class="box-card">
			<template #header>
				<h1>{{title}}</h1>				
			</template>
			<div class="sup item">
				<div class="child" :style="{width:supWidth, background:supBgc}">Support number: {{supCount}}/{{supCount+oppCount}}</div>
			</div>
			<div class="opp item">
				<div class="child" :style="{width:oppWidth, background:oppBgc}">{{supCount+oppCount}}</div>
			</div>
			<div class="sup item">
				<div class="child" :style="{width:supWidth, background:supBgc}">Support: {{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>
Copy the code
  • Vote. vue revamp – Styles section
.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;
}
Copy the code
  • Vote. vue modification – javascript section
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);
		// Support methods
		const support = () = > {
			supCount.value++; // Reactive variables declared by ref should be operated with dot value
		} 
		// Object to the method
		const oppose = () = > {
			oppCount.value++ // Reactive variables declared by ref should be operated with dot value
		}
		
		// Calculate attributes, calculate approval ratings
		const supRate = computed(() = >{
			let totalCount = supCount.value + oppCount.value;
			return totalCount === 0 ? 0 : (supCount.value/totalCount*100).toFixed(2); // Keep 2 decimal places
		});
		// the new section starts at ========================
		const supWidth = computed(() = >{
			let totalCount = supCount.value + oppCount.value;
			return supCount.value === 0 ? '100%' : `${(supCount.value/totalCount*100).toFixed(2)}%`; // keep 2 decimal places}); const oppWidth = computed(()=>{ let totalCount = supCount.value + oppCount.value; return oppCount.value === 0 ? '100%' : `${(oppCount.value/totalCount*100).toFixed(2)}% `; // Keep 2 decimal places
		});
		const supBgc = computed(() = >{
			return supCount.value === 0? "":"#67c23a"
		});
		const oppBgc = computed(() = >{
			return oppCount.value === 0? "":"#f56c6c"
		});
		//======================== End

		// Expose all members for use by the template
		return {
			supCount,
			oppCount,
			supRate,
			support,
			oppose,
			// New exposure
			Check,// ICONS need to be exposed here as responsive properties
			Close,// ICONS need to be exposed here as responsive properties
			supWidth,
			oppWidth,
			subBgc,
			oppBgc
		}
	}	
}
Copy the code

conclusion

In this article we have introduced a third-party component library, Element-Plus, to beautify our voting functionality. The introduction of Element-Plus also shared two small holes in the icon library installation and use process. After a lot of trial and suffering finally realized the beautification of the voting function, although it is only a super simple small function, because it is groping for optimization, so it also spent some time. This time to share here, like small partners welcome to like comments and attention oh!