关于可多开可移动拖拽,可点击底层弹窗

查看不少组件库,发现还是el-element plus组件库是可以简单修改达成想要的效果的记录一下简单实现的组件

1 其他可以实现的组件库看见还有 ant-design-vue [Arco Design Vue]等(好像看见过一个特别合适改成需要的效果的,但忘记了,需要可以去看看各个组件库的Modal组件)

2其中 draggable :modal="false" :close-on-click-modal="false" 对比文档即可看懂,

  <el-dialog 
  v-model="$props.visible" 
  width="500" 
  draggable
  :modal="false"
  :close-on-click-modal="false"
  modal-class="dialog_class">
  
  </el-dialog>

完整组件记录(虽然最后没使用)

<template>
  <el-dialog 
    v-model="$props.visible" 
    width="500" 
    draggable
    :modal="false"
    :close-on-click-modal="false"
    modal-class="dialog_class"
    :overflow="true"
    @close="$emit('close', gateway)"
  >
    <VaCard>
      <div class="w-full h-full flex flex-col gap-4 justify-center items-center">
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-1 items-end">
        <VaInput v-model="gateway.name" placeholder="Solid" label="Name" />
        <VaInput v-model="gateway.id" placeholder="Solid" label="ID" />
        <VaInput v-model="gateway.ipAddr" placeholder="Solid" label="IP Address" />
        <VaInput v-model="gateway.remark" placeholder="Solid" label="Remark" />
      
        <VaInput v-model="gateway.created_at" placeholder="Solid" label="Created At" />
        <VaInput v-model="gateway.updated_at" placeholder="Solid" label="Updated At" /> 
        </div>
        
        <div>
          <VaChart :data="chartData" class="h-24" type="line" :options="options" />
        </div>

      </div>
     
    </VaCard>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('close', gateway)">Cancel</el-button>
        <el-button type="primary" @click="$emit('save', gateway)">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { gateway_type } from '../../../../data/gateway'
import VaChart from '../../../../components/va-charts/VaChart.vue'
import { useChartData } from '../../../../data/charts/composables/useChartData'
import { lineChartData } from '../../../../data/charts/lineChartData'
import { ChartOptions } from 'chart.js'

const props = defineProps({
  gateway: { type: Object as PropType<gateway_type>, required: true },
  visible: { type: Boolean, default: false },
})

const emit = defineEmits<{
  (event: 'close', gateway: any): void
  (event: 'save', gateway: any): void
}>()

const chartData = useChartData(lineChartData)
const options: ChartOptions<'line'> = {
  scales: {
    x: {
      display: false,
      grid: {
        display: false, // Disable X-axis grid lines ("net")
      },
    },
    y: {
      display: false,
      grid: {
        display: false, // Disable Y-axis grid lines ("net")
      },
      ticks: {
        display: false, // Hide Y-axis values
      },
    },
  },
  interaction: {
    intersect: false,
    mode: 'index',
  },
  plugins: {
    legend: {
      display: false,
    },
    tooltip: {
      enabled: true,
    },
  },
}
</script>

<style>
.dialog_class {
  pointer-events: none;
}
.el-dialog {
  pointer-events: auto;
  border-radius: 2px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
</style> 

使用window.open打开新的标签页,使用标签页做弹窗,就很符合要求了(毕竟功能啥的还是确实会很强大!!)