bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

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

¶Ô±ÈÐÂÎļþ
@@ -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>