vue嵌套外部页面，并添加关闭外部页面按钮

₍•ʚ•₎呀呀

已于 2023-06-13 09:28:26 修改

阅读量451

点赞数

文章标签： vue.js 前端

于 2023-06-12 09:08:47 首次发布

本文链接：https://blog.csdn.net/weixin_60886885/article/details/131161840

版权

<template>
//按钮
 <div class="view-more" @click="openPopup">
              <app-svg-icon icon-name="light-bulb" class="w-17 h-17" />
              <div class="text">查看更多设备</div>
</div>

//跨端页面容器
<div v-if="popupVisible" class="device-select-popup">
    <div class="close-header">
      <app-svg-icon icon-name="x-close" class="w-18 h-18" @click="handleClosePopup" />
    </div>

    <iframe src="https://跨端页面链接" scrolling="yes" style="width: 100%; min-height: 90vh" frameborder="0"></iframe>
  </div>
</template>

const popupVisible = ref(false)

//打开跨端页面弹窗
const openPopup = () => {
  popupVisible.value = true
}
//关闭跨端页面弹窗
const handleClosePopup = () => {
  popupVisible.value = false
}