vue使用iframe切换src路径时不重新刷新
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
vue使用iframe切换src路径时不重新刷新
需求:
有一个下拉框联动着iframe的src,下拉框每切换一下,iframe就重新刷新一下。
问题:
如果只是用v-model去绑定iframe的src,手动修改是无法完成重新请求刷新的。
解决思路:
因为使用docment去操作iframe的很麻烦,还有跨域的问题,所以使用v-if的方式重新渲染页面。
实现步骤
<div class="form_box_item">
<el-form :model="warehouse" :inline="true" label-width="50px" style="margin-top: -10px;margin-bottom: 10px">
<el-row :gutter="10">
<el-col :span="22">
<el-form-item label="仓号:" prop="warehouse">
<el-select v-model="warehouse.cloudId" size="small" @change="handleIframe">
<el-option v-for=" (item,index) in warehouseList" :key="index" :label="item.warehouseName"
:value="item.cloudId">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item>
<el-button size="mini" @click="retureRoute()" v-show="showReture">返回</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div style="height:700px;margin-top: -50px;margin-bottom: 20px">
<iframe :src="flowSrc" style="height:100%; width:100%;margin:0;border:0;" v-if="loading" ref="iframeId" id="myFrameId" name="myFrameName"></iframe>
</div>
方法
data() {
return {
warehouseList: [],
warehouse: {
cloudId: undefined
},
loading: true,
flowSrc: '',
showReture: false
};
},
methods: {
/** 切换仓房 */
handleIframe(e) {
console.log('切换', e)
this.warehouse.cloudId = e
this.loading = false
this.flowSrc = 'http://10.0.11.9:2080/#/grain-room/condition/current?user=grainszy&pass=bupt%40Htl301&grainRoomId=' + this.warehouse.cloudId; //直接给flowSrc赋值链接
setTimeout(()=>{
this.loading = true
},1000)
}
}
v-if做一个延迟加载就可以啦
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)