1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- <template>
- <view class="u-mask" :style="[maskStyle]" :class="[show ? 'u-mask-show' : '']" @tap="click" @touchmove.stop.prevent>
- <slot />
- </view>
- </template>
- <script>
-
- export default {
- name: "u-mask",
- props: {
-
- show: {
- type: Boolean,
- default: false
- },
-
- zIndex: {
- type: [Number, String],
- default: ''
- },
-
- customStyle: {
- type: Object,
- default () {
- return {}
- }
- },
-
- zoom: {
- type: Boolean,
- default: true
- },
-
- duration: {
- type: [Number, String],
- default: 300
- },
-
- maskClickAble: {
- type: Boolean,
- default: true
- }
- },
- computed: {
- maskStyle() {
- let style = {};
- style.backgroundColor = "rgba(0, 0, 0, 0.6)";
- if(this.show) style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
- else style.zIndex = -1;
- style.transition = `all ${this.duration / 1000}s ease-in-out`;
-
- if (this.zoom == true) style.transform = 'scale(1.2, 1.2)';
-
- if (Object.keys(this.customStyle).length) style = { ...style,
- ...this.customStyle
- };
-
-
- return style;
- }
- },
- methods: {
- click() {
- if (!this.maskClickAble) return;
- this.$emit('click');
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .u-mask {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 0;
- }
- .u-mask-show {
- opacity: 1;
- transform: scale(1);
- }
- </style>
|