vue 简单封装函数式组件PC端弹出层(iframe)

首先自定义组件 xxx.vue
我是在elementui基础上定义组件，代码如下：
这里是xxx.vue文件，写你的静态文件的，弹出的窗体

<template>
	<div>
		<el-dialog :title="options.title" :visible.sync="dlgshow" width="960px" style="padding: 0;">
			<div style="height: 551px;">
				<iframe :src="options.tt" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</el-dialog>
	</div>
</template>

data() {
			return {
				options:{
					tt:'',
					title:'',
				},
				dlgshow:false
			}
		},

绑定值在date定义。

动态加载组件文件 这里是xxx.js文件

import vue from 'vue'
// 这里就刚刚创建的那个xxx.vue组件
import test from './test.vue'

const tt = {};
// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
tt.iframe = function(options, duration = 2000) {  
// 返回一个扩展实例构造器
const test1= vue.extend(test)
  const layerDom= new test1({    
    el: document.createElement('div'),
    data() {      
      return {        
        options:options,        
        show:true
      }
    }
  })  
  layerDom.$mount()
	layerDom.$el.style.zIndex = 9999
	document.body.appendChild(layerDom.$el)
	setTimeout(() => {
		layerDom.show = false
	}, duration)
}
  // 过了 duration 时间后隐藏
  setTimeout(() => {
    toastDom.show = false
  } ,duration)
}

// 注册为全局组件的函数
function ff() {
	vue.prototype.$tt = tt
}

export default ff

这样在main.js里应用如下，就可在组件中调用了
特别注意这里引用的是xxx.js文件

import tmp from '@/components/xxx.js'
Vue.use(tmp)

应用实例

let options = {
						pageid: 'xxxxxxxxxxxxxxxxx',
						title: "标题"
					}
					this.$tt.iframe(options)