如何在vue的methods 里使用 ant 的 Modal 弹出层？

Question

系统说明：就是平时用的PC端管理后台，打开的所有页面都是后台读取html模板，处理后输出到前端显示。以前前端都是用jquery，现在打算换vue，只用vue输出数据，绑定按钮操作等，，不需要main.js等配置，，路由控制都是后台java处理的，vue都是每个页面直接加载vue.js

目的：需要实现个弹出层的功能，类似jquery插件layer，直接调用就可以输出html代码，不是用组件标签事先放进页面去操作的，弹出层纯粹是在 vue的 methods 里调用

效果：在数据列表页面，直接点击编辑，弹出编辑页面，弹出层的内容是通过请求到后台读取到表单的html页面（如何请求的不用关心，只说从后台拿到html后，如何弹出显示层），表单页面也是用vue绑定处理，用layer以iframe加载完全没问题，现在就是想换成直接在页面加载，不要iframe

看了Mint UI、Ant Designer 等都挺好的，但教程里的实现方式都是在html里用标签，而且要在main.js 里进行配置，，我们不打算使用这种方式，，

请问大侠们，，有没有好用的vue弹出层？ 或 ant 里的Modal 在js代码里如何直接调用？

Answer 1

你这个需求在前端有个专门的术语,叫动态渲染

就有点类似于js里面的alert,全局只需要调用一个方法就行了

• 主要是两个vue方法
• Vue.extend
• vm.$mount

function alert (param) {
// 创建弹框 参数就是你从服务器上获取的
param || (param = '<div id="test">rww</div>')
var test = Vue.extend({ template: param})
// 将弹框挂载到dom节点上 即显示出来
new test().$mount('#rww')
}

alert()

我也只能说到这儿了,,,因为我自己也没实操过动态渲染组件,所以第三方库的组件具体怎么引用到你的服务端上,或者把他和你服务端返回的数据拼接到一起,你要自己研究研究啦