sea-warning-web/src/views/web/components/drag-window.vue

<template>
  <VueDragResize
      ref="ref_drag"
      :isActive="false"
      :z="state.zIndex"
      :layout="layout"
      :isResizable="isResizable"
      :parentLimitation="true"
      @resizing="resize"
      @dragging="resize"
      @mousedown="setZ"
  >
    <div class="drag-window">
      <div class="head">
        <div class="head-bg">
          <img class="img-bg" src="@/assets/images/web/title-bg.png"/>
          <div class="color-bg"/>
        </div>
        <div class="head-content">
          <div class="title">
            {{title}}
            <slot name="title"/>
          </div>
          <div class="buttons">
            <slot name="buttons"/>
            <SvgIcon v-if="expend !== false" class="expend-button __hover" :class="{active: state.notExpend}" @click="state.notExpend = !state.notExpend" name="arrow_4" color="#ffffff" size="18"/>
            <SvgIcon v-if="close !== false" class="__hover" @click="$emit('onClose')"  name="close_3" color="#ffffff" size="16"/>
          </div>
        </div>
      </div>
      <div class="content" :class="{'not-expend': expend !== false && state.notExpend}">
        <slot/>
      </div>
    </div>
  </VueDragResize>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, nextTick, reactive} from "vue";
import VueDragResize from '@/components/vue-drag-resize/index.vue'
import {useAppStore} from "@/stores";

const {proxy} = getCurrentInstance()
const emit = defineEmits(['update:layout'])
const appStore = useAppStore()
const props = defineProps({
  title: {default: ''},
  layout: {required: false},
  isResizable: {default: false},
  close: {default: false},
  expend: {default: false},
})
const state: any = reactive({
  zIndex: appStore.getZIndex(),
  notExpend: false
})
const resize = (layout) => {
  nextTick(() => {
    let c = layout
    if (props.expend !== false) {
      c = Object.assign(c, {
        height: 'auto'
      })
    }
    emit('update:layout', c)
  })
}
const setZ = () => {
  state.zIndex = appStore.getZIndex()
}
defineExpose({
  setZ,
})
</script>
<style scoped lang="scss">
.drag-window {
  display: flex;
  flex-direction: column;
  .head {
    position: relative;
    width: 100%;
    height: 58px;
    display: flex;
    .head-bg {
      width: 100%;
      position: relative;
      z-index: 1;
      opacity: 0.8;
      overflow: hidden;
      border-radius: 16px 16px 0 0;
      .img-bg {
        user-select: none;
        width: 372px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }
      .color-bg {
        width: calc(100% - 20px);
        height: 100%;
        background-color: rgba(88, 148, 235, 1);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
      }
    }
    .head-content {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 2;
      display: flex;
      align-items: center;
      .title {
        margin-left: 24px;
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        display: flex;
        line-height: 1;
        align-items: center;
      }
      .buttons {
        margin-left: auto;
        margin-right: 24px;
        display: flex;
        align-items: center;
        .expend-button {
          margin-right: 8px;
          transition: all .2s;
          &.active {
            transform: rotate(180deg) !important;
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 40px);
    background-color: rgba(0, 52, 159, 0.85);
    overflow: hidden;
    transition: height .2s;
    border-radius: 0 0 16px 16px;
    &.not-expend {
      height: 0;
    }
  }
}
</style>