electron窗口锁定、解锁、解决阴影问题

收藏

一、官方文档的方式

win.isKiosk()//判断是否锁定
win.setKiosk(true)//锁定
win.setKiosk(false)//解锁

但是以上方法在mac os会全屏显示。

二、全兼容解决办法

渲染进程:

<template>
    <div class='list' @mousedown="mousedown" :style="{ '--hover-color': hoverColor }">
        <div class="icon">
            <span @click="close" :class="isKiosk==true?'no':''">关闭</span>
            <span @click="kiosk">锁定</span>
        </div>
        这是list页面
    </div>
</template>

<script setup>
let isKiosk = ref(false);
let hoverColor = ref('rgba(0,0,0,.5)');
const close = ()=>{
    electron.ipcRenderer.invoke('close-list')
}
const kiosk = ()=>{
    isKiosk.value = !isKiosk.value;
    if( isKiosk.value ){
        hoverColor.value = '';
    }else{
        hoverColor.value = 'rgba(0,0,0,.5)'
    }
    electron.ipcRenderer.invoke('kiosk',{
        isKiosk:isKiosk.value
    });
}
import { ref } from 'vue'
let isKeyDown = ref(false);
let dinatesX = ref(0);
let dinatesY = ref(0);

const mousedown = ( e )=>{
    isKeyDown.value = true;
    dinatesX.value = e.x;
    dinatesY.value = e.y;

    document.onmousemove = (ev) => {
        if(isKeyDown.value){
            const x = ev.screenX - dinatesX.value;
            const y = ev.screenY - dinatesY.value;
            //给主进程传入坐标
            let data = {
                appX:x,
                appY:y,
                isKiosk:false
            }
            electron.ipcRenderer.invoke('custom-list',data);

        }
    };
    document.onmouseup = (ev) => {
        isKeyDown.value = false;
    };
  
}
</script>

<style scoped>
.no{
    visibility: hidden;
    background-color: red;
}
.list{
    position: absolute;
    left:0;
    right: 0;
    bottom:0;
    top:0;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing:2px;
    font-size:21px;
}
.list:hover { background-color: var(--hover-color); }
.icon{
    position: absolute;
    left:0;
    top:0;
}
</style>

主进程:

//创建窗口
context.listWindow = new BrowserWindow({
  width: 400,
  height: 100,
  show: false,
  frame:false,
  resizable:false,
  transparent:true,//设置透明
  hasShadow:false,//去除阴影
  alwaysOnTop:true,//置顶
  ...(process.platform === 'linux' ? { icon } : {}),
  webPreferences: {
    preload: join(__dirname, '../preload/index.js'),
    sandbox: false
  }
})
    
let isKiosk = false;
if( context ){
  ipcMain.handle('custom-list',(event,res)=>{
    console.log( isKiosk  )
    if( !isKiosk ){
      let x = res.appX;
      let y = res.appY;
      context.listWindow.setPosition(res.appX,res.appY);
    }
  })
}
  
if( context ){
    ipcMain.handle('kiosk',(event,res)=>{
      isKiosk = res.isKiosk;
    })
}


评论(

您还未登录,请先去登录
表情
查看更多

相关作者

  • 获取点赞0
  • 文章阅读量133

相关文章

暂无相关文章

联系小鹿线

咨询老师

咨询老师

扫码下载APP