????下午經(jīng)理讓我在客戶服務平臺創(chuàng)建一個新的路由,把我們之前寫的報表工具嵌套進去,之前的是通過ip訪問的,討論了一會決定用神器 iframe,直接嵌套進去,之前也寫過,代碼這個東西,CV才是精髓,去某度看了一下,隨后開始操作
????首先創(chuàng)建好了路由的權限,讓他在頁面也可以進行點點點的操作,之后創(chuàng)建vue頁面
去頁面看看
? ? ?成功出現(xiàn),下面看一下我之前開發(fā)的頁面的樣子,記住這個ip,這個頁面非常完美啊,有條件查詢,有分頁,有......
然后直接使用iframe嵌套進去
嵌套進去之后,屬實有點怪
先不管UI了,最后再調,我覺得是我引入頁面的問題,我待會去設置一下應該就是可以了,分享一下代碼
<template>
? <div>
? ? <iframe src="外部網(wǎng)頁url" id="mobsf" frameborder="0" style="position:absolute;"></iframe>
? </div>
</template>
<script>
? export default {
? ? data () {
? ? ? return {
? ? ? }
? ? },
? ? mounted(){
? ? ? /**
? ? ? * iframe-寬高自適應顯示
? ? ? */
? ? ? function changeMobsfIframe(){
? ? ? ? const mobsf = document.getElementById('mobsf');
? ? ? ? const deviceWidth = document.body.clientWidth;
? ? ? ? const deviceHeight = document.body.clientHeight;
? ? ? ? mobsf.style.width = (Number(deviceWidth)-220) + 'px'; //數(shù)字是頁面布局寬度差值
? ? ? ? mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //數(shù)字是頁面布局高度差
? ? ? }
? ? ? changeMobsfIframe()
? ? ? window.onresize = function(){
? ? ? ? changeMobsfIframe()
? ? ? }
? ? },
? }
</script>
現(xiàn)在要解決的是url的問題了,在公司肯定不會讓你每次引入頁面都把url寫死的,所以我們來解決他
找到你們項目中負責控制url的文件,我的是這個,所以我就在這里直接規(guī)定
搞了一晚上,一直NaN原來這個.env文件是有點東西的給你們普及一下
.env 全局默認配置文件叮趴，不論什么環(huán)境都會加載合并
.env.development 開發(fā)環(huán)境下的配置文件
.env.production 生產環(huán)境下的配置文件
注意：屬性名必須以VUE_APP_開頭刘绣，比如VUE_APP_XXX
.env：
其中最重要的是,.env文件數(shù)據(jù)配置文件,修改完之后一定要重啟,切記
上一下代碼
說一下引入的思路,先引入hrCloudCommon里面的js
然后初始化設置的時候定義一個方法,在methods里面給路徑賦值
通過data的return到上面的template里面
隨后iframe的src記得加上:
:的意思就是給這個對象賦Vue屬性
<template>
? <div>
<!--? ? <iframe :src="ReportUrl1" id="mobsf" frameborder="0" style="position:absolute;"></iframe>-->
? ? <iframe :src="ReportUrl1" style="width: 100%;height: 100%;min-height: 600px"></iframe>
? </div>
</template>
<script>
? import Report from '@/api/common/hrcloudCommon';
? ? export default {
? ? ? ? name: "Report",
? ? ? data () {
? ? ? ? return {
? ? ? ? ? ReportUrl1:''
? ? ? ? }
? ? ? },
? ? ? mounted(){
? ? ? ? ? this.showReport();
? ? ? ? /**
? ? ? ? * iframe-寬高自適應顯示
? ? ? ? */
? ? ? ? function changeMobsfIframe(){
? ? ? ? ? const mobsf = document.getElementById('mobsf');
? ? ? ? ? const deviceWidth = document.body.clientWidth;
? ? ? ? ? const deviceHeight = document.body.clientHeight;
? ? ? ? ? mobsf.style.width = (Number(deviceWidth)-220) + 'px'; //數(shù)字是頁面布局寬度差值
? ? ? ? ? mobsf.style.height = (Number(deviceHeight)-80) + 'px'; //數(shù)字是頁面布局高度差
? ? ? ? }
? ? ? ? changeMobsfIframe()
? ? ? ? window.onresize = function(){
? ? ? ? ? changeMobsfIframe()
? ? ? ? }
? ? ? },
? ? ? methods:{
? ? ? ? ? showReport(){
? ? ? ? ? ? let ReportUrl = Report.Report_Cli_URL+"reportTools/cusMain";
? ? ? ? ? ? // let ReportUrl = Report.Report_Cli_URL
? ? ? ? ? ? console.log("ReportUrl",ReportUrl)
? ? ? ? ? ? // let ReportUrl = 'http://192.168.251.62:9093'
? ? ? ? ? ? let HRUrl = Report.HRCLOUD_URL
? ? ? ? ? ? this.ReportUrl1 = ReportUrl
? ? ? ? ? ? //console.log("ReportUrl",ReportUrl)
? ? ? ? ? ? //alert("1")
? ? ? ? ? }
? ? ? }
? ? }
</script>
<style scoped>
</style>
最后就嵌套成功了
事情并沒有結束,經(jīng)理說不要這個頁面,要根據(jù)右上角的ciic188的id進行查詢,判斷,這可難住我了,先寫根據(jù)id拼接頁面吧,其他的先不管
showReport(){
? let ReportId = '4417';
? let ReportUrl = Report.Report_Cli_URL+"reportTools/newreportList/"+ReportId;
? console.log("ReportUrl",ReportUrl)
? this.ReportUrl1 = ReportUrl
}
可以看到直接規(guī)定一個 ReportID 然后根據(jù)經(jīng)理給出的路徑一拼接就可以了
但沒說這個ReportId是啥,經(jīng)理讓我自己找,這就有點麻煩了,下次給大家分享一個好東西
先分享一下成功的圖片
但是這個ReportId是死的所以需要確定id,也就是Id,這里我找到之后用sessionStorage把id存進去了,然后在這個id取出就可以了大致代碼是這樣
showReport(){
? let ReportId =? sessionStorage.getItem("cusId")
? console.log("ReportId",ReportId)
? let ReportUrl = Report.Report_Cli_URL+"reportTools/newreportList/"+ReportId;
? console.log("ReportUrl",ReportUrl)
? this.ReportUrl1 = ReportUrl
? if (ReportId != ""){
? ? this.$message.success("查詢成功")
? }else {
? ? this.$message.warning("暫無數(shù)據(jù)")
? }
}
以上就是Vue使用iframe前臺外部頁面的詳細內容，更多請關注我分享的其它相關文章蕾羊！
