简介

基于vue3 + typescript 的自由弹窗组件，为了解决第三方js包当中，弹窗样式定义麻烦的问题。

安装

pnpm

pnpm add @howuse/freedom-dialog

npm

npm i @howuse/freedom-dialog

yarn

yarn add @howuse/freedom-dialog

echarts 示例

仅以echarts为例，其他第三方js包类似。

<template>
    <define>
        <template #default="data">
            <div class=" custom-tooltip">
                😄
                <div>
                    <span v-html="data.marker"></span>{{ data.value }}
                </div>
            </div>
        </template>
    </define>
    <div style="width: 100%;height: 350px;">
        <how-bar-chart :option="option" />
    </div>
</template>
<script setup lang="ts">
    import { createFreedomDialog } from "@howuse/freedom-dialog"
    import { HowBarChart } from "@howuse/echarts"
    import type { EChartsOption } from "echarts"
    import { computed } from "vue"

    const [define, renderContainer] = createFreedomDialog()

    const option = computed<EChartsOption>(() => {
        return {
            tooltip: {
                className: 'echarts-tooltip echarts-tooltip-dark',
                formatter(data) {
                    return renderContainer(data)
                }
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'bar'
                }
            ]
        }
    })
</script>
<style scoped>
    :global(.echarts-tooltip) {
        border: none !important;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    :global(.echarts-tooltip-dark) {
        background-color: #333 !important;
        color: #fff;
    }
</style>

封装一个随意的弹窗

<template>
    <DefineDialog>
        <template #default="data">
            <div class="custom-dialog">
                {{ data.title }}
                <button @click="removeContainter()">关闭我x</button>
            </div>
        </template>
    </DefineDialog>

    <el-button @click="openDialog()">
        点我打开弹窗
    </el-button>
</template>
<script setup lang="ts">
    import { ElButton } from "element-plus"
    import { createFreedomDialog } from "@howuse/freedom-dialog"
    const [DefineDialog, renderContainer, removeContainter] = createFreedomDialog()

    function openDialog() {
       const continter =  renderContainer({ title: "我是一个弹窗" })
       document.body.appendChild(continter)
       continter.style.position = 'fixed'
       continter.style.inset = '0'
       continter.style.zIndex = '1000'
    }

</script>
<style lang="css" scoped>
.custom-dialog {
    width: 30%;
    height: 300px;
    margin: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 20%;
    left: 45%;
    background-color: aliceblue;
}
</style>