我就是木-优快云博客

Electron应用程序安装后如果需要在开发环境下打开控制台。在electron的官网里面得知，使用contents.toggleDevTools()能够切换开发工具，也就是调用这个方法就能够控制控制台的开启和关闭状态。在util工具文件夹里面新建一个js文件。export default function toggleDevTools() { window.addEventListener( 'keydown', (e) => { const { altKey

2022-01-18 09:14:34 8722 1

原创 Electron的使用笔记之禁用拖拽事件

Electron软件安装后如果用户拖拽文件或者图片到软件里面，会打开此文件，但是不能够关闭，因此导致体验不佳。因此可以禁用全局的拖拽事件来阻止这个行为。一、在util文件夹里面新建一个文件。export default { mounted() { this.disableDragEvent(); }, methods: { disableDragEvent() { // 当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。 window.add

2022-01-18 09:14:00 1830

原创 Electron的使用笔记之自定义窗口

无边框窗口要创建无边框窗口需要在构造函数中设置frame为false。在主线程main文件夹index.js里面。import { BrowserWindow} from 'electron';const win = new BrowserWindow({ frame: false })设置自定义拖动区域要使整个窗口可拖拽,可以在需要拖拽的元素添加以下样式-webkit-app-region: drag如果在窗口的边缘元素添加上面的样式，此时边缘就不能用鼠标对窗口大小进行调节。因此需

2022-01-18 09:13:30 1106

原创 Electron的使用笔记之主进程与渲染进程的通信

ipcMain从主进程到渲染进程的异步通信。进程：主进程。ipcRenderer从渲染器进程到主进程的异步通信。进程：渲染进程。渲染进程发送数据到主线程// 在主进程中。const { ipcMain,ipcRenderer} = require('electron')ipcMain.on('downPath', function(event, arg) { // arg是从渲染进程返回来的数据 console.log(arg) //'rendererData'});ipcRe

2022-01-18 09:13:04 637

原创 Electron的使用笔记之自动检测版本更新

使用electron-updater插件npm install electron-updater //如果使用这种安装方式package.json的devDependencies可能会没有electron-updater建议使用下面这种npm install --save-dev electron-updater注意：（1）electron-updater的最新版本有坑，需要降低版本。npm install --save-dev electron-updater@3.1.2（2）安装完成

2022-01-18 09:11:19 3056 11

原创 html2canvas 使用总结

使用场景点击按钮弹出弹窗，显示截图出来的图片。点击保存按钮调用接口保存图片到服务器。封装html2canvas的使用组件新建screenshot.vue文件<template> <el-dialog title="截图" :visible.sync="dialogShow" width="50%" @close="handleClose" > <div v-if="!imgUrl">正在获取截图信息</div&

2022-01-18 09:10:01 1222

原创 Vue中几种常用的组件通信方式

在Vue项目开发中，会使用到很多组件，组件间的通信是Vue中的核心知识，掌握这几个知识，会让你Vue开发中游刃有余。父子间通信父传子<div :fatherData = 'fatherData'></div>//child.vue//第一种//props: ["fatherData"],//第二种 props: { fatherData: {

2021-07-23 16:27:07 178

原创手写一个简单的MVVM模式

index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t

2021-07-14 18:50:52 243

原创高德地图之周边搜索和路线规划

前言：当我们需要用到高德地图的时候，周边搜索和路线规划是常见的功能，我们也常常在旅游官网中见到他们的身影，因此接下来在Vue项目中来简单的演示一下这两个功能吧。1.引入可以直接在public/index.html的头部添加，记住需要放到</body>的前面。<body>//...其他代码<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"

2021-07-10 10:05:02 4795 2

原创几种常见的设计模式

简单工厂模式工厂模式其实就是将创建对象的过程封装起来。就像工厂一样，我们不需要关心工厂怎么制造东西，我们只需要提供材料，就能得到我们想要的东西。先写一个简单构造函数。function Clothes(color, size, gender) { this.color = color this.size = size this.gender = gender }const clotheA = new Clothes(color, size, gender)很好，我们可以

2021-07-10 09:50:10 116

weixin_45740906的博客

原创数组对象深拷贝

原创 Electron的使用笔记之应用程序打开控制台