随笔分类 -  Vue3

摘要:效果实现: 功能拆解: 左侧滑块跟随鼠标移动 右则大图放大效果实现 鼠标移入控制滑块和大图显示隐藏 滑块跟随鼠标移动 思路:获取到当前的鼠标在盒子内的相对位置(useMouseInElement),控制滑块跟随鼠标移动(left/top) 获取鼠标相对位置 控制滑块跟随移动 有效移动范围内的计算逻辑 阅读全文
posted @ 2023-12-21 21:13 自学Java笔记本 阅读(241) 评论(0) 推荐(0) 编辑
摘要:场景和指令用法 场景:某些网站首页通常会很长,用户不一定能访问到页面靠下面的图片,这类图片通过懒加载优化手段可以做到,只有进入视口区域才发送图片请求 指令用法: <img v-img-lazy="item.picture"/> 在图片img身上绑定指令,该图片只有正式进入到视口区域时才会发送图片网络 阅读全文
posted @ 2023-12-10 16:03 自学Java笔记本 阅读(15) 评论(0) 推荐(0) 编辑
摘要:要求 浏览器在上下滚动的过程中,如果距离顶部的滚动距离大于78px,吸顶导航显示,小于78px隐藏 步骤: 准备吸顶导航组件 <script setup></script> <template> <div class="app-header-sticky show"> <div class="con 阅读全文
posted @ 2023-12-10 10:52 自学Java笔记本 阅读(12) 评论(0) 推荐(0) 编辑
摘要:scss 变量替换方案 步骤: 安装scss pnpm add sass -D 准备定制样式文件 styles/element/index.scss /* 只需要重写你需要的即可 */ @forward 'element-plus/theme-chalk/src/common/var.scss' w 阅读全文
posted @ 2023-12-09 15:38 自学Java笔记本 阅读(1333) 评论(0) 推荐(0) 编辑
摘要:安装环境 官网:https://vueup.github.io/vue-quill/guide/modules.html npm安装:npm install @vueup/vue-quill@latest --save pnpm安装:pnpm add @vueup/vue-quill@latest 阅读全文
posted @ 2023-12-08 11:33 自学Java笔记本 阅读(712) 评论(0) 推荐(0) 编辑
摘要:官网:https://element-plus.org/zh-CN/component/upload.html 简单使用: 场景:与表单项一起提交,但是需要回显功能,可以用过本地url预览方式实现 <!-- 此处需要关闭 element-plus的自动上传,不需要配置 action等参数 只需要做前 阅读全文
posted @ 2023-12-08 11:03 自学Java笔记本 阅读(479) 评论(0) 推荐(0) 编辑
摘要:官网 https://element-plus.org/zh-CN/component/form.html#自定义校验规则 需求 在日常开发中,我们需要对表单的内容进行校验,确保用户输入的符合我们正常的业务,并赋予正确的提示,以登录注册举例: 功能需求说明: 注册功能(校验+注册) 当用户输入用户名 阅读全文
posted @ 2023-12-05 10:57 自学Java笔记本 阅读(546) 评论(0) 推荐(0) 编辑
摘要:pnpm安装 一些优势:比同类工具快 2倍 左右、节省磁盘空间... https://www.pnpm.cn/ 安装方式:npm install -g pnpm 创建项目:pnpm create vue ESLint & prettier 配置代码风格 环境同步: 安装了插件 ESlint,开启保存 阅读全文
posted @ 2023-12-04 15:42 自学Java笔记本 阅读(53) 评论(0) 推荐(0) 编辑
摘要:什么是Pinia 官方文档:https://pinia.vuejs.org/zh/introduction.html Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话,你可能会认为可以通过一行简单的 export const state = re 阅读全文
posted @ 2023-12-01 14:17 自学Java笔记本 阅读(65) 评论(0) 推荐(0) 编辑
摘要:官网 https://cn.vuejs.org/guide/quick-start.html 再vue3中采用的是组合式API风格(组合式 API (Composition API)) 通过组合式 API,我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中,组合式 API 通常会与 <s 阅读全文
posted @ 2023-11-29 22:09 自学Java笔记本 阅读(52) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示