Vue（四）-cnblog

Vue（四）

1. 生命周期

• 一个组件从（创建->运行->销毁的整个阶段）

• 生命周期函数：vue框架的内置函数，会随着组件的生命周期，自动按次序执行

• 注意点

生命周期强调整个时间段

生命周期函数指时间点

1.1 示例：Test组件的生命周期函数

<template>
  <div>
    <h3 class="myh3">Test 组件 {{username}}</h3>
    <button @click="username+='-'"></button>
  </div>
</template>
 
<script>
export default {
 
    props:{
        init:{
            default :0
        }
    },
    data(){
        return {
            username:'zhangsan',
            age:18
        }
    },
 
    methods: {
        show(){
            console.log(666);
        },
 
        getBooks(){
            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 调用xhr对象的open函数，指定请求方式和url地址
 
            xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
 
            // 调用xhr的send函数
 
            xhr.send();
 
            //监听onreadystatechange
 
            // 使用箭头函数来使this指向为vue实例，而非xhr对象
            xhr.onreadystatechange = ()=> {
                // 判断xhr的请求状态(readyState)和服务器的响应状态（status），
                // 固定写法，与返回信息里面的status不是同一个值
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 打印返回的信息
                    console.log(xhr.responseText);
                    console.log(this);
                }
            }
        }
    },
 
    // 生命周期函数beforeCreate（在创建之前，methods，data，props都不可用）
    beforeCreate () {
        // console.log(this.init);
        // console.log(this.username);
        // this.show();
    },
 
    // 生命周期函数created() 此时初始化了methods，data，props，这些都可用了
    // 这个阶段非常重要，通常在这个阶段发起ajax请求来获得数据，渲染页面
 
    created () {
        console.log(this.username);
        this.show();
        console.log(this.init);
        this.getBooks();
    },
 
    // 此时在内存中已经创建好了ui结构，但还没有渲染到页面中（没有替换掉el控制的区域）
    beforeMount(){
        console.log("beforeMount");
        let dom=document.querySelector(".myh3");
 
        console.log(dom);
    },
 
    // 此时内存的ui结构已经发生了替换，可以操作dom了
    mounted () {
        console.log("mounted");
        let dom=document.querySelector(".myh3");
 
        console.log(dom);
    },
 
    /** 
     * 组件创建阶段已经完成
     * 开始进入运行阶段
    */
 
   // 当数据发生变化时，会更新数据，当ui结构还来不及渲染
   beforeUpdate(){
    //    console.log('beforeUpdate');
    //    console.log(this.username);
    //    let user=document.querySelector(".myh3");
 
    //    console.log(user.innerHTML);
   },
 
   // 此时数据的值与dom的值都是最新的状态，如果想要操作最新的dom，在这阶段
 
   updated(){
       console.log('updated');
       console.log(this.username);
       let user=document.querySelector(".myh3");
 
       console.log(user.innerHTML);
   }
}
</script>
 
<style lang="less" scoped>
 
    div{
        background-color: blue;
    }
    h3{
        background-color: pink;
    }
</style>

2.组件之间的信息传递

2.1 父向子传递数据

• 原理

使用自定义属性，子组件使用自定义属性，父组件使用v-bind来创建数据

• 子组件（Left）

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <p>msg的值为{{msg}}</p>
    <p>user的值为{{user}}</p>
  </div>
</template>
 
<script>
export default {
 
  // 定义自定义组件来接收 父组件传递过来的值
 
  props:['msg','user']
}
</script>
 
<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
 

• 父组件

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
 
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 将父组件的值传递给子组件 -->
      <Left :msg="message" :user="userinfo"></Left>
    </div>
  </div>
</template>
 
<script>
 
// 引入子组件 left
 
