图标element vue3 plus
element ui 表格与锚点定位
父组件表格页面代码： <template> <div class="wrapper"> <div class="overview-box"> <div class="box-name"> <div class="flag" /> 标的事件 </div> <p class="con-txt"> {{ ......
element-plus的type类型为daterange的时候限制时间选择
对于 Element Plus 的日期时间范围选择组件（el-date-picker 的 type 设置为 "daterange"），你可以使用 :picker-options 属性来设置选项，通过 disabledDate 函数来禁止选择当前时间之前的日期。 下面是一个 el-date-picke ......
MyBatis-Plus 可视化代码生成器
MyBatis-Plus 可视化代码生成器来啦，让你的开发效率大大提速！！ 来源：blog.csdn.net/yelangkingwuzuhu/article/details/128077533 前言 一、mybatis-plus-generator-ui是什么？ 二、 mybatis-plus-g ......
Vue3实现电商放大镜效果
效果实现： 功能拆解： 左侧滑块跟随鼠标移动 右则大图放大效果实现 鼠标移入控制滑块和大图显示隐藏 滑块跟随鼠标移动 思路：获取到当前的鼠标在盒子内的相对位置（useMouseInElement），控制滑块跟随鼠标移动（left/top） 获取鼠标相对位置 控制滑块跟随移动 有效移动范围内的计算逻辑 ......
vue3--h5页面中判断在支付宝环境还是微信环境
支付宝： navigator.userAgent.indexOf('AliApp') > -1 环境变量： navigator.userAgent "Mozilla/5.0......AlipayDefined(nt:WIFI,ws:320|504|2.0) AliApp(AP/9.6.0.0000 ......
vue3 + vant4 ：form表单中，搭配 Popup 和 Field 实现vant-picker组件，设置默认值及默认选中--踏坑
环境：vue3，vant4 背景：Picker 作为用于辅助表单填写，搭配 Popup 和 Field 。页面需要给picker设置默认值，city为温州，但是在popup弹出时，picker没有选中温州这个选项，还时停留在杭州。 解决方案： 看了很多解决方案，设置default-indexset ......
vue+element 上传文件及文件夹
有需求需要做一个上传压缩包及文件夹的需求，记性不好，记录一下。 HTML 使用的element的upload和form表单，dropdown下拉菜单 <div> <el-col :span="24"> <el-form-item label="材料路径：" prop="fileName"> <el- ......
vue3--使用ref获取Dom元素
vue2中，ref使用： 在 div 元素上绑定了 ref 属性，并命名为 hello，接下来我们直接使用 this.$refs.hello 的方式就可以获取到该 DOM 元素了。 <template> <div id="app"> <div ref="hello">Vue2，ref获取dom元素< ......
基于vue3和elementplus实现的自定义table组件
基于vue3和elementplus实现的自定义table组件，集成查询工具栏分页，可通过配置直接实现基础的列表页基于vue3和elementplus实现的自定义table组件，集成查询工具栏分页，可通过配置直接实现基础的列表页 目录结构如下： 类型声明： declare type DictType ......
vue3 + xlsx 实现 excel 导入web页面解析成json数据
vue3 + xlsx 实现 excel 导入web页面并解析成json数据 fileIipt 动态创建的标签，一定要用户点击事件触发，不然文件选择框的弹出会被拦截，无法弹出。意思就是下面这段关键代码要用一个事件区触发执行，不能主动执行（比如：vue的钩子） import * as XLSX fro ......
Vue3节流指令封装
节流指令 import { ObjectDirective } from 'vue' interface ThrottleEl extends HTMLElement { throttleEvent: () => void } // 节流指令封装 const throttleDirective: O ......
element-ui中的el-table底部固定指定行
1，固定一行合计的情况 https://element.eleme.cn/#/zh-CN/component/table 直接使用官方文档上的summary-method 2，固定指定行或者多行 使用样式去固定 例子：(计算列表数据的平均值，最大值，最小值并固定底部) 1，计算数据的值 protec ......
vue3+vite动态引入图片（import.meta.glob）
Vite官方提供的 import.meta.glob API。 这个方法一般用于批量引入js或者ts文件，但实际上这个方法就是 很多import语句的集合而已，import是可以引入图片的，所以import.meta.glob 也同样可以引入图片资源，只不过需要加入配置项 as:'url' 就可以了 ......
RuoYi-Cloud-Plus
一、官网 dromara/RuoYi-Cloud-Plus 二、Mac本地接入 1、创建网段 在Mac上：替换所有网络模式为自己定义的网段（或注释网断设置） network_mode: "mynet" :::info 网段设定可参考Docker网络模式--network_mode ::: 2、启动基 ......
vue vue3 jsx tsx
0. 安装插件（@vitejs/plugin-vue-jsx） vite官方提供了官方的插件来支持在vue3中使用jsx/tsx，直接安装就行。 yarn add @vitejs/plugin-vue-jsx -D 安装完之后在vite.config.ts中插入一下代码 import vueJsx ......
边做笔试边查缺补漏——算法、js基础、vue3官方文档、八股文
边投简历边完善自己的知识库。 最近这些天一直在面试和笔试＋投简历中，每次面试或笔试完后其实最重要的不是结果，而是做题的过程或者说对话的过程。因为只有这些才让我知道自己哪里还有不足，比如一碰到算法题就歇菜、vue3和vue2混用、js基础知识不牢固等等。 那我痛定思痛，有缺点咱就认咯。算法——代码随想 ......
Vue3
1、ref和reactive 原来reactive是一个对象类型，使用reactive重新赋值一个对象不起作用 <script lang="ts" setup> import {reactive} from "vue"; let user = reactive({name: '小明', age: 1 ......
vue3 静态配置文件
前言 有时候我们负责做的只是一个大平台系统下的某个子系统，有时候我们需要调用这个大平台系统下别的子系统的接口。 如果直接把别的接口地址，直接写在代码里，那么如果别的子系统的接口调整了，会影响到我们的系统，我们还要重新打包，部署，会很繁琐。 解决思路 我们的想法是这样： 敲代码的时候，如果要引用其他人 ......
Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装
项目代码同步至码云 weiz-vue3-template 基于 axios 封装请求，支持多域名请求地址 安装 npm i axios 封装 utils 目录下新建 request 文件夹，并新建 index.ts、request.ts 和 status.ts 文件。 1. status.ts 文件 ......
VUE3学习基础之模板语法
我的vue3学习之路总是学学停停，最开始在18年开发微信小程序，就发现小程序和vue的语法有些相似，然后就去看了vue2的文档，随后忙其它的事情就丢下了。 直到22年又开始捡起来vue3，有了组合式api，语法简明很多，然后又不知道忙什么丢下。。。 前段有些空时间，就把vue3的学习整理下，使用vi ......
vue3学习笔记（四）
表单输入绑定 <!-- 文本 (Text) --> <input v-model="message" placeholder="edit me" /> <p>Message is: {{ message }}</p> <!-- 多行文本 (Textarea) --> <textarea v-mode ......
vue+element 表格formatter数据格式化并且插入html标签 ;
formatter的用法： 列表内容回显， orderStatus 0 是未处理， 1是已处理等，不能直接展示，所以需要 formatter <el-table-column label="订单状态" prop="orderStatus" :formatter="statusFormatter"> ......
图片上传 vue2+element 上传多个图片写法和常见问题1
data: results:接口返回是是[]； this.formList.result : '' ；是字符串 ， resultsList;[]； fileList:[]； 注： 因为后台需要接受字符， 上传文件又是 数组，所以需要自己 使用 split(',') ;join(' ,') 来切换数组 ......
uniapp vue3版本的scroll-view的scroll-into-view方法不生效解决
问题代码如图 bug原因 建了vue2版本和vue3版本的uniapp分别测试，vue3版本的scroll-view存在scroll-into-view不生效的问题，目前未修复（23.12.20） 解决方法，换了个思路，如图 思路：获取当前选中元素的left值，并动态绑定给scroll-left实现 ......
好家伙，这个开源项目硬生生复制了一个 ChatGPT Plus 出来
最近有一款聊天机器人框架 Lobe Chat 火出了天际，它不仅支持多模态，支持语音会话，还有一个强大的 Function Calling 插件生态系统（可以作为 ChatGPT 插件的平替）。最重要的是，它的 UI 很漂亮，一看就是小姐姐精心设计过的~ 连 Vercel 的 CEO 都给它点赞了： ......
vue3 实现用户登录和权限验证思路梳理
2023-12-20 星期三 一、用登录和退出问题 1登录 思路一： 1.1 login 登录页面，将token 存储本地中。 1.2 前置路由守卫获取 token 并验证， 1.3 前置路由 从缓存中获取用户的访问权限，并生成动态路由。 1.4 aixos 请求拦截器，从存储中获取存储的token ......
解决MyBatis-Plus 更新字段为null 不生效
1.异常说明： mapper.updateById()时， set为null 未生效，其他字段更新 periodRecordOriginal.setSettleTime(null); periodRecordOriginal.setActualSettleTime(null); periodReco ......
RuoYi-Cloud-Plus
一、官网 dromara/RuoYi-Cloud-Plus 二、Mac本地接入 1、创建网段 在Mac上：替换所有网络模式为自己定义的网段（或注释网断设置） network_mode: "mynet" :::info 网段设定可参考Docker网络模式--network_mode ::: 2、启动基 ......
vue3全栈项目：具有登录注册验证的在线实时聊天应用程序。
项目主要实现的功能： 登录注册的身份验证功能（利用JWT）来实现，在与后端验证的时候，会根据不同的身份显示不同的界面；而且根据不同角色赋予不同的权力，如管理员能查看信息，而普通用户只能登录到公共组件——在线实时俩天应用程序。 多人在线实时聊天功能——前后端之间根据WebSocket来进行实时通信，并 ......
vue3如何实现断点续传
首先创建一个vue3项目 普通上传// template <input type="file" ref="uploadRef" @change="upload" /> // js setup function upload(event) { let files = event.target.file ......