![](https://img-blog.csdnimg.cn/20201126141531347.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 76
Vue、ElementUI、Iview 等前端框架及组件库相关的内容
无解的菜鸟晖
这个作者很懒,什么都没留下…
展开
-
前端 Vue 操作文件方法(导出下载、图片压缩、文件上传和转换)
本文对前端 Vue 项目开发过程中,经常遇到要对文件做一些相关操作,比如:文件导出下载、文件上传、图片压缩、文件转换等一些处理方法进行归纳整理,方便后续查阅和复用。1、后端的文件导出接口,返回数据是文件流 blob,转成 url 链接下载;2、后端接口返回数据是文件下载的 url 链接;3、文件 file 或文件流 blob 转成 base64;4、base64 转成文件 file 或文件流 blob;5、压缩图片文件的方法封装;6、通过第三方库image-conversion 压缩图片;7、前端上传图片原创 2024-06-06 10:02:08 · 2340 阅读 · 0 评论 -
CSS 伪类、伪元素的应用实例:电池充电、高能进度条
本文通过 CSS 伪类、伪元素,结合动画 animation 和 Vue 动态样式属性(通过 CSS 变量)的写法,来实现电池充电、高能进度条的效果。CSS 伪类是对当前元素下,处于某些特定状态时而添加特殊效果的样式(基于文档之外的抽象,所以叫伪类),不产生新元素,写法用单冒号(:)开头。CSS 伪元素是对当前元素下,某些特殊部位应用样式,通过创建虚拟元素实现,一般与 content 属性一起使用(基于元素的抽象,所以叫伪元素),写法用双冒号(::)开头。CSS 变量 var() 用于插入自定义属性。原创 2024-04-30 09:57:08 · 1502 阅读 · 0 评论 -
ElementUI 组件的 Table 自定义表头,控制列的显示或隐藏
1、从 Element 官方文档(链接:Element - The world's most popular Vue UI framework)的 Table 组件,可以看到 Element 支持采用插槽的形式自定义表头。所以表格中列的表头不仅仅只有个标题,可以另外自定义一个按钮来控制操作。2、表格中每一列是否显示或者隐藏,可以用一个变量来存放列的状态(colShow),那上一条说的自定义按钮触发事件就是来改变这列的状态。3、页面上列的显示或者隐藏,可以用 Vue 指令 v-if 来控制原创 2021-10-05 22:02:17 · 13655 阅读 · 2 评论 -
Vue 项目打包后可修改基础接口地址配置
一、目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址。平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里。这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好。 所以本文用一种较好的方案来解决以上问题,通过创建一个静态资源里的外部文件,引...原创 2021-10-04 14:40:14 · 19365 阅读 · 10 评论 -
Vue 移动端实现调用相机扫描二维码或条形码
实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能或者支付宝 H5 开放的API。但是这两者都会比较麻烦且有一定的局限性,微信的扫一扫只能在微信里用,而且还需要公众号认证等配置操作。支付宝在内置 App 内可以同时识别二维码和条形码,但外部调用的 API 无法一次性同时识别,只能分开识别。使用开源库:https://github.com/zxing-js/library,本人移动端前端开发的框架是 Vue,组件库用的是 Vant,本文方案只要开发时用的电脑具有摄像头就可以实现原创 2021-10-03 21:38:42 · 17049 阅读 · 132 评论 -
前端 Vue 请求数据使用 3DES 加密/解密
一、目的 最近工作中,前端联调后端接口请求的数据是 JSON 格式的明文,考虑到安全问题,与后端同事沟通协调后,规定前端采用 3DES 对请求数据加密,后端接收到请求后再用 3DES 进行解密。二、效果图三、具体实现1、3DES 参数 有加密模式、填充方式、偏移量、密码、字符集、输出格式参数,这些值的选定都是前后端沟通好后统一的,这样加密解密得到的内容才能一致。2、前端项目通过 npm 安装npm install crypto-js --s...原创 2021-07-24 19:30:04 · 3926 阅读 · 8 评论 -
Vue 的 JSON 格式数据与树形(Tree)结构数据转换的插件
1、原创 2021-06-08 00:08:21 · 4096 阅读 · 0 评论 -
Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码
Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码。在表格点击“支付”按钮,跳出支付弹窗,有微信支付和支付宝支付的两种方式按钮选择,当点击某个方式会跳出相应的二维码,并设置定时器去查询支付状态是否支付成功。原创 2021-05-27 10:09:46 · 9362 阅读 · 7 评论 -
Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧多级菜单栏(二级、三级等)
一、目的接之前的一篇博客文章,https://blog.csdn.net/weixin_41856395/article/details/110441057Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏。原创 2021-04-23 18:29:59 · 21058 阅读 · 33 评论 -
Vue + ElementUI 后台管理系统实现主题风格切换
一、目的此次写作内容是在我之前发布一篇文章的基础上进行新增的。上一篇文章:Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客这次要实现在页面上新增一个切换主题风格的按钮,点击后实现页面主题风格的切换功能。二、效果图三、具体实现步骤1、前期准备:使用 bus 进行组件通信在要相互通信的组件之间,引入一个新的 Vue 实例,然后分别通过调用这个实例的事件触发和监听,来实现通信和参数传递。在utils 文件夹下放入原创 2021-01-07 20:14:13 · 5533 阅读 · 18 评论 -
在 Element-UI 组件的事件中传递自定义参数
以 Element-UI 分页组件的完整功能为例官方文档组件实例的代码如下:<template> <div class="block"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-sizes="[100, 20原创 2020-12-23 10:25:46 · 7107 阅读 · 3 评论 -
Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏
一、目的后台管理系统页面的整体结构如图:实现顶部一级菜单和左侧二级菜单进行响应,选哪个一级菜单时,左侧菜单栏有相对应下的二级菜单,产生联动效果。然后选不同的二级菜单,主体内容区域展示对应内容。二、效果图三、具体操作实现1、用 vue-cli 创建的 Vue 项目后,自己再手动搭建项目的基本目录结构,如图:2、创建一个公共组件Whole.vue 来实现整体页面结构的布局,通过 div 来进行区域定位和大小设定。使用 el-menu 组件的 mode ...原创 2020-12-02 12:07:16 · 45326 阅读 · 52 评论 -
Vue 常用方法和函数的知识整理
整体总结:var vm = new Vue({ el: '#app', // 控制区域 data: { }, // 定义数据 methods: { }, // 定义事件方法 filters: { }, // 定义私有的过滤器 directives: { }, // 定义私有的指令 components: { }, // 定义实例内部私有的组件 watch:{ }, // 监听值的变化原创 2020-11-09 23:10:31 · 7108 阅读 · 0 评论 -
Vue + ElementUI 实现全国各个省份相对应城市的联动选择
此文章是本人在前端开发工作中遇到的问题,然后对解决问题的方案进行一次做笔记记录下来。需求原创 2020-11-09 15:22:55 · 10315 阅读 · 6 评论 -
vue-resource 的入门学习笔记
Vue 要实现异步加载时需要使用到 vue-resource 库一、安装和导入npm install vue-resource --save-dev出现 vue-resource 的版本号表示安装成功!接下来在 Vue 项目的 main.js 文件中导入:/*引入Vue框架*/import Vue from 'vue'/*引入资源请求插件*/import VueResource from 'vue-resource'/*使用VueResource插件*/Vue.use(V原创 2020-11-04 17:08:30 · 666 阅读 · 3 评论 -
ElementUI 的组件 Switch(开关)如何让文字显示在按钮上
1、引入相对应的组件定义组件所属类 tableScopeSwitch ,为后面样式指定做准备,设置开关的值和对应展示的文字(开为1,并展示启用;关为0,并展示禁用),v-model 与后端数据库数据进行绑定,指定改变触发事件 handleStatusChange 函数。2、设定 CSS 样式来实现文字显示在按钮上原创 2020-11-02 13:59:58 · 7230 阅读 · 1 评论