弹出各种样式的消息框及菜单

• 查看本示例演示效果

注意

本文中展示的代码均为关键代码，复制粘贴到您的项目中，按照实际的情况，例如文档路径，用户名等做适当修改即可使用。

PageOffice V6.3版本起，PageOffice客户端控件新增Enabled属性，对采用标准div技术实现的界面元素，如模态对话框、弹出菜单及下拉选择框，给予了更佳的支持，确保这些元素不再受控件遮蔽影响。

<object> 标签在HTML中用于嵌入各种类型的媒体，比如Flash动画、PDF文件、Java小程序等。它是一个独立的元素，其内容通常不受页面上的CSS样式的影响，包括z-index属性。z-index属性是用来设置元素的垂直堆叠顺序的，值越大，元素在堆叠中越靠上。然而，对于<object>标签来说，由于其嵌入内容的性质，它可能不会像其他HTML元素那样响应z-index属性。PageOffice客户端控件在页面的HTML代码中也是这样的一个<object> 标签，所以在设计用PageOffice在线打开文件的网页时，就可能出现在线打开的文档遮挡了页面上其他元素的情况，尤其是当试图用div元素创建弹窗或覆盖层时，即使为这些div元素设置了较高的z-index值，PageOffice控件仍然会显示在它们上面，导致遮挡问题。根本原因是<object>标签嵌入的是浏览器插件，然而插件的渲染通常是由浏览器插件系统处理的，而不是HTML渲染引擎，这就导致了插件内容不受z-index控制。

PageOffice V6.3版本的客户端控件提供了Enabled属性，在弹出模态对话框、弹出菜单或者下拉框的时候，通过js代码pageofficectrl.Enabled = false;设置客户端PageOffice控件不要显示在最上层，等对话框关闭或下拉菜单消失时，再通过js代码pageofficectrl.Enabled = true;恢复PageOffice控件的正常显示，完美的解决了在使用前端框架的情况下PageOffice遮挡了div技术实现的模态对话框和弹出菜单的问题。

后端代码

本示例无后端关键代码。

前端代码

比如使用vue3框架弹出对话框的代码如下：

<script setup>
import request from '@/utils/request';
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';

const poHtmlCode = ref('');
const dialogTableVisible = ref(false);

function dialog_open() {
	pageofficectrl.Enabled = false;//禁用 PageOffice 控件的显示
	dialogTableVisible.value = true;//显示对话框元素
}

function dialog_close() {
	pageofficectrl.Enabled = true;//启用 PageOffice 控件的显示
	dialogTableVisible.value = false;//隐藏对话框元素
}


function OnPageOfficeCtrlInit() {
	// PageOffice的初始化事件回调函数，您可以在这里添加自定义按钮
	pageofficectrl.AddCustomToolButton("弹出模态窗口", "dialog_open()", 0);
}

function openFile() {
	return request({
		url: '/DivMessage/Word',
		method: 'get',
	})
}

onMounted(() => {
	// 请求后端打开文件
	openFile().then(response => {
		poHtmlCode.value = response;
	});
	//将需要回调的函数挂载到PageOffice控件，例如控件触发的事件、自定义按钮触发的函数。
	window.POPageMounted = { OnPageOfficeCtrlInit,dialog_open };//其中OnPageOfficeCtrlInit必须

})
</script>

<template>
	<div class="Word">

		<el-dialog v-model="dialogTableVisible" title="普通模态框" @close="dialog_close" @open="dialog_open">
			<p>一个普通的页面层，传入了自定义的 HTML</p>
		</el-dialog>

		<!-- 此div用来加载PageOffice客户端控件，其中div的高宽及位置就决定了控件的大小及位置 -->
		<div style="width:auto; height:900px;" v-html="poHtmlCode"></div>
	</div>
</template>

// Make sure to add code blocks to your code group