@v3p/layer

Appearance

On this page

useLayerDialog （ 弹窗组件） ​

概要 ​

意在打造一个自由弹窗，可根据自身需求定制。

  1. 支持自由拖动
  2. 指定拖动边界
  3. 支持锁定边界，避免弹窗超出边界

整个窗口弹出 ​

<template>
    <div ref="target" style="height: 200px;width: 300px;" class="rounded w-fit bg-black text-white p-4" id="xxx"
        :style="{ ...style }" v-if="visible">
        <div class=" flex justify-between" >
            <div move>💥拖动标题</div>
            <button class="btn" @click="close">X</button>
        </div>
        <div>设备离线，请立即检查</div>

    </div>

    <div class=" flex justify-between">
        <button class="btn" @click="handlePlacement('auto')">中间</button>
        <button class="btn" @click="handlePlacement('t')">上</button>
        <button class="btn" @click="handlePlacement('b')">下</button>
        <button class="btn" @click="handlePlacement('l')">左</button>
        <button class="btn" @click="handlePlacement('r')">右</button>
        <button class="btn" @click="handlePlacement('lt')">左上</button>
        <button class="btn" @click="handlePlacement('lb')">左下</button>
        <button class="btn" @click="handlePlacement('rt')">右上</button>
        <button class="btn" @click="handlePlacement('rb')">右下</button>
    </div>
</template>
<script setup lang="ts">
import { LayerDialogPlaceMent, useLayerDialog } from '@v3p/layer';
import { ref } from 'vue';

const target = ref()
const visible = ref(false)

const { style, setPlacement } = useLayerDialog(target, { placement: "auto", lockBoundary: true})

function handlePlacement(placement: LayerDialogPlaceMent) {
    visible.value = true
    setPlacement(placement)
}

function close(e) {
    visible.value = false
}
</script>
<style scoped>
.btn {
    background-color: gray;
    color: aliceblue;
    padding: 4px 12px;
    border-radius: 2px;
}
</style>
<template>
    <div ref="target" style="height: 200px;width: 300px;" class="rounded w-fit bg-black text-white p-4" id="xxx"
        :style="{ ...style }" v-if="visible">
        <div class=" flex justify-between" >
            <div move>💥拖动标题</div>
            <button class="btn" @click="close">X</button>
        </div>
        <div>设备离线，请立即检查</div>

    </div>

    <div class=" flex justify-between">
        <button class="btn" @click="handlePlacement('auto')">中间</button>
        <button class="btn" @click="handlePlacement('t')">上</button>
        <button class="btn" @click="handlePlacement('b')">下</button>
        <button class="btn" @click="handlePlacement('l')">左</button>
        <button class="btn" @click="handlePlacement('r')">右</button>
        <button class="btn" @click="handlePlacement('lt')">左上</button>
        <button class="btn" @click="handlePlacement('lb')">左下</button>
        <button class="btn" @click="handlePlacement('rt')">右上</button>
        <button class="btn" @click="handlePlacement('rb')">右下</button>
    </div>
</template>
<script setup lang="ts">
import { LayerDialogPlaceMent, useLayerDialog } from '@v3p/layer';
import { ref } from 'vue';

const target = ref()
const visible = ref(false)

const { style, setPlacement } = useLayerDialog(target, { placement: "auto", lockBoundary: true})

function handlePlacement(placement: LayerDialogPlaceMent) {
    visible.value = true
    setPlacement(placement)
}

function close(e) {
    visible.value = false
}
</script>
<style scoped>
.btn {
    background-color: gray;
    color: aliceblue;
    padding: 4px 12px;
    border-radius: 2px;
}
</style>

在指定区域弹出 ​

<template>
    <div style="width: 300px;height: 200px;background-color: cadetblue;" ref="to">
        <div ref="target" class="gray-400/30 rounded w-fit bg-black text-white p-4" :style="{ ...style }" v-if="visible">
            <div>💥危险提示</div>
            <button class="btn" @click="visible = false">关闭</button>
        </div>
    </div>
    <div class=" flex justify-between mt-4">
        <button class="btn" @click="handlePlacement('auto')">中间</button>
        <button class="btn" @click="handlePlacement('t')">上</button>
        <button class="btn" @click="handlePlacement('b')">下</button>
        <button class="btn" @click="handlePlacement('l')">左</button>
        <button class="btn" @click="handlePlacement('r')">右</button>
        <button class="btn" @click="handlePlacement('lt')">左上</button>
        <button class="btn" @click="handlePlacement('lb')">左下</button>
        <button class="btn" @click="handlePlacement('rt')">右上</button>
        <button class="btn" @click="handlePlacement('rb')">右下</button>
    </div>
</template>
<script setup lang="ts">
import { LayerDialogPlaceMent, useLayerDialog } from '@v3p/layer';
import { ref } from 'vue';

const target = ref()
const to = ref()
const visible = ref(false)


const { style, setPlacement } = useLayerDialog(target, { placement: "auto", to })

