123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <template>
- <view>
- <van-transition
- :show="show"
- custom-class="van-overlay"
- :custom-style="'z-index: ' + zIndex + '; ' + customStyle"
- :duration="duration"
- @tap.native="onClick"
- @touchmove.native.stop.prevent="noop"
- >
- <slot></slot>
- </van-transition>
- </view>
- </template>
- <script>
- import { VantComponent } from '../common/component';
- export default {
- data() {
- return {};
- },
- props: {
- show: Boolean,
- customStyle: String,
- duration: {
- type: null,
- default: 300
- },
- zIndex: {
- type: Number,
- default: 1
- }
- },
- methods: {
- onClick() {
- this.$emit('click');
- },
- // for prevent touchmove
- noop() {}
- }
- };
- </script>
- <style>
- @import '../common/index.ttss';
- .van-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.7);
- background-color: var(--overlay-background-color, rgba(0, 0, 0, 0.7));
- }
- </style>
|