ダイアログ プラグインは、最大化、最小化、復元、ドラッグ アンド ドロップをサポートするために vue3 プロジェクトに導入されました。

レンダリング：

 上の図は、layui-vue コンポーネント ライブラリのレイヤー プラグインです。私のプロジェクトでは、element-plus コンポーネント ライブラリを使用しています。layui コンポーネント ライブラリが利用できない場合は、@layui/layer-vue エラスティック レイヤー プラグインを導入してください。別途。

npm地址：@layui/layer-vue - npm

Layui-vue コンポーネント ライブラリのアドレス: Layui - Vue フロントエンド UI フレームワーク

 使い方：

1. npm アドレスの Readme 操作に従い、mainjs にプラグインを導入し、グローバルに登録します

import layer from '@layui/layer-vue';
import '@layui/layer-vue/lib/index.css'
app.use(layer)

2. 弾性レイヤーを表示する必要がある場合に、弾性レイヤーのコンポーネントまたは関数を導入します (レイヤー弾性レイヤーは関数/ラベルの形式で使用できます)。

    特定の API については、上記のlayui-vue コンポーネント ライブラリのアドレスを参照してください。

<template>
  <el-button @click="openSuccess">提示消息</el-button>
</template>

<script setup>
import { layer, LayLayer } from "@layui/layer-vue";
const openSuccess = function () {
  layer.open({
    title: "biaoti",
    icon: 1,
    shadeClose: false,
    maxmin: true,
    area: ['900px', '600px'],  // 这里可以是百分比
    type: 2, // 0: dialog 1: page 2: iframe 3: loading 4: drawer 
    content:'/index'  // type为iframe时，代表路径
  });
};
</script>