dialog弹窗实现（可添加在任意节点上）

目录

• dialog弹窗实现（可添加在任意节点上）

dialog弹窗实现（可添加在任意节点上）

<template>
  <teleport v-if="modelValueHandler || lazyModelValueHandler" to=".ll-adapter">
    <transition name="ll-dialog-fade" appear>
      <div v-if="modelValueHandler" class="ll-dialog__overlay" :style="{zIndex}" @click="modelValueHandler=false">
        <div class="ll-dialog__body" :style="dialogStyle" @click.stop="()=>{}">
          <div class="ll-dialog__header">
            <div class="ll-dialog__title" :data-text="title">
              {{ title }}
              <img class="ll-dialog__close" src="@/assets/dashboard/dialog-close.png" alt=""
                   @click="modelValueHandler=false">
            </div>
          </div>
          <div class="ll-dialog__content">
            <slot></slot>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script>
import { computed, defineComponent, watch, ref } from "vue";
import wideBg from '@/assets/dashboard/dialog-bg-wide.png'
import narrowBg from '@/assets/dashboard/dialog-bg.png'
import smallBg from '@/assets/dashboard/dialog-bg-small.png'

let zIndexGlobal = 2000

export default defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
    },
    height: {
      type: String,
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  emits: ['update:modelValue'],
  setup(props, context) {
    const modelValueHandler = computed({
      get() {
        return props.modelValue;
      },
      set(newValue) {
        context.emit("update:modelValue", newValue);
      },
    })
    const lazyModelValueHandler = ref(props.modelValue)
    let removeComponentTimer = 0
    const zIndex = ref(zIndexGlobal)
    watch(modelValueHandler, (newValue) => {
      clearTimeout(removeComponentTimer)
      if (newValue) {
        zIndex.value = zIndexGlobal++
        lazyModelValueHandler.value = true
      } else {
        removeComponentTimer = setTimeout(() => {
          lazyModelValueHandler.value = false
        }, 3000)
      }
    })
    const dialogStyle = computed(() => {
      const styleObj = {}
      if (props.size === 'wide') {
        styleObj.backgroundImage = `url("${wideBg}")`
        styleObj.width = '1631px'
        styleObj.height = '785px'
      } else if (props.size === 'narrow') {
        styleObj.backgroundImage = `url("${narrowBg}")`
        styleObj.width = '821px'
        styleObj.height = '955px'
      } else {
        styleObj.backgroundImage = `url("${smallBg}")`
        styleObj.width = '821px'
        styleObj.height = '645px'
      }
      if (props.width) {
        styleObj.width = props.width
      }
      if (props.height) {
        styleObj.height = props.height
      }
      return styleObj
    })
    return {
      modelValueHandler,
      lazyModelValueHandler,
      zIndex,
      dialogStyle,
    }
  }
})
</script>

<style scoped lang="scss">
.ll-dialog__overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}

.ll-dialog__body {
  display: flex;
  flex-direction: column;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ll-dialog__header {
  padding: 20px 20px 10px 20px;
  margin-right: 16px;
}

.ll-dialog__title {
  position: relative;
  text-align: center;
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 5px;
  line-height: 60px;
}

.ll-dialog__title::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  color: #afe8ff;
  mask: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0));
}

.ll-dialog__close {
  position: absolute;
  right: -15px;
  top: 5px;
  cursor: pointer;
  z-index: 1;
}

.ll-dialog__content {
  flex: 1;
  height: 0;
  padding: 30px 20px;
}

.ll-dialog-fade-enter-active {
  animation: ll-dialog-fade 0.3s ease;
}

.ll-dialog-fade-leave-active {
  animation: ll-dialog-fade 0.3s ease reverse;
}

@keyframes ll-dialog-fade {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>