Vant 中的遮罩(van-overlay)不占满整个屏幕的用法

最新推荐文章于 2024-08-31 15:22:23 发布

原创

最新推荐文章于 2024-08-31 15:22:23 发布 · 6.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

这个博客展示了如何使用Vue.js来实现一个简单的组件显示与隐藏功能。通过点击按钮触发`showMask`方法，切换变量`show`的值，从而控制`van-overlay`组件的显示与隐藏。页面布局包括一个粉色背景的头部和一个包含多个欢迎信息的列表。样式方面，使用了固定定位、内联样式以及自定义类来调整元素的外观。

效果如下：

代码如下：

<template>
  <div class="wrapHeader">
      <div class="buttonClick" @click="showMask">显示</div>
      <van-overlay :show="show" @click="show = false">
          <ul class="ulLi">
              <li>你好啊</li>
              <li>欢迎欢迎</li>
              <li>欢迎欢迎</li>
              <li>欢迎欢迎</li>
          </ul>
      </van-overlay>
  </div>

</template>

<script>
  export default {
    data () {
      return {
          show:false,
      };
    },
    methods: {
        showMask(){
            this.show = !this.show;
        }
    },
    watch: {}
  }

</script>

<style scoped&