前言
之前看了基于vue2攻谁、scss躏嚎、vuex逼泣、webpack等實(shí)現(xiàn)的餓了嗎代碼（https://github.com/bailicangdu/vue2-elm）谤专，想用vue3堡牡、scss、pinia复局、vite復(fù)現(xiàn)一遍冲簿。
vite創(chuàng)建vue3項(xiàng)目
找到要?jiǎng)?chuàng)建項(xiàng)目的文件夾，進(jìn)入dos界面亿昏，然后按以下步驟創(chuàng)建vue3項(xiàng)目峦剔。
image.png
打開(kāi)項(xiàng)目，在Terminal輸入命令安裝scss
npm install sass
提示框 alert.vue
首先編寫(xiě)公共部分的提示框角钩。
image.png
template
首先是alert.vue的結(jié)構(gòu)
<template>
<div class="alert_container"> // 提示框的容器吝沫，占滿整個(gè)屏幕
<section class="tip_text_container">
<div class="tip_icon"> // 提示圖標(biāo)，用css畫(huà)的圓圈和感嘆號(hào)
<span></span>
<span></span>
</div>
<p class="tip_text">{{alertText}}</p> // 具體提示內(nèi)容递礼，從父組件得到
<div class="confirm" @click="closeTip">確認(rèn)</div> //點(diǎn)擊事件：子組件向父組件傳遞關(guān)閉提示框事件
</section>
</div>
</template>
js
主要是獲取父組件傳遞的提示信息alertText和向父組件傳遞關(guān)閉信息的點(diǎn)擊事件
<script>
export default {
data:() => ({}),
props:['alertText'],
methods:{
closeTip(){
// 子組件向父組件傳遞關(guān)閉提示框事件
this.$emit('closeTip')
}
}
}
</script>
css
項(xiàng)目需要編寫(xiě)一些公共css惨险，所以用到了mixin。
mixin 提供了一種非常靈活的方式脊髓，來(lái)分發(fā) Vue 組件中的可復(fù)用功能辫愉。一個(gè) mixin 對(duì)象可以包含任意組件選項(xiàng)。 當(dāng)組件使用 mixin 對(duì)象時(shí)将硝，所有 mixin 對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)一屋。
https://blog.csdn.net/weixin_42709536/article/details/124859793
mixin.scss
$blue: #3190e8;
$bc: #e4e4e4;
$fc:#fff;
// 背景圖片地址和大小
@mixin bis($url) {
background-image: url($url);
background-repeat: no-repeat;
background-size: 100% 100%;
}
@mixin borderRadius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
//定位全屏
@mixin allcover{
position:absolute;
top:0;
right:0;
}
//定位上下左右居中
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//定位上下居中
@mixin ct {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
//定位左右居中
@mixin cl {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
//寬高
@mixin wh($width, $height){
width: $width;
height: $height;
}
//字體大小、行高袋哼、字體
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
font: #{$size}/#{$line-height} $family;
}
//字體大小冀墨，顏色
@mixin sc($size, $color){
font-size: $size;
color: $color;
}
//flex 布局和 子元素 對(duì)其方式
@mixin fj($type: space-between){
display: flex;
justify-content: $type;
}
alertTip.vue的css
<style lang="scss" scoped>
@import "../../style/mixin"; // 記得引用mixin.scss
// 提示框出現(xiàn)的動(dòng)畫(huà)
@keyframes tipMove {
0% {transform: scale(1)}
35% {transform: scale(.8)}
70% {transform: scale(1.1)}
100% {transform: scale(1)}
}
// 提示框占滿整個(gè)屏幕
.alert_container{
position: fixed; // 固定定位：https://blog.csdn.net/qq_47373340/article/details/124063680
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200; // 設(shè)置元素堆疊：https://blog.csdn.net/weixin_45092437/article/details/126493240
background-color: rgba(0, 0, 0, 0.1); // 原項(xiàng)目提示框背景沒(méi)有顏色，太丑了
}
.tip_text_container{
position: absolute;
top: 50%;
left: 50%;
// alertTip的瞄點(diǎn)在提示框的左上角
margin-top: -6rem; // rem:https://blog.csdn.net/qq_48613863/article/details/124060996
margin-left: -6rem;
width: 12rem;
animation: tipMove .4s;
background-color: rgba(255,255,255,1);
padding-top: .6rem;
display: flex; // flex:https://blog.csdn.net/weixin_41044151/article/details/114071215
// justify-content和align-items：https://blog.csdn.net/include_IT_dog/article/details/100065515
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 0.25rem;
// 繪制icon的外圈
.tip_icon{
@include wh(3rem,3rem);
border: 0.15rem solid #f8cb86;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// 繪制感嘆號(hào)
// nth-of-type:https://blog.csdn.net/weixin_44051815/article/details/122214807
span:nth-of-type(1){
@include wh(.12rem,1.5rem);
background-color: #f8cb86;
}
span:nth-of-type(2){
@include wh(.2rem, .2rem);
border: 1px;
border-radius: 50%;
margin-top: .2rem;
background-color: #f8cb86;
}
}
.tip_text{
@include sc(.7rem, #333);
line-height: .9rem;
text-align: center;
margin-top: .8rem;
padding: 0 .4rem;
}
.confirm{
@include sc(.8rem, #fff);
font-weight: bold;
margin-top: .8rem;
background-color: #4cd964;
width: 100%;
text-align: center;
line-height: 1.8rem;
border: 1px;
border-bottom-left-radius: .25rem;
border-bottom-right-radius: .25rem;
}
}
</style>
觸發(fā)alertTip.vue
項(xiàng)目沒(méi)完成涛贯，我是在初始的App.vue觸發(fā)的alertTip.vue诽嘉。
js
<script>
import HelloWorld from './components/HelloWorld.vue';
import AlertTip from "./components/common/alertTip.vue"; // 導(dǎo)入alertTip.vue
export default {
data:()=> ({
showAlert:false, // 是否顯示提示框
alertText:"測(cè)試" // 向提示框傳遞的提示信息
}),
components: {AlertTip}, // 導(dǎo)入子組件記得寫(xiě)components
methods:{
closeTip(){ // 關(guān)閉提示框
this.showAlert = false
}
}
}
</script>
template
<template>
<button @click="showAlert=true">提示框</button>
<alert-tip v-if="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
</template>
效果
image.png
