Vue3实现 饿了吗 笔记1——alert.vue

前言

之前看了基于vue2、scss、vuex、webpack等实现的饿了吗代码(https://github.com/bailicangdu/vue2-elm),想用vue3、scss、pinia、vite复现一遍。

vite创建vue3项目

找到要创建项目的文件夹,进入dos界面,然后按以下步骤创建vue3项目。


image.png

打开项目,在Terminal输入命令安装scss

npm install sass

提示框 alert.vue

首先编写公共部分的提示框。


image.png

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>

效果

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,230评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,261评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,089评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,542评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,542评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,544评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,922评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,578评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,816评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,576评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,658评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,359评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,920评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,859评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,381评论 2 342

推荐阅读更多精彩内容