欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue2.0 + element-ui +iframe在页面 中嵌入外部网站

程序员文章站 2022-03-04 23:51:16
...
vue2.0 + element-ui +iframe在页面 中嵌入外部网站

自从用饿了么框架重构项目以来,遇到 很多问题,我都有一一记录下来,现在特喜欢这个框架,说实话,如果你是用了vue这个技术栈的话,一定要用饿了么的pc端框架哦,遇到问题的时候在网上百度一下,就能找到解决方案,还有很多社区可以讨论,社区文档都比较成熟,很容易上手~~

开发相关资料文档:

Element UI手册:https://cloud.tencent.com/developer/doc/1270
github地址:https://github.com/ElemeFE/element

vue2.0官方网站:http://caibaojian.com/vue/guide/installation.html
Element UI官方网站:https://element.eleme.cn/#/zh-CN


1:安装node

2:查看node的版本号

3:安装淘宝npm镜像

4:安装全局vue-cli脚手架

上面是准备工作,搭建开发环境,准备完后之后,就可以继续构建项目了.

5:开始进入主题,初始化一个vue项目

我这里是在d盘里面新建一个项目,先用d:的命令,回车键进入d盘;回车键默认创建项目信息。

vue init webpack itemname
vue2.0 + element-ui +iframe在页面 中嵌入外部网站
image

出现这样的提示,初始化成功

vue2.0 + element-ui +iframe在页面 中嵌入外部网站
image

根据提示输入运行项目(安装依赖很重要哦,千万不要忘记了,忘记安装后面出的问题就比较多哦~)

# 安装依赖,走你
$ cd itemname
$ npm install
$ npm run dev

在浏览器就可以看到效果了。

vue2.0 + element-ui +iframe在页面 中嵌入外部网站
image

运行初始化demo,输入命令npm run dev;运行一下初始后的demo,弹出访问地址,如果没有问题则进行安装elementUI;准备好好之后,开始引入饿了么elementUI组件。

6:安装 elementUI

npm i element-ui -S

快捷键ctrl+c,终止批处理操 作吗(Y/N),在输入命令npm i element-ui -S

vue2.0 + element-ui +iframe在页面 中嵌入外部网站
image
注意:安装过程中出现这样的bug的时候,需要解决
vue2.0 + element-ui +iframe在页面 中嵌入外部网站
image

解决办法:尝试 删除项目中的 package-lock.json 文件 和 node_modules 文件夹,然后再尝试 npm install.

成功安装组件显示如下

vue2.0 + element-ui +iframe在页面 中嵌入外部网站
image

7:打开main.js,加入element-ui的js和css

import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
vue2.0 + element-ui +iframe在页面 中嵌入外部网站
image

=====
今天要用到的是使用是使用iframe
在网页种嵌入一个外部网站并且显示出来
是的宽度高度都自适应屏幕。

<template>
    <div >
        <iframe src="https://www.xxxxx.com/" id="map" scrolling="no" frameborder="0" style="position:absolute;top:4px;left: 210px;right:0px;bottom:10px;"></iframe>
    </div>
</template>
 
 
<script>
    export default {
        data () {
            return {
            }
        },
        mounted(){
            /**
            * iframe-宽高自适应显示   
            */
            function changeMapIframe(){
                const map = document.getElementById('map');
                const deviceWidth = document.body.clientWidth;
                const deviceHeight = document.body.clientHeight;
                map.style.width = (Number(deviceWidth)-240) + 'px'; //数字是页面布局宽度差值
                map.style.height = (Number(deviceHeight)+764) + 'px'; //数字是页面布局高度差
            }

            changeMapIframe()

            window.onresize = function(){
                changeMapIframe()
            }
        }
    }
</script>

完成~~~