学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
1.9 KiB

1 year ago
  1. <template>
  2. <u-transition
  3. :show="show"
  4. custom-class="u-overlay"
  5. :duration="duration"
  6. :custom-style="overlayStyle"
  7. @click="clickHandler"
  8. >
  9. <slot />
  10. </u-transition>
  11. </template>
  12. <script>
  13. import props from './props.js';
  14. /**
  15. * overlay 遮罩
  16. * @description 创建一个遮罩层用于强调特定的页面元素并阻止用户对遮罩下层的内容进行操作一般用于弹窗场景
  17. * @tutorial https://www.uviewui.com/components/overlay.html
  18. * @property {Boolean} show 是否显示遮罩默认 false
  19. * @property {String | Number} zIndex zIndex 层级默认 10070
  20. * @property {String | Number} duration 动画时长单位毫秒默认 300
  21. * @property {String | Number} opacity 不透明度值当做rgba的第四个参数 默认 0.5
  22. * @property {Object} customStyle 定义需要用到的外部样式
  23. * @event {Function} click 点击遮罩发送事件
  24. * @example <u-overlay :show="show" @click="show = false"></u-overlay>
  25. */
  26. export default {
  27. name: "u-overlay",
  28. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  29. computed: {
  30. overlayStyle() {
  31. const style = {
  32. position: 'fixed',
  33. top: 0,
  34. left: 0,
  35. right: 0,
  36. zIndex: this.zIndex,
  37. bottom: 0,
  38. 'background-color': `rgba(0, 0, 0, ${this.opacity})`
  39. }
  40. return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
  41. }
  42. },
  43. methods: {
  44. clickHandler() {
  45. this.$emit('click')
  46. }
  47. }
  48. }
  49. </script>
  50. <style lang="scss" scoped>
  51. @import "../../libs/css/components.scss";
  52. $u-overlay-top:0 !default;
  53. $u-overlay-left:0 !default;
  54. $u-overlay-width:100% !default;
  55. $u-overlay-height:100% !default;
  56. $u-overlay-background-color:rgba(0, 0, 0, .7) !default;
  57. .u-overlay {
  58. position: fixed;
  59. top:$u-overlay-top;
  60. left:$u-overlay-left;
  61. width: $u-overlay-width;
  62. height:$u-overlay-height;
  63. background-color:$u-overlay-background-color;
  64. }
  65. </style>