u-mask.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <view class="u-mask" hover-stop-propagation :style="[maskStyle, zoomStyle]" @tap="click"
  3. @touchmove.stop.prevent="() => {}" :class="{
  4. 'u-mask-zoom': zoom,
  5. 'u-mask-show': show
  6. }">
  7. <slot/>
  8. </view>
  9. </template>
  10. <script>
  11. /**
  12. * mask 遮罩
  13. * @description 创建一个遮罩层,用于强调特定的页面元素,并阻止用户对遮罩下层的内容进行操作,一般用于弹窗场景
  14. * @tutorial https://www.uviewui.com/components/mask.html
  15. * @property {Boolean} show 是否显示遮罩(默认false)
  16. * @property {String Number} z-index z-index 层级(默认1070)
  17. * @property {Object} custom-style 自定义样式对象,见上方说明
  18. * @property {String Number} duration 动画时长,单位毫秒(默认300)
  19. * @property {Boolean} zoom 是否使用scale对遮罩进行缩放(默认true)
  20. * @property {Boolean} mask-click-able 遮罩是否可点击,为false时点击不会发送click事件(默认true)
  21. * @event {Function} click mask-click-able为true时,点击遮罩发送此事件
  22. * @example <u-mask :show="show" @click="show = false"></u-mask>
  23. */
  24. export default {
  25. name: "u-mask",
  26. props: {
  27. // 是否显示遮罩
  28. show: {
  29. type: Boolean,
  30. default: false
  31. },
  32. // 层级z-index
  33. zIndex: {
  34. type: [Number, String],
  35. default: ''
  36. },
  37. // 用户自定义样式
  38. customStyle: {
  39. type: Object,
  40. default() {
  41. return {}
  42. }
  43. },
  44. // 遮罩的动画样式, 是否使用使用zoom进行scale进行缩放
  45. zoom: {
  46. type: Boolean,
  47. default: true
  48. },
  49. // 遮罩的过渡时间,单位为ms
  50. duration: {
  51. type: [Number, String],
  52. default: 300
  53. },
  54. // 是否可以通过点击遮罩进行关闭
  55. maskClickAble: {
  56. type: Boolean,
  57. default: true
  58. }
  59. },
  60. data() {
  61. return {
  62. zoomStyle: {
  63. transform: ''
  64. },
  65. scale: 'scale(1.2, 1.2)'
  66. }
  67. },
  68. watch: {
  69. show(n) {
  70. if (n && this.zoom) {
  71. // 当展示遮罩的时候,设置scale为1,达到缩小(原来为1.2)的效果
  72. this.zoomStyle.transform = 'scale(1, 1)';
  73. } else if (!n && this.zoom) {
  74. // 当隐藏遮罩的时候,设置scale为1.2,达到放大(因为显示遮罩时已重置为1)的效果
  75. this.zoomStyle.transform = this.scale;
  76. }
  77. }
  78. },
  79. computed: {
  80. maskStyle() {
  81. let style = {};
  82. style.backgroundColor = "rgba(0, 0, 0, 0.6)";
  83. if (this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
  84. else style.zIndex = -1;
  85. style.transition = `all ${this.duration / 1000}s ease-in-out`;
  86. // 判断用户传递的对象是否为空,不为空就进行合并
  87. if (Object.keys(this.customStyle).length) style = {
  88. ...style,
  89. ...this.customStyle
  90. };
  91. return style;
  92. }
  93. },
  94. methods: {
  95. click() {
  96. if (!this.maskClickAble) return;
  97. this.$emit('click');
  98. }
  99. }
  100. }
  101. </script>
  102. <style lang="scss" scoped>
  103. @import "../../libs/css/style.components.scss";
  104. .u-mask {
  105. position: fixed;
  106. top: 0;
  107. left: 0;
  108. right: 0;
  109. bottom: 0;
  110. opacity: 0;
  111. transition: transform 0.3s;
  112. }
  113. .u-mask-show {
  114. opacity: 1;
  115. }
  116. .u-mask-zoom {
  117. transform: scale(1.2, 1.2);
  118. }
  119. </style>