前言
之前看了基于vue2、scss、vuex、webpack等实现的饿了吗代码(https://github.com/bailicangdu/vue2-elm),想用vue3、scss、pinia、vite复现一遍。
vite创建vue3项目
找到要创建项目的文件夹,进入dos界面,然后按以下步骤创建vue3项目。
打开项目,在Terminal输入命令安装scss
npm install sass
提示框 alert.vue
首先编写公共部分的提示框。
template
首先是alert.vue的结构
<template>
<div class="alert_container"> // 提示框的容器,占满整个屏幕
<section class="tip_text_container">
<div class="tip_icon"> // 提示图标,用css画的圆圈和感叹号
<span></span>
<span></span>
</div>
<p class="tip_text">{{alertText}}</p> // 具体提示内容,从父组件得到
<div class="confirm" @click="closeTip">确认</div> //点击事件:子组件向父组件传递关闭提示框事件
</section>
</div>
</template>
js
主要是获取父组件传递的提示信息alertText和向父组件传递关闭信息的点击事件
<script>
export default {
data:() => ({}),
props:['alertText'],
methods:{
closeTip(){
// 子组件向父组件传递关闭提示框事件
this.$emit('closeTip')
}
}
}
</script>
css
项目需要编写一些公共css,所以用到了mixin。
mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。 当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项。
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 布局和 子元素 对其方式
@mixin fj($type: space-between){
display: flex;
justify-content: $type;
}
alertTip.vue的css
<style lang="scss" scoped>
@import "../../style/mixin"; // 记得引用mixin.scss
// 提示框出现的动画
@keyframes tipMove {
0% {transform: scale(1)}
35% {transform: scale(.8)}
70% {transform: scale(1.1)}
100% {transform: scale(1)}
}
// 提示框占满整个屏幕
.alert_container{
position: fixed; // 固定定位:https://blog.csdn.net/qq_47373340/article/details/124063680
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 200; // 设置元素堆叠:https://blog.csdn.net/weixin_45092437/article/details/126493240
background-color: rgba(0, 0, 0, 0.1); // 原项目提示框背景没有颜色,太丑了
}
.tip_text_container{
position: absolute;
top: 50%;
left: 50%;
// alertTip的瞄点在提示框的左上角
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;
// 绘制感叹号
// 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>
触发alertTip.vue
项目没完成,我是在初始的App.vue触发的alertTip.vue。
js
<script>
import HelloWorld from './components/HelloWorld.vue';
import AlertTip from "./components/common/alertTip.vue"; // 导入alertTip.vue
export default {
data:()=> ({
showAlert:false, // 是否显示提示框
alertText:"测试" // 向提示框传递的提示信息
}),
components: {AlertTip}, // 导入子组件记得写components
methods:{
closeTip(){ // 关闭提示框
this.showAlert = false
}
}
}
</script>
template
<template>
<button @click="showAlert=true">提示框</button>
<alert-tip v-if="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
</template>