Vue中嵌入可浮动的第三方网页窗口的示例详解

目录

• 1. 思路Demo
• 2. 实战Demo

1. 思路Demo

以下Demo提供思路参考，需要结合实际自身应用代码

下述URL的链接使用百度替代！

方式 1：使用 iframe 浮窗

可以创建一个固定在页面右下角的 iframe，让它加载该 script 生成的内容

    
    
    
    




    
    打开浮窗

    
    

        ×
        
    

    

方式 2：使用 div + script 动态加载

script 代码是动态生成 HTML 的，可以创建一个浮窗 div，然后在 div 里动态插入 script

    
    
    
    




    
    打开浮窗

    
    

        ×
        

    

    

方式 3：使用 dialog 元素

想要更现代化的 UI，可以使用

    关闭
    


打开浮窗

  ×
  

.floating-text {
  font-size: 15px;  /* 调整字体大小 */
  margin-left: 5px; /* 控制与图标的间距 */
  color: #fff;      /* 文字颜色 */
}