随笔分类 - Vue~UI框架功能
摘要：
在vue大屏可视化项目中，自适应是确保在不同尺寸屏幕上正常显示的关键需求。下面我将详细介绍我在项目开发中常用的方案：Scale方案的实现✔️✔️ 1，常用自适应方案 CSS媒体查询 - 针对不同屏幕尺寸编写不同样式 Flex/Grid布局 - 使用弹性布局适应不同尺寸 Rem/VW单位 - 使用相对
阅读全文
在vue大屏可视化项目中，自适应是确保在不同尺寸屏幕上正常显示的关键需求。下面我将详细介绍我在项目开发中常用的方案：Scale方案的实现✔️✔️ 1，常用自适应方案 CSS媒体查询 - 针对不同屏幕尺寸编写不同样式 Flex/Grid布局 - 使用弹性布局适应不同尺寸 Rem/VW单位 - 使用相对
阅读全文
摘要：
在数据可视化项目中，我们经常需要将大量数据分组展示，并为不同批次的数据设置不同的颜色以便区分。ECharts中实现按数据批次设置柱状图颜色的方法，适用于从接口获取动态数据的场景！✔️♨️ 方法一：基于数据索引的批次颜色设置 实现步骤 1，准备数据 // 模拟从接口获取的数据 const apiDat
阅读全文
在数据可视化项目中，我们经常需要将大量数据分组展示，并为不同批次的数据设置不同的颜色以便区分。ECharts中实现按数据批次设置柱状图颜色的方法，适用于从接口获取动态数据的场景！✔️♨️ 方法一：基于数据索引的批次颜色设置 实现步骤 1，准备数据 // 模拟从接口获取的数据 const apiDat
阅读全文
摘要：
🪶🪶🪶在vue后台管理系统里面，有时候会遇到一个图片上传的功能，做这个功能的时候的思路是这样的：1：首选由前端写一个图片上传的upload标签，选择本地的图片文件之后2:调用后端给的接口，以二进制文件的形式传给后端服务器3:服务器进行处理，处理完成之后将服务器的主机名加到图片名称的前缀上4:返
阅读全文
🪶🪶🪶在vue后台管理系统里面，有时候会遇到一个图片上传的功能，做这个功能的时候的思路是这样的：1：首选由前端写一个图片上传的upload标签，选择本地的图片文件之后2:调用后端给的接口，以二进制文件的形式传给后端服务器3:服务器进行处理，处理完成之后将服务器的主机名加到图片名称的前缀上4:返
阅读全文
摘要：
Vue结合echarts实现水滴图🥏🧿✓✓✓（echarts-liquidfill插件的使用~✓） 1，单水滴图表~动态展示 1，安装echarts-liquidfill npm install echarts-liquidfill 2，代码实现~ <template> <div id="cpu
阅读全文
Vue结合echarts实现水滴图🥏🧿✓✓✓（echarts-liquidfill插件的使用~✓） 1，单水滴图表~动态展示 1，安装echarts-liquidfill npm install echarts-liquidfill 2，代码实现~ <template> <div id="cpu
阅读全文
摘要：
1，认识VUE3 1，vue3特点： 2020 年底vue.js团队 发布了3版本。 耗时2年多开发完毕。由尤雨溪团队打造。 1、性能提升 打包大小减少41% 初次渲染快51%，更新渲染快133% 内存占用减少54% 2、源码升级 使用Proxy 代替Object.defineProperty 实现
阅读全文
1，认识VUE3 1，vue3特点： 2020 年底vue.js团队 发布了3版本。 耗时2年多开发完毕。由尤雨溪团队打造。 1、性能提升 打包大小减少41% 初次渲染快51%，更新渲染快133% 内存占用减少54% 2、源码升级 使用Proxy 代替Object.defineProperty 实现
阅读全文
摘要：
🎶【大屏可视化】系统（Vue3 + ECharts5）🎶 这八部~~按照，难易的顺序来进行绘制！！！💯 横向柱形图 竖向柱形图 雷达图 环形图 关系图 数据云图 数据展示图 地图可视化 02：基于 vite 与 tailwindcss 创建大屏可视化项目 1，基于 vite 创建项目，使用：
阅读全文
🎶【大屏可视化】系统（Vue3 + ECharts5）🎶 这八部~~按照，难易的顺序来进行绘制！！！💯 横向柱形图 竖向柱形图 雷达图 环形图 关系图 数据云图 数据展示图 地图可视化 02：基于 vite 与 tailwindcss 创建大屏可视化项目 1，基于 vite 创建项目，使用：
阅读全文
摘要：
1.页面显示（强烈推荐） <template #header> <avue-data-tabs :option="dataOptions" :data="tabData" style="width: 75%;"></avue-data-tabs> </template> 2.具体代码阿和方法实现 2
阅读全文
1.页面显示（强烈推荐） <template #header> <avue-data-tabs :option="dataOptions" :data="tabData" style="width: 75%;"></avue-data-tabs> </template> 2.具体代码阿和方法实现 2
阅读全文
摘要：
1. 组件样式部分（elementUI）实现 <el-row> <el-col :span="10"> <el-button-group> <el-button :class="{ 'is-active': selectedButton 'year' }" @click="changeToYearP
阅读全文
1. 组件样式部分（elementUI）实现 <el-row> <el-col :span="10"> <el-button-group> <el-button :class="{ 'is-active': selectedButton 'year' }" @click="changeToYearP
阅读全文
摘要：
1.页面预览 2.搜索条件区域 code <!-- 查询 --> <div class="table-container"> <el-form :inline="true" :model="queryForm" class="query-form" ref="queryFormRef"> <el-f
阅读全文
1.页面预览 2.搜索条件区域 code <!-- 查询 --> <div class="table-container"> <el-form :inline="true" :model="queryForm" class="query-form" ref="queryFormRef"> <el-f
阅读全文
摘要：
1. 图片转base64格式方法 （主要的代码）（其实用的还是FileReader） handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.
阅读全文
1. 图片转base64格式方法 （主要的代码）（其实用的还是FileReader） handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.
阅读全文
摘要：
效果图 1. 简单介绍 npm官网：vue-count-to vue-count-to 就是一个组件插件，咱们引入进来，可以去打印一下，它就是一个组件实例，使用components注册一下，就可以在模板中使用了，具体方式如下： 2. 安装 npm install vue-count-to 3. 引入
阅读全文
效果图 1. 简单介绍 npm官网：vue-count-to vue-count-to 就是一个组件插件，咱们引入进来，可以去打印一下，它就是一个组件实例，使用components注册一下，就可以在模板中使用了，具体方式如下： 2. 安装 npm install vue-count-to 3. 引入
阅读全文
摘要：
前几天在vue运行项目过程中报错了,这个方法是 关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法 （1）报错一 （2）报错二~ 1.1问题分析 首先，检查代码，并没有什么错误的地方；其次，涉及到这个问题，可能就
阅读全文
前几天在vue运行项目过程中报错了,这个方法是 关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法 （1）报错一 （2）报错二~ 1.1问题分析 首先，检查代码，并没有什么错误的地方；其次，涉及到这个问题，可能就
阅读全文
摘要：
1.效果图: 2.以用户登录实现 生成图片验证功能：使用 identify(生成图片验证码)插件 identify：这是一个vue的插件，使用canvas来生成图形验证码 2.1 下载identify插件，npm安装 npm i identify 2.2 具体参数如下： 2.2 在component
阅读全文
1.效果图: 2.以用户登录实现 生成图片验证功能：使用 identify(生成图片验证码)插件 identify：这是一个vue的插件，使用canvas来生成图形验证码 2.1 下载identify插件，npm安装 npm i identify 2.2 具体参数如下： 2.2 在component
阅读全文
摘要：
1. 功能效果图： 2. 基本布局 先需要引入elementUI插件- 注册 基本布局code <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>重置密码</span> </div> <!
阅读全文
1. 功能效果图： 2. 基本布局 先需要引入elementUI插件- 注册 基本布局code <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>重置密码</span> </div> <!
阅读全文
摘要：
1. 上传图片的流程分析：【选择文件📁+上传图片🎨】 2.1 功能步骤 2.1 页面基本布局 基本布局 <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>更换头像</span> </d
阅读全文
1. 上传图片的流程分析：【选择文件📁+上传图片🎨】 2.1 功能步骤 2.1 页面基本布局 基本布局 <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>更换头像</span> </d
阅读全文
摘要：
💎目标界面： 1.引入elementUI组件，路由和axios配置 2.实现表单页面布局 <!-- 注册的表单区域 --> <el-form :model="regForm" :rules="regRules" ref="regForm" label-width="10px" class="dem
阅读全文
💎目标界面： 1.引入elementUI组件，路由和axios配置 2.实现表单页面布局 <!-- 注册的表单区域 --> <el-form :model="regForm" :rules="regRules" ref="regForm" label-width="10px" class="dem
阅读全文
摘要：
效果： 1：表格以及分页 2：增加一条数据 3：删除一条数据 4：修改一条数据 5：查询一条数据 <template> <div class="tab-container"> <div class="filter-container" style="margin-bottom: 20px"> <el
阅读全文
效果： 1：表格以及分页 2：增加一条数据 3：删除一条数据 4：修改一条数据 5：查询一条数据 <template> <div class="tab-container"> <div class="filter-container" style="margin-bottom: 20px"> <el
阅读全文
摘要：
一、登录业务流程 在登录页输入用户名和密码 调用后台接口进行校验 验证通过之后，根据后台的响应状态跳转到项目主页 使用路由导航守卫控制访问权限 - 4.1 项目中出现登录之外的其他API接口，必须在登录后才能访问，未登录状态下不能看到其他页面 - 4.2 将登录成功之后的token，保存到客户端se
阅读全文
一、登录业务流程 在登录页输入用户名和密码 调用后台接口进行校验 验证通过之后，根据后台的响应状态跳转到项目主页 使用路由导航守卫控制访问权限 - 4.1 项目中出现登录之外的其他API接口，必须在登录后才能访问，未登录状态下不能看到其他页面 - 4.2 将登录成功之后的token，保存到客户端se
阅读全文
摘要：
简单额总结一下几种组件之间的传参方式 一. props（父传子） 父组件 传递 <template> <div> <HelloWorld :msg="msg" /> </div> </template> <script> import HelloWorld from "./components/He
阅读全文
简单额总结一下几种组件之间的传参方式 一. props（父传子） 父组件 传递 <template> <div> <HelloWorld :msg="msg" /> </div> </template> <script> import HelloWorld from "./components/He
阅读全文
浙公网安备 33010602011771号