Vue.js实现动态遮罩层-CSDN博客

本文链接：https://blog.csdn.net/SeeUa/article/details/108278816

本文介绍如何在Vue.js中创建遮罩层，通过CSS变量实现动态效果，并利用v-show控制显示状态。同时，遮罩层背景颜色设定为rgba(0, 0, 0, 0.6)，并应用延迟动画。" 103070381,4918505,Python初学者入门体验与环境配置详解,"['Python', '编程入门', '数据类型', '环境配置', '编程基础']

利用css的变量
是使用- -开头的

  <li style="--line-index: 1;"></li>
  <li style="--line-index: 2;"></li>
  <li style="--line-index: 3.5;"></li>
  <li style="--line-index: 5.5;"></li>
  <li style="--line-index: 8;"></li>
  <li style="--line-index: 11;"></li>

打的popup包围晓得popup-info
利用v-show来做显示控制，要么一起出现，要么都不出现
遮罩层颜色为background-color: rgba(0, 0, 0, 0.6);

  <div class="popup" v-show="show">
      <div class="popup-info">

利用变量做延时动画

.loading > li {
  /* 这里看起来只设置了一个的样式，其实设置了.loading下面所有近邻的li因为他们在定义时
        style="--line-index:1"给他们设置了变量，所以到最后我们可以根据设置不同number值来
        设置不同的时间做到不用的li有不同的延时效果 */
  /* 我们在每一个li元素的行内元素都定义了一个css变量 --line-index大小不同 */
  /* 此时定一个动画延迟的变量--time 经过计算calc */
  --time: calc((var(--line-index) - 1) * 200ms);
  border-radius: 3px;
  width: 6px;
  height: 30px;
  background-color: #f66;
  /* 动画都是一个动画,但是开始的时间不同,就显示出这样的效果了 */
  animation: beat 1.5s ease-in-out var(--time) infinite;
}

<template>
  <div>
    <button type="default" @click="clickPopup">我是弹窗</button>
    <div class="popup" v-show="show">
      <div class="popup-info">
        <div>
          <ul class="loading flex">
            <li style="--line-index: 1;"></li>
            <li style="--line-index: 2;"></li>
            <li style="--line-index: 3.5;"></li>
            <li style="--line-index: 5.5;"></li>
            <li style="--line-index: 8;"></li>
            <li style="--line-index: 11;"></li>
          </ul>
        </div>
        <div class="popup-btn">
          <div>
            <button type="default" @click="cancel">取消</button>
          </div>
          <div>
            <button type="default" class="affirm" @click="affirm">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9998;
}
.popup-info {
  position: fixed;
  width: 950upx;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30upx;
  padding: 40upx;
  border-radius: 20upx;
//   background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}
.flex {
  display: flex;
  list-style: none;
  /* 设定li元素横向排列 */
}

.loading {
  width: 200px;
  height: 200px;
}

.loading > li {
  /* 这里看起来只设置了一个的样式，其实设置了.loading下面所有近邻的li因为他们在定义时
        style="--line-index:1"给他们设置了变量，所以到最后我们可以根据设置不同number值来
        设置不同的时间做到不用的li有不同的延时效果 */
  /* 我们在每一个li元素的行内元素都定义了一个css变量 --line-index大小不同 */
  /* 此时定一个动画延迟的变量--time 经过计算calc */
  --time: calc((var(--line-index) - 1) * 200ms);
  border-radius: 3px;
  width: 6px;
  height: 30px;
  background-color: #f66;
  /* 动画都是一个动画,但是开始的时间不同,就显示出这样的效果了 */
  animation: beat 1.5s ease-in-out var(--time) infinite;
}

.loading > li + li {
  margin-left: 5px;
}

@keyframes beat {
  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(0.5);
  }
}
</style>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    // 弹窗
    clickPopup() {
      console.log("打开弹窗");
      this.show = true;
    },
    // 点击弹窗取消
    cancel() {
      this.show = false;
    },
    // 点击弹窗确认
    affirm() {
      this.show = false;
    },
  },
};
</script>

vue遮罩层