import Left from '@/components/Left.vue'
export default {
 
    data(){
      return {
        message:'hello vue',
        userinfo:{
          name:'zhangsan',
          age:19
        }
      }
    },
 
    components: {
      // 注册子组件
      Left
    }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

2.2 子组件向父组件传递信息

• 原理

使用自定义的事件

• 子组件

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <button @click="add"></button>
  </div>
</template>
 
<script>
export default {
  // 子组件向父组件传递值
  data(){
    return {
      count:0
    }
  },
 
  methods: {
    
    // 使用自定义事件
 
    add(){
      this.count+=1;
 
      // 数据变化触发自定义事件
 
      // emit 方法用于调用自定义事件
 
      // 参数说明：第一个参数：自定义的事件，第二个参数触发该事件传递的参数
      this.$emit('numchange', this.count);
    }
  }
}
</script>
 
<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>
 

• 父组件

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
 
    <p>{{count}}</p>
 
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 将父组件的值传递给子组件 -->
      <Left :msg="message" :user="userinfo"></Left>
 
      <!-- 将子组件的值获取到 -->
 
      <!-- 绑定自定义事件来获取元素 -->
 
      <!-- numchange触发时（Right组件emit传递了一个参数），getCount回调函数 -->
      <Right @numchange="getCount"></Right>
 
      
    </div>
  </div>
</template>
 
<script>
 
// 引入子组件 left
 
import Left from '@/components/Left.vue'
 
// 引入子组件 right
 
import Right from '@/components/Right.vue'
export default {
 
    data(){
      return {
        message:'hello vue',
        userinfo:{
          name:'zhangsan',
          age:19
        },
        count:0
      }
    },
 
    components: {
      // 注册子组件
      Left,
      Right
    },
 
    methods: {
      getCount(val){
        this.count=val;
      }
    }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 图解

2.3 兄弟组件之间的数据共享

• vue2.x中，兄弟组件之间的数据共享方案是EventBus

• 图解

2.4 EventBus使用步骤

1. 创建eventBus.js模块,向外共享一个Vue实例对象
2. 数据发送方：调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
3. 数据接收方：调用bus.$on('事件名称'，事件处理函数)方法注册一个自定义事件

• left组件

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <p>msg的值为{{msg}}</p>
    <p>user的值为{{user}}</p>
 
    <!-- 定义一个发送数据的按钮 -->
 
    <button @click="send">发送</button>
  </div>
</template>
 
<script>
 
//发送方：导入eventBus.js  
 
import bus from '@/components/eventBus.js'
 
export default {
 
  // 定义自定义组件来接收 父组件传递过来的值
 
  props:['msg','user'],
 
  // 定义要发送的数据
 
  data(){
    return {
      poem:'我真的想特效，取了个带来快乐'
    }
  },
 
  methods: {
    send(){
      // 发送数据
      bus.$emit('share', this.poem);
    }
  }
}
</script>
 
<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
 

• eventBus.js

// 导入vue框架
 
import Vue from 'vue'
 
// 向外暴露
 
export default new Vue()

• right组件

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <button @click="add"></button>
    <p>{{ poemFromLeft}}</p>
  </div>
</template>
 
<script>
 
// 导入 eventBus.js
 
import bus from "@/components/eventBus.js"
export default {
  // 子组件向父组件传递值
  data(){
    return {
      count:0,
      // 从left发来的数据
 
      poemFromLeft:''
    }
  },
 
  methods: {
    
    // 使用自定义事件
 
    add(){
      this.count+=1;
 
      // 数据变化触发自定义事件
 
      // emit 方法用于调用自定义事件
 
      // 参数说明：第一个参数：自定义的事件，第二个参数触发该事件传递的参数
      this.$emit('numchange', this.count);
    }
  },
 
  // 在created生命周期函数中绑定bus
 
  created () {
    bus.$on('share',(val)=>{
 
      // left的值给poemFromLeft
 
      this.poemFromLeft=val
    })
  }
}
</script>
 
<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>
 

• 效果图

3. ref的使用

• ref引用

在不依赖jQuery的情况下，获取DOM元素或组件的引用

每个vue组件实例上，都包含$refs内置对象，存储默认引用，默认为空对象

示例:组件修改样式

<template>
  <div class="app-container">
    <h1 ref="myh12">App 根组件</h1>
    <hr />
 
    <button @click="changeRed"> 变红</button>
 
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
    </div>
  </div>
</template>
 
<script>
export default {
 
 
  methods: {
    changeRed(){
      // 获取ref引用的，来修改样式
 
      console.log(this.$refs);
 
      this.$refs.myh12.style.color='red';
    }
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

示例：操作组件标签

• left组件

<template>
  <div class="left-container">
    <h3>Left 组件-----{{count}}</h3>
 
    <!-- 加一按钮 -->
 
    <button @click="count+=1">加一按钮</button>
    <button @click="reset">重置</button>
  </div>
</template>
 
<script>
export default {
 
  data(){
    return {
      count:0
    }
  },
 
  methods:{
    reset(){
      this.count=0
    }
  }
}
</script>
 
<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
 

• App组件（使用了left组件）

<template>
  <div class="app-container">
    <h1 ref="myh12">App 根组件</h1>
    <hr />
 
    <button @click="changeRed"> 变红</button>
 
    <button @click="resetLeft">重置子组件的count值</button>
 
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
 
      <!-- 给left添加ref属性 -->
      <Left ref="myleft"></Left>
    </div>
  </div>
</template>
 
<script>
// 引用left组件
import Left from "@/components/Left.vue"
export default {
  components:{
    // 注册left组件
    Left,
  },
  methods: {
    changeRed(){
      // 获取ref引用的，来修改样式
 
      console.log(this.$refs);
 
      this.$refs.myh12.style.color='red';
    },
 
    // 重置子组件的count值
 
    resetLeft(){
      // 获取到left组件实例，操作refs
      this.$refs.myleft.reset()
    }
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

示例：按需展示输入框

<template>
  <div class="app-container">
    <h1 ref="myh12">App 根组件</h1>
    <hr />
 
    <button @click="changeRed"> 变红</button>
 
    <button @click="resetLeft">重置子组件的count值</button>
 
    <hr>
 
    <!-- 按需展示按钮和输入框 -->
 
    <input type="text" v-if="inputVisible" @blur="toggleIpt2" ref="iptRef">
    <button @click="toggleIpt" v-else>展示输入框</button>
 
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
 
      <!-- 给left添加ref属性 -->
      <Left ref="myleft"></Left>
    </div>
  </div>
</template>
 
<script>
// 引用left组件
import Left from "@/components/Left.vue"
export default {
  components:{
    // 注册left组件
    Left,
  },
  methods: {
    changeRed(){
      // 获取ref引用的，来修改样式
 
      console.log(this.$refs);
 
      this.$refs.myh12.style.color='red';
    },
 
    // 重置子组件的count值
 
    resetLeft(){
      // 获取到left组件实例，操作refs
      this.$refs.myleft.reset()
    },
 
    toggleIpt(){
      // 点击展示按钮，显示输入框
      this.inputVisible=true
 
      // 并获得焦点
 
      // 因为这个为单线程执行，根据生命周期，数据虽然更新了，但DOM结构还来不及更新，所以会报错
      // this.$refs.iptRef.focus();
 
      // 使用this.$nextTick(cb) 方法将上述语句的执行推迟到dom已经更新的时间点
 
      this.$nextTick(()=>{
        this.$refs.iptRef.focus();
      })
    },
 
    toggleIpt2(){
      // 失去焦点，隐藏输入框
      this.inputVisible=false
    }
  },
 
  data(){
    return {
      inputVisible:false
    }
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

注意点（this.$nextTick(cb)）

• 在数据update是，数据update了，而dom结构还没有，需要使用this.$nextTick(cb)将执行的时间点推迟

4. 数组的every方法

• arr.every(function(){})

判读数组中的每个元素是否都满足同一个条件

示例

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        var arr = [{
            id: 1,
            name: "zhangsan",
            status: true
        }, {
            id: 2,
            name: "lisi",
            status: false
        }, {
            id: 3,
            name: "wangwu",
            status: true
        }]
 
        // every 方法，判断数组的每个元素的值都满足条件
 
        const result = arr.every(function(item) {
            return item.status
        })
 
        console.log(result);
    </script>
</body>
 
</html>

• 判读状态（status）是否都为true

5. 数组的reduce方法（累加器）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script>
        var arr = [{
            id: 1,
            name: "apple",
            status: true,
            count: 1,
            price: 5
        }, {
            id: 2,
            name: "banner",
            status: false,
            count: 1,
            price: 10
        }, {
            id: 3,
            name: "tomato",
            status: true,
            count: 2,
            price: 20
        }]
 
        // 计算status为true的水果的总价
 
        // 使用reduce方法，累加器
 
        // reduce((累计的结果，累加项)=>{},累加的初始值)
 
        const result = arr.filter(item => item.status).reduce((amt, item) => {
            return amt += item.count * item.price;
        }, 0)
 
        console.log(result);
    </script>
</body>
 
</html>

• 效果图

6.购物车案例

• app.vue

<template>
  <div class="app-container">
    <Header title="购物车案例"></Header>
    <!-- <h1>App 根组件</h1> -->
 
    <!-- 循环渲染Goods组件 -->
 
 
    <!-- 父向子（goods）传递list数组的值 -->
    <Goods 
    v-for="item in list" 
    :key="item.id"
    :id="item.id" 
    :goods_title="item.goods_name" 
    :goods_price="item.goods_price" 
    :pic="item.goods_img" 
    :goods_status="item.goods_state"
    :goods_count="item.goods_count"
    @changeStatus="getNewStatus"></Goods>
 
    <Footer :fullS="fullS" :amountPrice="amtPrice" :allN="allNum" @full-change="getFullState"></Footer>
  </div>
</template>
 
<script>
 
// 根组件中引入头部组件
import Header from '@/components/Header/Header.vue'
// 导入axios
import axios from 'axios'
 
// 导入goods组件
 
import Goods from '@/components/Goods/Goods.vue'
 
// 导入底部结算栏组件
 
import Footer from '@/components/Footer/Footer.vue'
 
// 导入eventBus 组件
 
import bus from "@/components/eventBus.js"
export default {
 
 
  data(){
    return {
      list:[],
      
    }
  },
 
  // 使用计算属性来实现全选
 
  computed:{
    // 全选状态
    fullS(){
      return this.list.every((item)=>item.goods_state);
    },
 
    // 已经选中商品的价格
 
    amtPrice(){
      return this.list.filter((item)=>item.goods_state).reduce((total,item)=>{
        return total+=item.goods_count*item.goods_price;
      },0)
    },
 
    // 选中的所有商品数
    allNum(){
      return this.list.filter((item)=>item.goods_state).reduce((cnt,item)=>{
        return cnt+=item.goods_count;
      },0)
    }
  },
  // 注册组件
 
  components:{
    Header,
    Goods,
    Footer
  },
 
  methods:{
 
    // 定义发起ajax请求的函数
 
    async initCartList(){
      const {data:res}=await axios.get("https://www.escook.cn/api/cart")
 
      // console.log(res);
 
      // 将res的数据转存到data中
      if(res.status===200){
        this.list=res.list;
      }
 
      
    },
 
    // 获取最新的复选框的状态
    getNewStatus(val){
      
 
      this.list.some((item)=>{
        if(item.id===val.id){
          item.goods_state=val.state
        }
      })
 
      
        
    },
 
    // 获取结算栏的组件信息
 
    getFullState(val){
      this.list.forEach((item)=>{
        item.goods_state=val
      })
    }
 
 
  },
 
  // created生命周期函数调用axios请求
 
  created () {
    this.initCartList()
 
    // 接收count组件发送过来的数据
 
    bus.$on('share',(val)=>{
      this.list.some((item)=>{
        if(item.id===val.id){
 
          item.goods_count=val.value
          return true
        }
      })
    })
  }
}
</script>
 
<style lang="less" scoped>
.app-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
 

• goods组件

<template>
  <div class="goods-container">
    <!-- 左侧图片 -->
    <div class="thumb">
      <div class="custom-control custom-checkbox">
        <!-- 复选框 -->
        <!-- 复选框绑定监听事件，change事件， -->
        <!-- 选中状态发生变化时，子组件向父组件传值，改变list数组中的数据 -->
        <!-- lable标签需要修改id，实现图片与复选框的对应 -->
        <input type="checkbox" class="custom-control-input" :id="'cb'+id" :checked="goods_status" @change="btn_change"/>
        <label class="custom-control-label" :for="'cb'+id">
          <!-- 商品的缩略图 -->
          <img :src="pic" alt="" />
        </label>
      </div>
    </div>
    <!-- 右侧信息区域 -->
    <div class="goods-info">
      <!-- 商品标题 -->
      <h6 class="goods-title">{{goods_title}}</h6>
      <div class="goods-info-bottom">
        <!-- 商品价格 -->
        <span class="goods-price">￥{{goods_price}}</span>
        <!-- 商品的数量 -->
        <Counter :cnt="goods_count" :id="id"></Counter>
      </div>
    </div>
  </div>
</template>
 
<script>
 
// 使用count组件
 
import Counter from '@/components/Counter/Counter'
export default {
 
  components:{
    Counter
  },
 
  // 自定义属性，接收父来的值
  props:{
    goods_title:{
      type:String,
      default:''
    },
 
    pic:{
      type:String,
      default:''
    },
 
    goods_price:{
      type:Number,
      default:0
    },
 
    goods_status:{
      type:Boolean,
      default:false
    },
 
    id:{
      type:Number,
      required:true
    },
 
    goods_count:{
      type:Number,
      default:1
    }
  },
 
  methods:{
    // 复选框按钮状态变化，通过自定义事件来修改父的list数组中的状态
    btn_change(e){
      // 向父组件传值
      // console.log(this.id);
      this.$emit('changeStatus', {state:e.target.checked,id:this.id});
    }
  }
 
}
</script>
 
<style lang="less" scoped>
.goods-container {
  + .goods-container {
    border-top: 1px solid #efefef;
  }
  padding: 10px;
  display: flex;
  .thumb {
    display: flex;
    align-items: center;
    img {
      width: 100px;
      height: 100px;
      margin: 0 10px;
    }
  }
 
  .goods-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .goods-title {
      font-weight: bold;
      font-size: 12px;
    }
    .goods-info-bottom {
      display: flex;
      justify-content: space-between;
      .goods-price {
        font-weight: bold;
        color: red;
        font-size: 13px;
      }
    }
  }
}
</style>
 

• Footer组件

<template>
  <div class="footer-container">
    <!-- 左侧的全选 -->
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="cbFull" :checked="fullS" @change="fullState"/>
      <label class="custom-control-label" for="cbFull">全选</label>
    </div>
 
    <!-- 中间的合计 -->
    <div>
      <span>合计：</span>
      <span class="total-price">￥{{ amountPrice.toFixed(2) }}</span>
    </div>
 
    <!-- 结算按钮 -->
    <button type="button" class="btn btn-primary btn-settle">结算（{{ allN }}）</button>
  </div>
</template>
 
<script>
 
 
export default {
 
  props:{
    // 全选状态
    fullS:{
      type:Boolean,
      default:true
    },
    // 总价
    amountPrice:{
      type:Number,
      default:0
    },
 
    // 总数量
    allN:{
      type:Number,
      default:1
    }
  },
 
  methods: {
    // 子向父传值，check状态
    fullState(e){
      this.$emit('full-change',e.target.checked)
    }
  }
}
</script>
 
<style lang="less" scoped>
.footer-container {
  font-size: 12px;
  height: 50px;
  width: 100%;
  border-top: 1px solid #efefef;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
 
.custom-checkbox {
  display: flex;
  align-items: center;
}
 
#cbFull {
  margin-right: 5px;
}
 
.btn-settle {
  height: 80%;
  min-width: 110px;
  border-radius: 25px;
  font-size: 12px;
}
 
.total-price {
  font-weight: bold;
  font-size: 14px;
  color: red;
}
</style>
 

• Counter组件

<template>
  <div class="number-container d-flex justify-content-center align-items-center">
    <!-- 减 1 的按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="sub">-</button>
    <!-- 购买的数量 -->
    <span class="number-box">{{cnt}}</span>
    <!-- 加 1 的按钮 -->
    <button type="button" class="btn btn-light btn-sm" @click="add">+</button>
  </div>
</template>
 
<script>
 
// 导入eventBus
 
import bus from "@/components/eventBus.js"
 
export default {
 
  props:{
    // goods的单个商品数量
    cnt:{
      type:Number,
      default:1
    },
 
    // 单个商品的id
    id:{
      type:Number,
      required:true
    }
  },
 
  methods: {
    // 商品数量加1，发送给app组件
    add(){
      bus.$emit('share',{value:this.cnt+1,id:this.id})
    },
 
    // 商品数量减一，发送给app组件
    sub(){
      if(this.cnt-1<=0){
        return
      }
 
      bus.$emit('share',{value:this.cnt-1,id:this.id})
    }
  }
}
</script>
 
<style lang="less" scoped>
.number-box {
  min-width: 30px;
  text-align: center;
  margin: 0 5px;
  font-size: 12px;
}
 
.btn-sm {
  width: 30px;
}
</style>
 

• Header组件

<template>
  <div class="header-container">{{title}}</div>
</template>
 
<script>
export default {
  props:{
    title:{
      default:'标题',
      type:String
    }
  }
}
</script>
 
<style lang="less" scoped>
.header-container {
  font-size: 12px;
  height: 45px;
  width: 100%;
  background-color: #1d7bff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
}
</style>
 

• 图解