vue组件使用iframe加载本地html页面

需求最近遇到一个需求，一个现成的页面使用jquery实现的，现在要嵌入到vue里，笔者表示要偷个懒，不想再画时间改成vue形式的,就采用iframe将改html直接渲染到界面上操作1.准备好自己的html页面，比如笔者的html文件夹叫做card,入口是index.html,放在根目录的public目录下2.在你的vue组件页面放入iframe，注意这里路径很重要，因为不仅要在运行的时候正常显示，

bug别找我

4585人浏览 · 2021-09-28 23:40:56

bug别找我 · 2021-09-28 23:40:56 发布

需求

最近遇到一个需求，一个现成的页面使用jquery实现的，现在要嵌入到vue里，笔者表示要偷个懒，不想再画时间改成vue形式的,就采用iframe将改html直接渲染到界面上
请添加图片描述

操作

1.准备好自己的html页面，比如笔者的html文件夹叫做card,入口是index.html,放在根目录的public目录下
在这里插入图片描述
2.在你的vue组件页面放入iframe，注意这里路径很重要，因为不仅要在运行的时候正常显示，打包后也需要正常显示，所以要使用的路径相当于跟vue项目public目录下的入口文件index.html同级，路径为card/index.html

<iframe src="card/index.html"  scrolling="no"  style="width: 100%;height: 500px;" frameborder="0" ></iframe>

3.这样可以完美的将页面渲染到vue页面上了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^