定位优化

quanyawei

2024-01-11 da25434b85fc5b4321c429bf95e719d00ec395bb

 uni_modules/uview-ui/components/u-overlay/u-overlay.vue

New file
@@ -0,0 +1,68 @@
<template>
   <u-transition
       :show="show"
       custom-class="u-overlay"
       :duration="duration"
       :custom-style="overlayStyle"
       @click="clickHandler"
   >
      <slot />
   </u-transition>
</template>

<script>
   import props from './props.js';

   /**
    * overlay 遮罩
    * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
    * @tutorial https://www.uviewui.com/components/overlay.html
    * @property {Boolean}         show      是否显示遮罩（默认 false ）
    * @property {String | Number}   zIndex      zIndex 层级（默认 10070 ）
    * @property {String | Number}   duration   动画时长，单位毫秒（默认 300 ）
    * @property {String | Number}   opacity      不透明度值，当做rgba的第四个参数 （默认 0.5 ）
    * @property {Object}         customStyle   定义需要用到的外部样式
    * @event {Function} click 点击遮罩发送事件
    * @example <u-overlay :show="show" @click="show = false"></u-overlay>
    */
   export default {
      name: "u-overlay",
      mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
      computed: {
         overlayStyle() {
            const style = {
               position: 'fixed',
               top: 0,
               left: 0,
               right: 0,
               zIndex: this.zIndex,
               bottom: 0,
               'background-color': `rgba(0, 0, 0, ${this.opacity})`
            }
            return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
         }
      },
      methods: {
         clickHandler() {
            this.$emit('click')
         }
      }
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";
     $u-overlay-top:0 !default;
     $u-overlay-left:0 !default;
     $u-overlay-width:100% !default;
     $u-overlay-height:100% !default;
     $u-overlay-background-color:rgba(0, 0, 0, .7) !default;
   .u-overlay {
      position: fixed;
      top:$u-overlay-top;
      left:$u-overlay-left;
      width: $u-overlay-width;
      height:$u-overlay-height;
      background-color:$u-overlay-background-color;
   }
</style>