Implement the bottom popover of dialog

Vue implements popover components

<template>
  <div class="view" :class="[isOpen ? 'open' : '']" @click.self="closeChange">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    isOpen: Boolean.isClose: Function,},methods: {
    closeChange() {
      this.isClose(); ,}}};</script>

<style scoped lang="less">
.view {
  position: absolute;
  left: 0;
  bottom: -100vh;
  width: 100%;
  height: 100vh;
  background: rgba(0.0.0.0.3);
  z-index: 99;
  transition: all 0.5 s;
}
.open {
  transform: translateY(-100%);
}
</style>

Copy the code