代码编织梦想

使用 vue 和 ant design 实现抽屉效果的模块折叠功能-爱代码爱编程

功能描述: 有两个模块,点击上面模块的收起按钮时,上面的模块可以折叠,下面的模块随之扩展 代码实现: 我们在 Vue 组件中定义两个模块的布局和状态管理: const scrollTableY = ref(560); // 表格初始高度 const isRaFold = ref(false); // 控制第一个模块折叠状态 cons

使用elementui构建复杂表格,合并行或列,多级表头等-爱代码爱编程

项目场景:         前端开发过程中常常会遇到各种开发表格的场景,有时候有的表格比较简单有的比较复杂(如下图简单示例所示,有合并项和多级表头),Elementui的el-table控件也可以支持构建复杂的表格,本文将指导你如何快速开发复杂表格~~~ 问题描述及解决方案 1、多级表头 数据结构比较复杂的时候,可使用多级表头来展现数据的层

vue3实现本地开发使用的px转换成vw,px转换成rem方法整理_vue px转rem-爱代码爱编程

前言:         项目中如果想本地开发使用px,但是界面上线以后界面是自适应的效果,可以有多种方式来实现效果。 一、px转成vw 1、安装,安装成功后,node_modules 会新增这两个插件包 npm i postcss-px-to-viewport-8-plugin 2、新增  postcss.config.js 文件

3.electron之vue3.0的桌面应用程序_electron+vue3实现双屏异显-爱代码爱编程

如果可以实现记得点赞分享,谢谢老铁~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文

vue3使用vue-爱代码爱编程

Vue3中安装使用vue-qrcode后报错,报错内容为:You can mark the path “qrcode” as external to exclude it from the bundle, which wil

vue3.0中使用 highlight 实现代码高亮_vue highlight 编辑-爱代码爱编程

目录 1、安装highlight.js与@highlightjs/vue-plugin 2、在main.js中引用 3、组件中使用 4、代码展示 在页面中 编写代码 想要实现代码高亮,如下图。 可使用highlight 1、安装highlight.js与@highlightjs/vue-plugin 注意:highlight.js与

vue3移动端调用手机摄像头实现扫描二维码功能_vue3手机扫码-爱代码爱编程

vue3移动端调用手机摄像头实现扫描二维码功能 需求: vue3+vant4 实现移动端网页调用手机摄像头实现扫描二维码,并返回二维码附带信息功能 效果图: 实现方法 采用vue3-qr-reader插件实现 项目

vue3.0(八):网络请求库axios_antdesign vue3http请求-爱代码爱编程

网络请求库axios axios官网 功能特点 在浏览器中发送 XMLHttpRequests请求在node.js中发送http请求支持Promise API拦截请求和响应转换请求和响应数据 axios请求方式

vue3父子组件传参-爱代码爱编程

一,父子组件传参: 应用场景:父子组件传参 Vue3碎片:defineEmits,defineProps,ref,reactive,onMounted 1.父组件传子组件 a.父组件传参子组件 import

vue3.4新特性(官方翻译版)_vue3.4新功能-爱代码爱编程

前言 今天,我们很高兴地宣布 Vue 3.4 “🏀灌篮高手”的发布! 此版本包括一些实质性的内部改进 - 最引人注目的是重写的模板解析器,速度提高了 2 倍,以及重构的反应系统,使效果触发更加准确和高效。它还包含许多生活质量 API 改进,包括绑定 prop 时的 defineModel 稳定性和新的同名速记。 这篇文章概述了 3.4 中的突出功能。

vue3+acro实现日期组件可以直接展示在界面上,不用非得弹框展示_vue3的日期插件-爱代码爱编程

前言:         在很多时候,我们使用日期组件的时候,不希望每次都是点击弹出日期弹框,而是,点击日期弹框直接能展示在界面上,在这里我们介绍下 使用 acro 来更加轻松的实现他的效果。 实现效果: 实现步骤: 1、安装插件 npm install --save-dev @arco-design/web-vue 2、配置

vue3.0(一):模板语法及指令介绍_vue配置多个快速生成vue3模板的命令-爱代码爱编程

模板语法 Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统,在

vue3.0(二):vue组件化基础 -爱代码爱编程

Vue组件化基础 - 脚手架 Vue的组件化 我们在处理一些任务量比较庞大的工作时候,会将工作内容进行拆分,分步骤完成 而组件化的思想正式如此,对于一个庞大的项目,我们可以将其拆分成一个个的小功能,分步骤进行实现

vue3.0(七):pinia状态管理_vue3 pinia状态改变事件-爱代码爱编程

Pinia状态管理 最初是作为一个实验为 Vue重新设计状态管理,让它用起来像组合式API Pinia和Vuex的对比 为什么要用 Pinia Pinia最初是为了 探索Vuex的下一次迭代会是什么样子

二、vue3+ts项目框架搭建——必备工具_vue3使用ts需要什么插件-爱代码爱编程

开发必备工具的准备 —— 提升效率 1.1集成element-plus1.2src别名的配置1.3环境变量的配置1.4SVG图标配置使用1.4.1svg使用1.4.2svg封装为全局组件1.4.3批量注册全局组件-使用自定

三、vue3+ts项目框架搭建——路由_vue3+ts配置路由-爱代码爱编程

安装指令 pnpm install vue-router 配置路由文件 /src/router/index.ts 路由文件单独提取 src\router\index.ts //通过vue-router

十一、vue3+ts项目框架搭建——点击刷新实现页面刷新——组件重加载_ts怎么刷新页面-爱代码爱编程

实现思路 点击刷新,将内容区域组件重新加载即可 在pinia中定义刷新状态refresh为 false点击刷新按钮 将状态修改refresh为 !refresh在内容区组件 router-view 处 watc

十二、vue3+ts项目框架搭建——实现全屏模式_vue3 ts容器设置全屏-爱代码爱编程

使用DOM 的属性和方法实现,会存在不同浏览器兼容问题,可使用插件实现 //全屏按钮点击的回调 const fullScreen = () => { //DOM对象的一个属性:可以用来判断当前是不是全屏的模式【全

七、vue3+ts项目框架搭建——动态菜单—递归组件的使用_vue3+ts创建动态菜单-爱代码爱编程

layout布局 左侧菜单menu页面刷新后默认高亮 左侧菜单组件 Menu <template> <template v-for="(item, index) in menuList