更新记录

1.0.0（2026-06-09）

弹窗

平台兼容性

uni-app(4.75)

Vue2 Vue2插件版本 Vue3 Vue3插件版本 Chrome Safari app-vue app-vue插件版本 app-nvue app-nvue插件版本 Android Android插件版本 iOS 鸿蒙
√ 1.0.0 √ 1.0.0 × × √ 1.0.0 √ 1.0.0 10.0 1.0.0 × ×
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
× × × × × × × × × × - ×

yao-break-window

穿透全局弹窗

vue2代码示例


<view class="content">
    <button @click="showModel">打开</button>
    <button @click="editModelPosition">修改位置</button>
    <button @click="editContent">修改内容</button>
    <button @click="hideModel">关闭</button>

</view>

import * as bWindows from '@/uni_modules/yao-break-window';
import {
    ref
} from 'vue';
var getWindowInfo = uni.getWindowInfo();
var screenWidth = getWindowInfo.screenWidth;
export default {
    data() {
        return {}
    },
    methods:{
        showModel(){
            bWindows.showPopup({
                width: 300,
                height: 60,
                top: 0,
                left: (screenWidth-300) /2,
                data: {
                    id: 1
                },
                tagHtml: `
                    <!DOCTYPE html>
                      <html>
                      <head>
                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                        <style>
                          body {
                            margin: 0;
                            padding: 0;
                            width: 300px;
                            height: 60px;
                            border-radius:10px;
                            overflow:hidden;
                            background-color: rgba(55, 55, 55, 0);
                          }
                          #div1{
                              border:1px solid #cccccc;
                              box-sizing: border-box;
                              border-radius:10px;
                          }
                        </style>
                      </head>
                      <body>
                        <div id="div1" style="background:#ffffff; width:100%; height:100%;overflow-y:scroll;">
                            安卓弹窗
                        </div>
                      </body>
                      </html>
                `
            }, (res) => {
                console.log(res);
            })

        },
        editModelPosition(){
            bWindows.updatePosition({
                top: getWindowInfo.statusBarHeight + 150,
                left: (screenWidth-300) /2,
                animate: true,
                duration: 1000
            });
        },
        editContent(){
            //写入js
            var jsString = `
            var div1 = document.getElementById('div1');
            div1 = \`
                <div>1111</div>
            \`;
            div1.style.background = "#cccccc";
            `;

            bWindows.setJS(jsString);
        },
        hideModel(){
            bWindows.closePopup((res) => {
                console.log(res);
            });
        }
    }
}

vue3代码示例


<view class="content">
    <button @click="showModel">打开</button>
    <button @click="editModelPosition">修改位置</button>
    <button @click="editContent">修改内容</button>
    <button @click="hideModel">关闭</button>

</view>
import * as bWindows from '@/uni_modules/yao-break-window';
import {
    ref
} from 'vue';
var getWindowInfo = uni.getWindowInfo();
var screenWidth = getWindowInfo.screenWidth;

const showModel = () => {

    bWindows.showPopup({
        width: 300,
        height: 60,
        top: 0,
        left: (screenWidth-300) /2,
        data: {
            id: 1
        },
        tagHtml: `
            <!DOCTYPE html>
              <html>
              <head>
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <style>
                  body {
                    margin: 0;
                    padding: 0;
                    width: 300px;
                    height: 60px;
                    border-radius:10px;
                    overflow:hidden;
                    background-color: rgba(55, 55, 55, 0);
                  }
                  #div1{
                      border:1px solid #cccccc;
                      box-sizing: border-box;
                      border-radius:10px;
                  }
                </style>
              </head>
              <body>
                <div id="div1" style="background:#ffffff; width:100%; height:100%;overflow-y:scroll;">
                    安卓弹窗
                </div>
              </body>
              </html>
        `
    }, (res) => {
        console.log(res);
    })

}

const toNav = () => {
    uni.navigateTo({
        url:"/pages/windows/windows"
    })
}

const editModelPosition = () => {
    bWindows.updatePosition({
        top: getWindowInfo.statusBarHeight + 150,
        left: (screenWidth-300) /2,
        animate: true,
        duration: 1000
    });
}

const editContent = () => {
    //写入js
    var jsString = `
    var div1 = document.getElementById('div1');
    div1 = \`
        <div>1111</div>
    \`;
    div1.style.background = "#cccccc";
`;

    bWindows.setJS(jsString);
}

const hideModel = () => {
    bWindows.closePopup((res) => {
        console.log(res);
    });
}

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论 向官方投诉

暂无用户评论。