本文介绍了一个基于Vue2和ElementUI实现的图片上传水印组件，支持文字和图片水印的添加。组件通过el-upload实现上传功能，利用Canvas对图片进行重绘处理，可自定义水印内容、大小、位置等参数。核心功能包括：1）读取图片并生成临时URL；2）自适应计算水印尺寸；3）支持多行文字水印和时间戳；4）灵活控制水印位置。组件封装完善，提供完整源码和调用示例，可直接集成到项目中。该方案解决了网

本文对前端 Vue 项目开发过程中，经常遇到要对文件做一些相关操作，比如：文件导出下载、文件上传、图片压缩、文件转换等一些处理方法进行归纳整理，方便后续查阅和复用。1、后端的文件导出接口，返回数据是文件流 blob，转成 url 链接下载；2、后端接口返回数据是文件下载的 url 链接；3、文件 file 或文件流 blob 转成 base64；4、base64 转成文件 file 或文件流 bl

实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能或者支付宝 H5 开放的API。但是这两者都会比较麻烦且有一定的局限性，微信的扫一扫只能在微信里用，而且还需要公众号认证等配置操作。支付宝在内置 App 内可以同时识别二维码和条形码，但外部调用的 API 无法一次性同时识别，只能分开识别。使用开源库：https://github.com/zxing-js/libra

以 Element-UI 分页组件的完整功能为例官方文档组件实例的代码如下：<template><div class="block"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage1":page-si

JavaScript 中将字符串转换成数字有三个函数 Number()、parseInt()、parseFloat() 这三个函数，都可以将数字格式的字符串转换成数字1、Number()<script>var str1 = 'hxh';// 字母字符串var str2 = '11223344';// 数字字符串var str3 = 'hxh666';// 字母 + 数字 字符串var

一、目的接之前的一篇博客文章，https://blog.csdn.net/weixin_41856395/article/details/110441057Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏。

​1、从 Element 官方文档（链接：Element - The world's most popular Vue UI framework）的 Table 组件，可以看到 Element 支持采用插槽的形式自定义表头。所以表格中列的表头不仅仅只有个标题，可以另外自定义一个按钮来控制操作。2、表格中每一列是否显示或者隐藏，可以用一个变量来存放列的状态（colShow），那上一条说的自定义按钮触

一、目的后台管理系统页面的整体结构如图：实现顶部一级菜单和左侧二级菜单进行响应，选哪个一级菜单时，左侧菜单栏有相对应下的二级菜单，产生联动效果。然后选不同的二级菜单，主体内容区域展示对应内容。二、效果图三、具体操作实现1、用 vue-cli 创建的 Vue 项目后，自己再手动搭建项目的基本目录结构，如图：2、创建一个公共组件Whole.vue 来实现整体页面结构的布局，通过 div 来进行区域定位

一、目的最近工作中，前端联调后端接口请求的数据是 JSON 格式的明文，考虑到安全问题，与后端同事沟通协调后，规定前端采用 3DES 对请求数据加密，后端接收到请求后再用 3DES 进行解密。二、效果图三、具体实现1、3DES 参数有加密模式、填充方式、偏移量、密码、字符集、输出格式参数，这些值的选定都是前后端沟通好后统一的，这样加密解密得到的内容才能一致。2、前端项目通过 npm 安装npm i