李剑一-CSDN博客

效果展示基本原理目前常见的换肤方案无非几种：通过class选择器/id选择器选中需要更换的DOM，直接修改颜色书写多套css，通过js进行css的切换使用modifyVars()方法，修改less.js中相应的less变量更换颜色在这里提供一种新知晓的换肤开发方案方案分享一下：使用less，将其中的颜色提升到全局，各自组件/页面引用‘顶级’颜色，通过js修改顶级颜色达到各模块换肤的目的。开发过程安装及配置npm install style-resources-loader -Dn

2022-04-18 20:54:39 2221

原创 vue-quill-editor中绑定enter快捷键失灵

问题发现使用vue-quill-editor 作为聊天工具中输入框使用，有个需求是实现动态配置 enter / ctrl + enter 实现快捷发送消息。但是在实操的过程中发现通过 addBinding 事件绑定不生效。quill.keyboard.addBinding({ key: 'enter'}, function(range, context) { console.log('发送消息');});问题解决vue-quill-editor 中因为enter和ctrl这种特殊的键盘

2022-04-07 22:03:20 1317

原创 vue中的可拖拽宽度div

vue中可拖拽宽度的div，横向拖动&纵向拖动

2022-04-06 23:23:34 2714 5

原创使用uni-app开发的小程序发布到微信平台

uni-app平台开发使用 HBuilder X 应用开发 uni-app 程序，直接创建 uni-app 项目，因为只有这样创建的项目才能被打包为其他平台的程序。创建成功后接下来就是一系列的编码…编码完成后首先需要配置一下 HBuilder X 和微信开发者工具让两个软件连接起来才能进行调试。首先打开微信开发者程序，打开设置 —— 安全设置，将服务端口打开，复制下方的端口号。打开 HBuilder X 中的设置，将 ‘内置的web服务器端口’ 配置为微信开发者工具中复制的端口号，

2022-03-03 20:35:45 1310

原创 vue中props数据变化的问题

发现问题在vue项目中，父子组件数据传递是最常见的场景，但是今天在开发过程中父级数据传递到子组件，控制子组件的显隐，发现存在问题，一直监听不到数据的变化，详细排查后发现是因为props在传递数据的时候子组件接收到数据后没有及时发生变化导致的。这里使用的是 iview 框架// 子组件<template> <Modal v-model="isShowModel" title="测试弹窗"> <p>Conte

2022-02-22 21:14:47 9200 5

原创增强粘贴quill-editor

有功夫的兄弟可以看一下我的博客 www.maple.ink粘贴图片到富文本直接拖拽图片到富文本，或者从系统中复制图片文件，在富文本中粘贴，都无法将图片放入富文本。前者会直接在浏览器中打开新窗口，后者直接无任何反应。通过安装 quill-image-extend-module 增强模块使富文本编辑器具备对图片拖拽放入富文本框的能力，但不具备复制粘贴进入富文本的功能。这里可以配合 quill-image-resize-module 模块设置图片的大小。// 引入图片增强模块import {conta

2022-02-19 21:39:54 1140

原创扩展quill-editor的工具栏

有功夫的兄弟可以看看我的博客 www.maple.ink扩展自定义工具栏增加自定义的 toolbar ，在 mounted 方法中监听DOM节点创建，向内插入图标/文字，即可展示出来。在 handler 对象中增加对上方自定义 toolbar 的监听，触发方法。// 首先在 toolbar 中增加相应的参数，这时在页面中相应的 DOM 结构其实已经创建完成了editorOptions: { modules: { toolbar: { contain

2022-02-19 21:37:36 1167

原创使用vue-qill-editor

有功夫的兄弟可以看看我的博客 www.maple.ink安装&挂载在非Vue项目中可以通过 CDN 的方式引入，但是在Vue项目中更推荐使用 npm 安装的方式进行使用。不甚清楚的地方大家可以查阅翻译的官方文档。npm i vue-quill-editor安装成功后可以选择全局挂载富文本编辑器/组件内挂载两种方式// main.js --- 全局挂载富文本编辑器import VueQuillEditor from 'vue-quill-editor';// 引入相应的css样式

2022-02-19 21:35:06 628

原创键盘按键Code值

字母键按键键码按键键码A65N78B66O79C67P80D68Q81E69R82F70S83G71T84H72U85I73V86J74W87K75X88L76Y89M77Z90数字键按键键码按键键码048553149654250755

2022-02-19 21:31:08 2788

原创 hexo搭建博客

hexo简介Hexo 是一个快速、简洁且高效的静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，通过框架生成静态HTML文件，通过打包形成一个完整的静态博客项目。hexo搭建安装Nodejs需要先行安装 Node.js (版本不能低于10.13，推荐使用12.0以上版本)Hexo版本最低兼容Nodejs版本6.0+12.13.05.0+10.13.04.1 - 4.28.104.08.63.3 - 3.96.93.

2022-02-19 21:30:06 472

原创百度UEditor编辑器设置工具栏初始值

UEditor编辑器设置工具栏默认值

2021-12-10 13:35:29 681

原创使用ant-design中v-mode和v-decorator冲突问题

项目场景：使用ant-design的form组件：在a-form组件中使用输入框组件时，v-model无法双向绑定数据问题描述：启用v-decorator进行输入框数据校验时，v-model绑定数据无法绑定<a-form :form="form"> <a-form-item label="name"> <a-input v-model="name" v-decorator="['name', { rules: [{

2021-11-19 15:14:30 1865

原创安装less报错TypeError: this.getOptions is not a function

项目场景：使用less开发文件问题描述：less安装报错 Failed to compile with 1 error Syntax Error: TypeError: this.getOptions is not a function 原因分析：当前版本less和less-loader版本不匹配，需要更换less-loader版本解决方案：安装less版本为 4.1.1安装less-loader版本为 7.3.0<style scoped lang="le

2021-09-03 18:10:31 524

原创热力图在echarts渲染地图上实现

自律给你自由需求今天公司有一个小需求，将热力图显示在地图上，由于没有精准的世界地图数据，也没有对接百度/高德的地图数据，仅仅使用geojson渲染出一个大致的世界地图，然后将热力图根据坐标显示在这个echarts渲染的地图上。思路将世界地图的geojson数据注入到echarts中使其渲染出地图将热力图地理坐标数据重新组合为数组形式将组合完的热力图数据匹配到地图上代码<!doctype html><html lang="en"><head> .

2021-03-23 17:37:50 3206 2

原创 electron-store存储数据

存储数据我并没有采用数据库方案，仅仅存储数量不多的简单数据也不至于动用数据库。这里选择的是electron-store作为主要存储工具，这个工具即使不作为主要存储工具仅存储用户启动项也是极好的。安装electron-store，如果使用npm安装不成功则使用cnpm安装，总有一款适合你。使用方法：const Store = require('electron-store'); const store = new Store();//如果需要加密存储就用下面的//const store = n

2021-03-10 14:57:16 2535 2