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

出現這樣的提示,初始化成功

根據提示輸入運行項目(安裝依賴很重要哦,千萬不要忘記了,忘記安裝後面出的問題就比較多哦~)

# 安裝依賴,走你
$ cd itemname
$ npm install
$ npm run dev

在瀏覽器就可以看到效果了。

運行初始化demo,輸入命令npm run dev;運行一下初始後的demo,彈出訪問地址,如果沒有問題則進行安裝elementUI;準備好好之後,開始引入餓了麼elementUI組件。

6:安裝 elementUI

npm i element-ui -S

快捷鍵ctrl+c,終止批處理操 作嗎(Y/N),在輸入命令npm i element-ui -S

注意:安裝過程中出現這樣的bug的時候,需要解決

解決辦法:嘗試 刪除項目中的 package-lock.json 文件 和 node_modules 文件夾,然後再嘗試 npm install.

成功安裝組件顯示如下

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

=====
今天要用到的是使用是使用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>

完成~~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章