element-plus element vue3 plus
vue3实现元素监听滚动事件
// useScroll.js import { debounce } from '@/common/util.js' export default function useScroll(elRef) { console.log('########3useScroll', elRef.value) ......
Vue3 尝试小记
### 1.安装vue 使用 npm 或 yarn 安装 Vue 3： ```javascript # npm npm install vue@next # yarn yarn add vue@next ``` ### 2.创建项目文件夹 在命令行中，输入以下命令，在根目录下创建一个项目文件夹： m ......
Element-ui中 选择器（select）多选下拉框实现全选功能
### Element-ui中 选择器（select）多选下拉框实现全选功能 >需求（产品整活）： >需要下拉时候可以一键全选 >父组件运用 ```html mulSelecteds = val"> ``` >子组件 ```html ``` ......
uniapp+vue3+ts 使用pinia报错
"hasInjectionContext" is not exported by "node_modules/vue-demi/lib/index.mjs", imported by "node_modules/pinia/dist/pinia.mjs". 11:36:19.397 at ../no ......
vue+element项目中统一处理接口异常，只提示一次异常信息
有时候一个页面会同时调多个接口，但是多个接口异常，需要做提示，那么提示的时候会弹出很多的提示信息，这无疑让体验感降低很多。 所以针对这种情况，我们配合element UI统一做一个异常状态的处理，只能显示一次提示的功能，后续代码调接口的时候 也可以省略去写异常状态下的逻辑了。首先新建一个文件 mes ......
mybatis-plus 批量插入/新增
建表 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- -- Table structure for rewrite_sql -- DROP TABLE IF EXISTS `rewrite_sql`; CREATE TABLE `rewrite_s ......
Mybatis Plus
**MyBatisPlus（简称MP）是基于MyBatis框架基础上开发的增强型工具，旨在简化开发、提高效率** **1. MyBatisPlus简介** 1. 入门案例 2. MyBatisPlus概述 **2. 标准数据层开发** 1. 标准数据层CRUD功能 2. 分页功能 **3. DQL控 ......
vue3-element-plus DatePicker type=week 设置从周一到周日展示
main.js import ElementPlus from 'element-plus' import zhCn from 'element-plus/dist/locale/zh-cn.mjs' app.use(ElementPlus, { locale: zhCn, }).mount('#a ......
「AntV」Vue3与TS框架下使用L7
## 1. 引言 Vue是常用的前端框架，TypeScript（简称TS） 是 JavaScript 的超集，可以提高代码的可维护性和可读性 本文基于Vite、Vue3和TypeScript搭建L7开发环境并示例 ## 2. 环境安装 这里使用Vue 官方的项目脚手架工具创建Vue开发环境（其他方式 ......
Ruoyi框架集成Mybatis-plus问题（1）
最近在做数据同步，由于表的字段太多，不想手撸SQL，所以就集成了一下MP；具体的方法Ruoyi文档里都有。这里就是记录下遇到的一些问题及个人的解决方案。 1.在主键字段上加上@TableId(value = "xxx")的注解； 2. 在BaseEntity类的 params字段上，加上@Table ......
Mybatis-plus关于代码生成器的使用
1、添加依赖 2、在test包下创建一个CodeGet类，实现生成代码的功能。注意：全局配置、数据源配置一定要和自己的电脑配置一致！ 3、执行CodeGet类中的main方法。打印台有如下图提示字样，即自动生成成功。 4、对比两张图。在wechat文件夹下有controller、entity、map ......
vscode element-plus/lib/theme-chalk/index.css报错路径找不到
vscode element-plus/lib/theme-chalk/index.css报错路径找不到 import { createApp } from 'vue' import './style.css' import App from './App.vue' import router fr ......
vue3 整数还是显示整数，有小数的保留两位小数显示，写一个指令
1、新建number-format.ts import { Directive, DirectiveBinding } from "vue"; const numberFormat: Directive = { mounted(el, binding: DirectiveBinding) { con ......
vue3 整数还是显示整数，有小数的保留两位小数显示，并显示千分符，写一个指令
1、新建 number-thousander-format.ts import { Directive, DirectiveBinding } from "vue"; const numberThousanderFormat: Directive = { mounted(el, binding: D ......
Vue+element搭建后台管理系统-六、实现权限管理
在一些后台管理系统中，每个身份登录的权限不一样，以至于配置的菜单不一样。就我做过的小区物业管理系统而言，举个例子：业主登录网站只能看到社区服务中的投诉、维修以及查看公告。而管理员可以看到一些对本小区的基本操作，例如查看楼栋，查看业主，账单催缴等等…而超级管理员，可以看到所有界面，以及处理一些审核等等 ......
Pycharm中开发vue element项目时eslint的安装和使用
在PyCharm中使用ESLint对Element UI进行语法检查和代码风格检查的配置步骤如下： 确保你的项目已经配置了ESLint并且可以正常运行。如果尚未安装ESLint，请先使用npm（或者你的包管理器）在项目中安装ESLint： npm install eslint --save-dev ......
06Vue3-Pinia
# Pinia Pinia是西班牙语piña（西班牙语中的“菠萝”）单词的形似。 它是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样），同时兼容Vue2、Vue3，也并不要求你使用Composition API； > Pinia开始于大概2019年，最初是作为一个实验 ......
记录--Vue3自定义一个Hooks，实现一键换肤
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 核心 使用CSS变量, 准备两套CSS颜色, 一套是在 light模式下的颜色,一套是在dark模式下的颜色 dark模式下的 CSS 权重要比 light 模式下的权重高, 不然当我们给html添加自定义属性[data-theme='d ......
JeecgBoot—Vue3
https://gitee.com/jeecg/jeecgboot-vue3?_from=gitee_search JeecgBoot—Vue3版前端源码，采用Vue3.0+TypeScript+Vite+Ant-Design-Vue等新技术方案，包括二次封装组件、utils、hooks、动态菜单、 ......
前端之vue3的setup和setup的2个的形参、响应式页面
# setup setup是个函数, 包含数据、方法等，是组合api的“舞台”。 setup返回值： 1.对象，其中的属性、方法都可以在模板中直接使用 2.渲染含数（了解就好） ``` export default { name: "App", components: {}, setup() { / ......
vue3:关于我在项目中看到一个不存在的标签的故事
故事开头是这样的，项目收尾阶段，我去修改同事写的代码，写着写着，看到一个页面中根本不存在的标签，很是好奇，我就认真的看了起来 <div class="tabs_content" ref="tabsContent" v-if="showTabsContent"> <TabsPage></TabsPag ......
element-ui中Select 选择器value-key的使用
#### 场景描述 ``` 很多时候我们都需要使用下拉框 Select 选择器。 在获取值的时候，通常只需要传递对应的id给后端就行了。 但是特殊情况，后端不想去查库，不仅需要我们id,还有name,code之类的。 这个时候前端通过id去查询对应的name,code 这样做会写循环，查询，非常的麻 ......
Vue3.x 超详细入门教程
Vue3.x 超详细入门教程 目录 安装步骤 1. 安装vue-cli 2. 创建项目 3. 选择配置 4. 选择 Vue 版本 5. 是否使用 class 风格的组件语法 6. 是否使用 Babel 与 TypeScript 一起用于自动检测的填充 7. 是否使用 history 路由模式 8. ......
vue3.0路由的两种方式
```javascript import { createRouter, createWebHashHistory } from 'vue-router' const routes = [ { path: '/', name: 'index', component: () => import('./ ......
解决element表格 固定列后上下滑动出现错位问题
element-ui table组件内部对滚动事件做了防抖。它不会实时修改非固定列的位置 ，有几毫秒的延迟 1、给table添加ref="tableRef" <el-table :data="tableData" ref="tableRef" > </el-table> 2、在获取数据后重新渲染表格 ......
基于electron25+vite4创建多窗口|vue3+electron25新开模态窗体
在写这篇文章的时候，查看了下electron最新稳定版本由几天前24.4.0升级到了25了，不得不说electron团队迭代速度之快！ 前几天有分享一篇electron24整合vite4全家桶技术构建桌面端vue3应用示例程序。 https://www.cnblogs.com/xiaoyan2017 ......
vue2和vue3数据双向绑定原理
## vue2数据双向绑定和vue3数据双向绑定的原理透析 参考资料 : https://www.jianshu.com/p/d7e2efde434b https://www.jianshu.com/p/d7e2efde434b 背景:面试官10个有9个都会问这个问题,所以深究一下啦 ### 需 ......
Vue3 ，html 修改滚动条样式
``` /* 滚动条 */ body *::-webkit-scrollbar { width: 5px; height: 10px; } body *::-webkit-scrollbar-track { background: #fff; border-radius: 2px; } body * ......