function handlePlacement(placement: LayerDialogPlaceMent) {
    visible.value = true
    setPlacement(placement)
}
</script>
<style scoped>
.btn {
    background-color: gray;
    color: aliceblue;
    padding: 4px 12px;
    border-radius: 2px;
}
</style>
<template>
    <div style="width: 300px;height: 200px;background-color: cadetblue;" ref="to">
        <div ref="target" class="gray-400/30 rounded w-fit bg-black text-white p-4" :style="{ ...style }" v-if="visible">
            <div>💥危险提示</div>
            <button class="btn" @click="visible = false">关闭</button>
        </div>
    </div>
    <div class=" flex justify-between mt-4">
        <button class="btn" @click="handlePlacement('auto')">中间</button>
        <button class="btn" @click="handlePlacement('t')">上</button>
        <button class="btn" @click="handlePlacement('b')">下</button>
        <button class="btn" @click="handlePlacement('l')">左</button>
        <button class="btn" @click="handlePlacement('r')">右</button>
        <button class="btn" @click="handlePlacement('lt')">左上</button>
        <button class="btn" @click="handlePlacement('lb')">左下</button>
        <button class="btn" @click="handlePlacement('rt')">右上</button>
        <button class="btn" @click="handlePlacement('rb')">右下</button>
    </div>
</template>
<script setup lang="ts">
import { LayerDialogPlaceMent, useLayerDialog } from '@v3p/layer';
import { ref } from 'vue';

const target = ref()
const to = ref()
const visible = ref(false)


const { style, setPlacement } = useLayerDialog(target, { placement: "auto", to })

function handlePlacement(placement: LayerDialogPlaceMent) {
    visible.value = true
    setPlacement(placement)
}
</script>
<style scoped>
.btn {
    background-color: gray;
    color: aliceblue;
    padding: 4px 12px;
    border-radius: 2px;
}
</style>

禁止拖动超出边界 ​

<template>
    <div style="width: 300px;height: 200px;background-color: cadetblue;" ref="to">
        <div ref="target" class="gray-400/30 rounded w-fit bg-black text-white p-4" :style="{ ...style }" v-if="visible">
            <div>💥危险提示</div>
            <button class="btn" @click="visible = false">关闭</button>
        </div>
    </div>
    <div class=" flex justify-between mt-4">
        <button class="btn" @click="handlePlacement('auto')">中间</button>
        <button class="btn" @click="handlePlacement('t')">上</button>
        <button class="btn" @click="handlePlacement('b')">下</button>
        <button class="btn" @click="handlePlacement('l')">左</button>
        <button class="btn" @click="handlePlacement('r')">右</button>
        <button class="btn" @click="handlePlacement('lt')">左上</button>
        <button class="btn" @click="handlePlacement('lb')">左下</button>
        <button class="btn" @click="handlePlacement('rt')">右上</button>
        <button class="btn" @click="handlePlacement('rb')">右下</button>
    </div>
</template>
<script setup lang="ts">
import { LayerDialogPlaceMent, useLayerDialog } from '@v3p/layer';
import { ref } from 'vue';

const target = ref()
const to = ref()
const visible = ref(false)

// lockBoundary 锁定边界，拖动不超出边界
const { style, setPlacement } = useLayerDialog(target, { placement: "auto", to , lockBoundary: true})

function handlePlacement(placement: LayerDialogPlaceMent) {
    visible.value = true
    setPlacement(placement)
}
</script>
<style scoped>
.btn {
    background-color: gray;
    color: aliceblue;
    padding: 4px 12px;
    border-radius: 2px;
}
</style>
<template>
    <div style="width: 300px;height: 200px;background-color: cadetblue;" ref="to">
        <div ref="target" class="gray-400/30 rounded w-fit bg-black text-white p-4" :style="{ ...style }" v-if="visible">
            <div>💥危险提示</div>
            <button class="btn" @click="visible = false">关闭</button>
        </div>
    </div>
    <div class=" flex justify-between mt-4">
        <button class="btn" @click="handlePlacement('auto')">中间</button>
        <button class="btn" @click="handlePlacement('t')">上</button>
        <button class="btn" @click="handlePlacement('b')">下</button>
        <button class="btn" @click="handlePlacement('l')">左</button>
        <button class="btn" @click="handlePlacement('r')">右</button>
        <button class="btn" @click="handlePlacement('lt')">左上</button>
        <button class="btn" @click="handlePlacement('lb')">左下</button>
        <button class="btn" @click="handlePlacement('rt')">右上</button>
        <button class="btn" @click="handlePlacement('rb')">右下</button>
    </div>
</template>
<script setup lang="ts">
import { LayerDialogPlaceMent, useLayerDialog } from '@v3p/layer';
import { ref } from 'vue';

const target = ref()
const to = ref()
const visible = ref(false)

// lockBoundary 锁定边界，拖动不超出边界
const { style, setPlacement } = useLayerDialog(target, { placement: "auto", to , lockBoundary: true})

function handlePlacement(placement: LayerDialogPlaceMent) {
    visible.value = true
    setPlacement(placement)
}
</script>
<style scoped>
.btn {
    background-color: gray;
    color: aliceblue;
    padding: 4px 12px;
    border-radius: 2px;
}
</style>

Api ​

const { style, setPlacement } = useLayerDialog(target, LayerDialogProps)

  • 参数

target 目标操作元素 ​

参数名称是否必填描述默认值类型
target是目标元素无Ref

LayerDialogProps ​

参数名称是否必填描述默认值类型
placement否代表元素在目标窗口显示的相对位置,可选值：'auto' ， 't' ， 'b' ， 'l' ， 'r' ， 'rb' ， 'rt' ， 'lt' ， 'lb' ， [number, number]autostring or [number,number]
to否代表显示的目标容器无Ref
lockBoundary否是否锁定边界，防止元素滑动到屏幕之外falseboolean
  • 返回值
参数名称描述默认值类型
style属性，用于位置样式填充--
setPlacement函数，动态设置元素位置，可选值：'auto' ， 't' ， 'b' ， 'l' ， 'r' ， 'rb' ， 'rt' ， 'lt' ， 'lb' ， [number, number]无string or [number,number]