网站 dns 解析快速建立平台网站开发网站模板设计

1.问题状况：

正常启动VForm是没有问题的，可以正常预览，但是在使用VForm的项目中点击预览，鼠标会不停闪烁，层级会有冲突

2.解决方案：

直接使用img标签来实现自定义预览

3.代码

以下是我VForm中二次开发一个下拉展示图片组件，以上面问题的解决代码

<template><form-item-wrapper:designer="designer":field="field":rules="rules":design-state="designState":parent-widget="parentWidget":parent-list="parentList":index-of-parent-list="indexOfParentList":sub-form-row-index="subFormRowIndex":sub-form-col-index="subFormColIndex":sub-form-row-id="subFormRowId"><el-selectref="fieldEditor"v-model="fieldModel"class="full-width-input":disabled="field.options.disabled":size="field.options.size":clearable="field.options.clearable":filterable="field.options.filterable":allow-create="field.options.allowCreate":default-first-option="allowDefaultFirstOption":automatic-dropdown="field.options.automaticDropdown":multiple="field.options.multiple":multiple-limit="field.options.multipleLimit":placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')":remote="field.options.remote":remote-method="remoteMethod"@focus="handleFocusCustomEvent"@blur="handleBlurCustomEvent"@change="handleChangeEvent"><el-optionv-for="item in field.options.optionItems":key="item.value":label="item.label":value="item.value":disabled="item.disabled"><!-- 在下拉选项中也显示图片，增强用户体验 --><span style="float: left"><imgv-if="item.imageUrl":src="item.imageUrl"style="width: 20px;height: 20px;vertical-align: middle;margin-right: 5px;"/>{{ item.label }}</span></el-option></el-select><div v-if="selectedImageUrl" class="image-preview-container"><div class="image-wrapper" @click="openImagePreview"><img:src="selectedImageUrl"class="option-image":alt="selectedImageLabel"@error="handleImageError"@load="handleImageLoad"/><div v-if="imageLoadError" class="image-slot"><i class="el-icon-picture-outline"></i><span>图片加载失败</span></div><div class="image-overlay"><i class="el-icon-zoom-in"></i><span>点击预览</span></div></div><p v-if="selectedImageLabel" class="image-label">{{ selectedImageLabel }}</p></div><!-- 自定义预览模态框 --><div v-if="showImagePreview" class="custom-image-preview-modal"@click="closeImagePreview"@keydown.esc="closeImagePreview"><div class="preview-container" @click.stop><div class="preview-header"><span class="preview-title">{{ selectedImageLabel || '图片预览' }}</span><button class="close-btn" @click="closeImagePreview"><i class="el-icon-close"></i></button></div><div class="preview-content"><img:src="selectedImageUrl"class="preview-image":alt="selectedImageLabel"@click.stop/></div></div></div></form-item-wrapper>
</template><script>
import FormItemWrapper from "./form-item-wrapper";
import emitter from "@/utils/emitter";
import i18n from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import testImg from "@/assets/ft-images/t1.png";
import axios from "axios";
import Cookies from "js-cookie";
export default {name: "selectImg-widget",componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件mixins: [emitter, fieldMixin, i18n],props: {//field: Object,parentWidget: Object,parentList: Array,indexOfParentList: Number,designer: Object,designState: {type: Boolean,default: false,},subFormRowIndex: {/* 子表单组件行索引，从0开始计数 */ type: Number,default: -1,},subFormColIndex: {/* 子表单组件列索引，从0开始计数 */ type: Number,default: -1,},subFormRowId: {/* 子表单组件行Id，唯一id且不可变 */ type: String,default: "",},},components: {FormItemWrapper,},inject: ["refList", "formConfig", "globalOptionData", "globalModel"],data() {return {oldFieldValue: null, //field组件change之前的值fieldModel: null,rules: [],selectedImageUrl: "", // 【新增】用于存储当前选中项对应的图片URLselectedImageLabel: "",imageUpdateKey: 0, // 用于强制刷新图片组件，避免闪烁showImagePreview: false, // 控制自定义预览模态框显示imageLoadError: false, // 图片加载错误状态field: {type: "select",icon: "select-field",formItemFlag: true,options: {name: "select61134",label: "select",bindData: "",labelAlign: "",defaultValue: "",placeholder: "",columnWidth: "200px",size: "",labelWidth: null,labelHidden: false,disabled: false,hidden: false,clearable: true,filterable: false,allowCreate: false,remote: false,automaticDropdown: false,multiple: false,multipleLimit: 0,optionItems: [{label: "select 1",value: 1,imageUrl: testImg,},{label: "select 2",value: 2,imageUrl: testImg,},{label: "select 3",value: 3,},],required: false,requiredHint: "",validation: "",validationHint: "",customClass: [],labelIconClass: null,labelIconPosition: "rear",labelTooltip: null,onCreated: "",onMounted: "",onRemoteQuery: "",onChange: "",onFocus: "",onBlur: "",onValidate: "",},id: "select61134",},};},computed: {allowDefaultFirstOption() {return (!!this.field.options.filterable && !!this.field.options.allowCreate);},remoteMethod() {if (!!this.field.options.remote && !!this.field.options.onRemoteQuery) {return this.remoteQuery;} else {return undefined;}},},beforeCreate() {/* 这里不能访问方法和属性！！ */},created() {/* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop需要在父组件created中初始化！！ */this.initOptionItems();this.initFieldModel();this.registerToRefList();this.initEventHandler();this.buildFieldRules();this.handleOnCreated();},mounted() {this.loadTeamOptions();this.handleOnMounted();},beforeDestroy() {this.unregisterFromRefList();// 【新增】清理预览相关状态，防止内存泄漏this.closeImagePreview();},methods: {// 【新增】处理下拉框值变化事件，找到选中项并获取图片URLhandleChangeEvent(selectedValue) {// 使用 nextTick 确保DOM更新完成，避免闪烁this.$nextTick(() => {// 查找当前选中的选项对象const selectedOption = this.field.options.optionItems.find((item) => item.value === selectedValue);// 先清空，再设置，避免闪烁if (selectedOption && selectedOption.imageUrl) {this.selectedImageUrl = selectedOption.imageUrl;this.selectedImageLabel = selectedOption.label || "";this.imageLoadError = false; // 重置图片错误状态} else {this.selectedImageUrl = "";this.selectedImageLabel = "";this.imageLoadError = false;}// 关闭任何打开的预览this.showImagePreview = false;});},// 【新增】打开自定义图片预览openImagePreview() {if (this.selectedImageUrl && !this.imageLoadError) {this.showImagePreview = true;// 阻止页面滚动document.body.style.overflow = 'hidden';// 添加键盘监听document.addEventListener('keydown', this.handlePreviewKeydown);}},// 【新增】关闭自定义图片预览closeImagePreview() {this.showImagePreview = false;// 恢复页面滚动document.body.style.overflow = '';// 移除键盘监听document.removeEventListener('keydown', this.handlePreviewKeydown);},// 【新增】处理预览键盘事件handlePreviewKeydown(event) {if (event.key === 'Escape') {this.closeImagePreview();}},// 【新增】图片加载成功处理handleImageLoad() {this.imageLoadError = false;},// 【新增】图片加载错误处理handleImageError() {this.imageLoadError = true;},// 初始化字段模型时也检查是否有图片需要显示initFieldModel() {// 调用原有的初始化逻辑if (typeof this._initFieldModel === "function") {this._initFieldModel();}// 初始化时也检查是否有图片需要显示if (this.fieldModel) {const initialOption = this.field.options.optionItems.find((item) => item.value === this.fieldModel);if (initialOption) {this.selectedImageUrl = initialOption.imageUrl || "";this.selectedImageLabel = initialOption.label || "";this.imageLoadError = false;}}},async loadTeamOptions() {let token = Cookies.get("token") ? Cookies.get("token") : null;try {const response = await axios.get("http://172.16.18.204:8540/im/memberInfo/page",{params: {// GET 请求的参数，Axios 会将其转换为 URL 查询字符串pageNo: 1,pageSize: 999999,},headers: {// 请求头配置token: `Bearer ${token}`, // 将 token 放入请求头// 如果后端有要求，也可以考虑添加 'Content-Type' 等其它头部// 'Content-Type': 'application/json',},});console.log(response.data); // 处理响应数据} catch (err) {console.error("请求出错", err); // 处理错误}},},
};
</script><style lang="scss" scoped>
@import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//.full-width-input {width: 100% !important;
}.image-preview-container {margin-top: 12px; // 与下拉框保持距离padding: 12px;border: none; /* 设置为无边框 */border-radius: 4px;background-color: rgba(255, 255, 255, 0); /* 设置为透明背景 */text-align: center;transition: all 0.3s ease;&:hover {border-color: transparent;background-color: rgba(255, 255, 255, 0);}
}// 【新增】图片容器样式
.image-wrapper {position: relative;display: inline-block;width: 100%;max-width: 320px;cursor: pointer;border-radius: 4px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: all 0.2s ease;&:hover {transform: scale(1.02);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);.image-overlay {opacity: 1;}}
}// 【新增】图片样式
.option-image {width: 100%;max-height: 240px;object-fit: contain;display: block;background-color: #f5f7fa;
}// 【新增】悬浮遮罩层
.image-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);display: flex;flex-direction: column;align-items: center;justify-content: center;color: white;opacity: 0;transition: opacity 0.2s ease;font-size: 14px;i {font-size: 24px;margin-bottom: 5px;}
}// 【新增】图片标签样式
.image-label {margin-top: 8px;font-size: 12px;color: #909399;line-height: 1.4;
}// 【新增】图片加载失败时的占位样式
.image-slot {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 100%;height: 120px;background-color: #f5f7fa;color: #909399;border-radius: 3px;i {font-size: 24px;margin-bottom: 4px;}
}.full-width-input {width: 100% !important;
}/* 修复跨项目样式失效问题：移除特定的scoped hash，使用通用选择器 */
::v-deep .image-preview-container {background-color: rgba(255, 255, 255, 0) !important; /* 完全透明 */border: none !important;
}/* 【新增】自定义预览模态框样式 */
.custom-image-preview-modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9999;background: rgba(0, 0, 0, 0.8);display: flex;align-items: center;justify-content: center;backdrop-filter: blur(3px);animation: fadeIn 0.2s ease;
}.preview-container {position: relative;background: white;border-radius: 8px;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);max-width: 90vw;max-height: 90vh;overflow: hidden;animation: scaleIn 0.2s ease;
}.preview-header {display: flex;align-items: center;justify-content: space-between;padding: 15px 20px;background: #f5f7fa;border-bottom: 1px solid #e4e7ed;
}.preview-title {font-size: 16px;font-weight: 500;color: #303133;
}.close-btn {background: none;border: none;font-size: 18px;color: #909399;cursor: pointer;padding: 5px;border-radius: 4px;transition: all 0.2s ease;&:hover {background: #e4e7ed;color: #606266;}
}.preview-content {padding: 20px;display: flex;align-items: center;justify-content: center;min-height: 200px;
}.preview-image {max-width: 100%;max-height: 70vh;object-fit: contain;border-radius: 4px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}/* 动画效果 */
@keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}
}@keyframes scaleIn {from {transform: scale(0.8);opacity: 0;}to {transform: scale(1);opacity: 1;}
}
</style>