V_AYA_V的博客

vue3+vite+ts tinymce富文本组件封装

vue2电池小图标，根据电量展示不同的颜色

团队代码风格统一一直是博主想干又没有时间去干的事情，刚好借着新项目搭建，尝试一下使用Eslint及Prettier工具提升一下项目代码的整体质量。本文在配置方面仅做简单的配置，流程熟悉可以参考Eslint及Prettier官方文档定制自己喜欢的标准。

因最近业务需求需要实现类似于Element中的MessageBox组件的效果，所以尝试封装了一个类似的小组件，本文不介绍封装，因为受到MessageBox的启发，所以通过源码注释的方式详细剖析一下Element的MessageBox实现思想。

eventBus中常见的无非就是消息发布，消息监听，取消监听这几个常用的方法。通过事件监听与发布，可以实现复杂组件中的事件解耦。

vue优雅清除定时器

H5页面在IOS微信webview中无法校验视频文件时长问题

vite+vue项目启动报错，思考良久，找不到原因，在github上查看到一issues，大致原因一样，记录一下 issuse地址描述：大致意思是装了管控软件，将一些文件夹直接给加密了。想来本公司之前是有做过防泄密操作，记录一下。...

省市区联动作为基础组件在各项目中都有使用，抽空封装一下。省市区JSON文件保存在本地，组件下级数据根据上级数据联动，支持删除叶子层级数据。效果图如下：<template> <div class="regionselect-container"> <a-form-model layout="inline" :model="form" :label-col="labelCol" :wrapper-col="wrap.

1、执行 vue add style-resources-loader 命令，选择less2、安装好后vue.config.js会自动添加pluginOptions，配置引入地址即可//vue.config.js pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, 'src/styles/v.

前端项目在登录时需要使用验证码防止机器破解登录，校验码的生成可以后端生成也可以前端生成，本文探究前端生成校验码实现方式并封装成vue组件，以供参考。<template> <div class="s-canvas" @click="createdCode"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div>&.

