摘要: 单点登录是什么?你是怎么理解的?单点登录是如何实现的 普通登录 提到单点登录,首先可以想到传统登录,通过登录页面根据用户名查询用户信息,判断密码是否正确,正确则将用户信息写到 session,访问的时候通过从 session 中获取用户信息,判断是否已登录,登录则允许访问。 普通登录的缺点 由于 s 阅读全文
posted @ 2024-01-04 16:21 柯基与佩奇 阅读(74) 评论(0) 推荐(1) 编辑
摘要: 插件 html5-qrcode npm 地址 html5-qrcode 是一个基于 JavaScript 轻量级和跨平台的扫码插件。允许用户使用摄像头扫描二维码,并且解析为文本或者 url。 支持扫描不同类型的二维码和条形码 支持不同的平台,Android、IOS、Windows、MacOs 或者 阅读全文
posted @ 2024-01-04 15:49 柯基与佩奇 阅读(747) 评论(0) 推荐(0) 编辑
摘要: 对于左右菜单联动的需求是很常见的在小程序里,主要表现为: 点击左侧的菜单栏,右侧会切换到对应的内容区域 滑动右侧的内容,左侧会自动切换到对应的菜单项 主要利用的是 scroll-view 标签,以及相关的一些 API,可参考:uniapp.dcloud.net.cn/api/ui/node… 去获取 阅读全文
posted @ 2024-01-04 15:27 柯基与佩奇 阅读(40) 评论(0) 推荐(0) 编辑
摘要: 最近做 uniapp 项目时遇到一个需求,要求模仿腾讯视频 app 首页的背景颜色跟随 banner 图片的主题颜色变化,并且还要兼容 H5、APP、微信小程序三端。 由于项目的技术栈为 uniapp,所以以下使用 uni-ui 的组件库作为栗子。 需求分析 腾讯视频 app 效果如下: 从上图看出 阅读全文
posted @ 2024-01-04 15:04 柯基与佩奇 阅读(1111) 评论(0) 推荐(0) 编辑
摘要: 前言 最近在用 vue3 封装 element 的表单时遇到的一个小问题,这里就简单记录一下过程。话不多说直接上代码!!! 正文 部分核心代码 import { ref, defineComponent, renderSlot, type PropType, type SetupContext } 阅读全文
posted @ 2024-01-04 14:58 柯基与佩奇 阅读(83) 评论(0) 推荐(0) 编辑
摘要: 效果(CV 即用) 1.安装引入 vue-cropper(官网)官网地址 npm install vue-cropper@next import 'vue-cropper/dist/index.css' import { VueCropper } from "vue-cropper"; 2. 全局引 阅读全文
posted @ 2024-01-04 14:53 柯基与佩奇 阅读(1398) 评论(0) 推荐(0) 编辑
摘要: 项目环境 Vue3.x + Ant Design Vue3.x + Vite4.x 业务场景分析 图文内容仅供参考,仅提供文章内所需思考对应的图例 在以上图片中,是管理后台系统中常见的表格内容,因使用的是 Ant Design Vue 框架,根据官方的文档中所示: Column 的 API elli 阅读全文
posted @ 2024-01-04 14:51 柯基与佩奇 阅读(67) 评论(0) 推荐(0) 编辑
摘要: 项目环境 Vue3.x + Ant Design Vue3.x + Vite3.x 封装思考:为什么封装 useTableRowSelection.js 首先, 基于 Hooks(useTableData.js、useQueryParams.js)的封装,作为管理后台表格常见操作的批量删除、批量编辑 阅读全文
posted @ 2024-01-04 14:50 柯基与佩奇 阅读(77) 评论(0) 推荐(0) 编辑
摘要: 项目环境 Vue3.x + Ant Design Vue3.x + Vite3.x 封装思考:何为自定义表格数据列渲染,其为何种场景服务 根据实际业务场景而来,为避免法律风险,部分截图内容脱敏处理 如下图,当表格内容的列非常多时,正常情况下,我们通常采取的方式是左右两侧的列,即左侧 Key 列和右侧 阅读全文
posted @ 2024-01-04 14:49 柯基与佩奇 阅读(67) 评论(0) 推荐(0) 编辑
摘要: 项目环境 Vue3.x + Ant Design Vue3.x + Vite3.x 封装分解:创建 a 标签下载文件 export function createDownload(blob, fileName, fileType) { if (!blob || !fileName || !fileT 阅读全文
posted @ 2024-01-04 14:48 柯基与佩奇 阅读(30) 评论(0) 推荐(0) 编辑
摘要: 项目环境 Vue3.x + Ant Design Vue3.x + Vite3.x 此篇内容讲解的是关于公共 Hooks 封装之表格数据 useTableData 中暴露出来与 queryParams 的一些方法,而进行封装的 Hooks,其目的在于减少冗余重复代码的书写。 封装分解:参数定义 co 阅读全文
posted @ 2024-01-04 14:44 柯基与佩奇 阅读(96) 评论(0) 推荐(0) 编辑
摘要: 项目环境 Vue3.x + Ant Design Vue3.x + Vite3.x 封装分解:声明变量 import { ref, shallowRef, isRef } from "vue"; const loading = ref(false); // 表格数据UI交互Loading const 阅读全文
posted @ 2024-01-04 14:43 柯基与佩奇 阅读(68) 评论(0) 推荐(0) 编辑
摘要: 写在前面 对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的 Hooks. 本篇文章为useExportExcel.js 基于个人项目环境进行封装的 Hooks,仅以本文介绍封装 Hooks 思想心得,故相关代码可能不适用 阅读全文
posted @ 2024-01-04 14:40 柯基与佩奇 阅读(22) 评论(0) 推荐(0) 编辑
摘要: 写在前面 对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的 Hooks. 本篇文章为useDownloadFile.js 基于个人项目环境进行封装的 Hooks,仅以本文介绍封装 Hooks 思想心得,故相关代码可能不适 阅读全文
posted @ 2024-01-04 14:38 柯基与佩奇 阅读(14) 评论(0) 推荐(0) 编辑
摘要: 前言: 最近接到的一个需求十分有意思,设计整体实现了前端仿微信扫一扫的功能。整理了一下思路,做一个分享。 tips: 如果想要实现完整扫一扫的功能,你需要掌握一些前置知识,这次先讲如何实现拍照并且保存的功能。 一. window.navigator 你想调取手机的摄像头,首先你得先检验当前设备是否有 阅读全文
posted @ 2024-01-04 14:29 柯基与佩奇 阅读(72) 评论(0) 推荐(0) 编辑
摘要: 核心 使用 CSS 变量, 准备两套 CSS 颜色, 一套是在 light 模式下的颜色,一套是在 dark 模式下的颜色 dark 模式下的 CSS 权重要比 light 模式下的权重高, 不然当我们给 html 添加自定义属性[data-theme='dark']的时候, dark 模式权重比 阅读全文
posted @ 2024-01-04 11:53 柯基与佩奇 阅读(96) 评论(0) 推荐(0) 编辑