我遇到了一个大难题~

简单介绍一下

目前项目是一个vue的商城后台系统，商品新增编辑的页面有上传图片的功能，另外引入了一个百度的编辑器，编辑器上也有选择图片的功能。

首先，我们来说一下上传图片的这个功能。
前端代码是这样的：

<el-form-item label="商品轮播图：" prop="image">
	<MaterialList v-model="form.image" type="image" :num="4" :width="150" :height="150" :isSquare=true />
</el-form-item>

<script>
import MaterialList from '@/components/material'
//这里是专门写一个图片的dialog文件，做出弹窗的效果，代码我就不copy了
</script>

然后，页面效果是这样的：

点击之后会有弹窗效果的图片上传页面

接下来，介绍一下百度编辑器，上代码

<el-form-item label="产品描述：" prop="description">
	<ueditor-wrap v-model="form.description" :config="myConfig" style="width: 90%;" @editorIsEmpty="editorIsEmpty" @beforeInit="addCustomDialog" />
</el-form-item>

其他的功能我就不说了，直接说说插入图片的功能

addCustomDialog() {  //这对应的是上面ueditor框里的事件
	window.UE.registerUI('yshop', function(editor, uiName) {
		const dialog = new window.UE.ui.Dialog({
			iframeUrl: '/yshop/materia/index',  
			//这里最开始一样，另写一个图片的dialog文件，并在js写了对应url
			editor: editor,
			name: uiName,
			title: '上传图片',  //标题
			cssRules: 'width:1200px;height:500px;padding:20px;' //弹出窗口大小
		})
		this.dialog = dialog
		
		var btn = new window.UE.ui.Button({   //在这识别点击的是图片上传的按钮
			name: 'dialog-button',
			title: '上传图片',
			cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
			onclick: function() {
				dialog.render()  //点击事件发生，弹出窗口
				dialog.open()
			}
		})
		
		return btn
	}, 37)
},

接着，上效果图

细心的同学发现了，这两个图片框的样式不一样，然而要求我改的就是这个，需要和最上面的样式一样。
很快我发现，原本的图片是一个单独的vue页面，里面包含了dialog标签，而编辑器是新建一个dialog，在这个dialog里显示vue的页面，然而这个dialog的样式是封装好的，我只能通过强行修改css才可以。
好难呀~~