经常接到这样的需求，自己实现一个弹窗，点击弹窗以外地方隐藏当前弹窗，抽空安排一下vue自定义指令。实现思想监听点击事件判断点击事件target会否为当前dom主意取消监听事件实现过程实现clickoutside .jsconst clickoutside = { bind(el, binding) { const documentHandler = (e) => { if (el.contains(e.target)) return false .

最近在探究使用vite+vue3搭建一个后台框架，为了更好的扩展性，将系统可能用到的所有颜色以及部分属性定义变量作为单独的less文件。在全局的index.less中定义之后，在其它文件使用直接报错，提示@primary-color为undefined解决方案，在vite配置文件css中加上modifyVars。重启项目就ok了// vite.config.js...css: { preprocessorOptions: { less: { modif.

在某些业务场景中，我们需要监听元素的尺寸变化处理一些逻辑问题。但是没有像window的resize方法一样的方法直接能够监听到DOM尺寸的变化，所以只能采用曲线救国的方式。实现思想动态创建 Object标签，追加到容器中，宽高继承容器100%；load完成后获取 Object中的contentDocument，通过defaultView添加resize事件监听；实现过程实现domResize.jsconst domResize = { bind(el, binding) { .

有一需求，需要根据后台返回的坐标集在canvas中绘制图形。由于canvas使用不多，简单记录学习一下。整个需求实现主要分为三个部分一.前端等比展示a4纸大小canvas画布1. A4纸大小：210×297mm一般在ps中可以根据分辨率的不同转换成不同的px单位：当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595当分辨率是120像素/英寸时，A4纸像素长宽分别是2105×1487当分辨率是150像素/英寸时，A4纸像素长宽分别是1754×1240当分辨率是300像素/英寸时，A.

前端项目越来越大，导致首页加载缓慢，了解到compression-webpack-plugin插件能够将项目代码打包压缩，如果要使用需要配合nginx达到提升网页加载速度效果。插件文档传送门先放一波压缩前和压缩后的对比压缩前：压缩后：可以看出来经过压缩后项目缩小的不是一个等级，接下来介绍插件使用安装插件npm install --save-dev compression-webpack-plugin配置vue.config.js（压缩配置可以参考官方文档，根据自己需求选择）.

在是用element-ui组件中遇到了几个非常奇怪的问题。经过一番捣鼓终于解决了，在这里总结一下，希望正在踩坑的朋友们能看到。打开el-drawer组件，点击右侧会聚焦整个弹框，并显示很丑的聚焦框，具体效果见下图解决办法：// less样式修改/deep/ .el-drawer__container:focus { outline: none; }/deep/ .el-drawer:focus { outline: none; }组件设置了withHeader为fals.

项目数据分析需要是用散点图，但是在官网展示的案例中没有产品想要的效果，所以花了一点时间定制散点图，另外由于散点图的数据要多一些才比较直观，所以使用了mock生成假数据为了方便后面与后台对接，首先确定了数据结构（可以按照自己喜欢的结构自行构建）[ { time: 6, rate: 90, name: 'Mick' } ...]定制1：tooltip展示除散点标记数值之外的数据。tooltip: { trigger: 'item', formatte.

最近遇到一需求，从一个看板页面跳转到其他页面之后再回到看板页面，需要定位到跳转之前的位置。主要用到了vue的keep-alive，功能整体实现难度不大，但是总结一下实现过程中遇到的一些问题。1.keep-alive简介官网传送门2.路由修改为了区别不同路由的缓存与否，在路由配置中meta添加keepAlive字段，修改App.vue//router.js{ path: '/xxx', name: 'xxx', component: ()=>{} meta: { .

最近vue项目中有很多操作数据的需求，考虑到lodash功能之强大，决定在项目中使用一下。1.安装lodashcnpm i lodash -S npm i lodash -S --registry=https://registry.npm.taobao.org2.引入//全局引入，在main.js中：let _ = require('lodash')Vue.prototype._ = _ //全局挂载lodash//按需引入let _fun= require('lodash/fun'.

最近遇到一个需求，前端要求动态生成checkbox并实时将选中的值展示出来。组件使用了antd-vue的checkbox。其实上这个需求是很简单的，但是测试提的一个优化项导致了悲剧的开始！设计稿大致就是这个样子，很简单：使用过antd-vue组件的朋友们可能很熟悉checkbox-group组件，这里我将简单的代码贴出来。我是拿了项目的配置数据动态生成checkbox。没毛病，能选，能展示！完美~~~<template> <div class="test-contai.

近期一项目有需求在祖传代码上加一个全新的功能模块。该功能模块主要功能都靠通信完成。因此想到了直接使用iframe嵌入祖传项目。新模块使用的是vue全家桶，本文内容主要涉及到iframe与祖传代码的通信与数据共享的一些问题总结。postMessage是什么正确使用window.postMessage() 方法可以安全地实现跨源通信。通常一个窗口可以获得对另一个窗口的引用（比如 targetWindow =window.opener），然后在窗口上调用 targetWindow.postMessage.

最近有项目需求实现一个简单的柱形统计图，涉及到的数据不是很复杂，但是交互效果需要美观！！！首先就想到了Echarts，毕竟使用简单，功能强大，很香！第一步：安装最新Echarts,安装教程见官方教程。npm install --save-dev echarts --registry=https://registry.npm.taobao.org第二步：按需引入（建议使用，Echarts包很大）// 注意一定使用require!!!let echarts = require('echarts/.

问题描述：最近有项目涉及到前后端websocket通信，在封装好了websocket相关的方法后，需要在onmessage里面拿到后端的返回信息。也看了网上很多实例，大部分都是直接在.vue文件里面去初始化websocket，考虑到自己项目的实际情况决定将websocket的一些方法抽离出来，方便复用。这里记录一下onmessage事件的处理import { websocketConfig } from '../config'let ws = null;let heartBeatTimer = n.

1.vue安装node-moudle报node-sass安装失败解决方法：1.npm uninstall node-sass2.npm install node-sass --registry=https://registry.npm.taobao.org

本实例以上传.xls，.xlsx文件为例，其它文件上传方法思想同此，可以封装一个上传文件的组件。本实例涉及到的js，css文件可以CDN引入，也可直接下载官方最新版本到本地。//优先引入css,否则页面会闪动<link rel="stylesheet" href="/src/common/css/element.css" /><div id="main-container"> <el-upload class="upload-demo" .

在vue项目开发过程中，为了优化体验经常会有给图片添加懒加载的功能。vue给我们提供了自定义指令，通过自定义指令，我们可以方便快捷的实现改需求。什么是vue自定义指令？具体见vue官方文档——vue自定义指令封装自定义指令你需要知道：指令的定义，需要用到Vue.directive方法(以注册一个v-focus为例)：// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: f.

封装一个媒体播放的列表组件，里面包含图集和视频。为了代码解耦，将图集组件，和视频播放组件分离出来。在这里仅记录一下视频播放遇到的问题。在列表数据里面可能有多个视频，循环渲染列表,这里仅简述多视频播放，要求一次只能解决一次的问题。列表渲染<template> <div class="case-container"> <div class="case-...