Pixelium Design像素主题的UI库，多看两眼，还挺上头。 内部组件还比较少，可先观看几个效果 感觉小时候玩的像素游戏，看久了就像回到童年的感觉了 喜欢的可以打开了解下吧 官网地址：https://shika-works.github.io/pixelium-design/zh/ github地址 :https://github.com/shika-works/pixelium-
Vue 2 Mixins 详细介绍 1. 什么是 Mixins Mixins 是 Vue 2 中实现代码复用的主要方式，它允许将组件的可复用功能抽取到一个独立的对象中，然后在多个组件中混入使用。 2. 基本用法 2.1 定义 Mixin // myMixin.js export const myMixin = { data() { return { mixinData: '
Vue 3 setup 函数详解 1. 什么是 setup 函数 setup 是 Vue 3 中引入的 Composition API 的入口点，它在组件实例创建之前执行，用于替代 Vue 2 中的 data、methods、computed 等选项。 2. 基本语法 <template> <div> <p>{{ count }}</p>
最近项目中需要自定义日期查询条件，所以写了一个日期函数集合： 示例图： useDate.ts 工具函数说明文档 文件概述 useDate.ts是一个用于日期选择的工具函数集合，主要提供了生成年份、月份和天数选项的功能，方便在日期选择组件中使用。这些函数和常量支持智能生成日期选项，特别是能够根据指定的年份和月份动态计算当月的天数。 1. currentYear 常量 const currentYe
智能头盔实时监控系统设计与实现 源码 https://gitee.com/intostars/csdn-demo/tree/master/src/views/smartHelmet 预览 一、功能概述 智能头盔实时监控系统是基于Vue 3和TypeScript开发的一套用于远程监控和控制智能头盔设备的前端应用模块。该系统通过WebSocket与后端服务器建立实时通信，实现管理员身份验证、设备
前端与AI的结合是目前最具前景的技术方向之一，能够为前端开发者创造巨大的差异化优势。 ? 前端+AI的四大结合方向 1. AI能力集成 - 最直接的结合方式 // 示例：在Vue中集成OpenAI API async function generateContent(prompt) { const response = await fetch('https://api.openai.com/v
在 Vue 中，手写渲染函数虽然不如模板直观，但在特定场景下非常必要。以下是详细的案例说明： 1. 动态组件工厂 - 高度灵活的 UI 构建 场景：需要根据配置动态生成不同组件结构 // ComponentFactory.vue export default { props: { schema: { type: Array, required: true
toISOString() 方法详解 toISOString() 是 JavaScript 中 Date 对象的一个方法，用于将日期时间转换为符合 ISO 8601 标准的字符串格式。 基本语法 dateObject.toISOString() 返回值 返回一个符合 ISO 8601 标准的字符串，格式为：YYYY-MM-DDTHH:mm:ss.sssZ YYYY：4位数年份 MM：2位数月份
在 Vue 3 中，setup 和函数式组件是两个相关但不同的概念。让我为你详细解释它们的关系和用法： 1. setup 函数 setup 是 Vue 3 组合式 API 的入口点，它在选项式组件和有状态组件中使用： <template> <div> <p>{{ count }}</p> <button @click=&qu
在Vue中，v-model:isExpand="isExpand" 是Vue 3中自定义v-model的用法，子组件需要通过props和emit来接收和更新这个值。 子组件接收方式 1. 使用 defineProps (Composition API) <template> <div> <div v-if="isExpand&
Vue3 鲜为人知的实用技巧 我将为你展示一些大多数开发者不知道的Vue3高级技巧，这些技巧可以显著提升开发效率和代码质量。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="
Vue3 Teleport 组件详解 Teleport 是 Vue3 引入的一个非常有用的内置组件，它允许你将组件的模板内容"传送"到 DOM 中的其他位置，而不受父组件 DOM 结构的限制。 完整讲解页面 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ch
在 Vue 3 中动态设置 <keep-alive> 的 include 值，可以让你灵活地控制哪些组件需要被缓存。include 属性会根据组件的 name 选项进行匹配。 ?️ Vue 3 动态设置 KeepAlive 的 include 在 Vue 3 中，<KeepAlive> 是一个内置组件，用于在多个组件间动态切换时缓存被移除的组件实例。通过动态设置 inclu
https://webrd${subdomain}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=${x}&y=${y}&z=${z} https://webst${subdomain}.is.autonavi.com/appmaptile?style=10&x
Vue工程化开发：组件化与模板化开发实践 下面我将为您展示一个完整的Vue工程化开发解决方案，融合了组件化和模板化开发的最佳实践。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="
在 Element UI 的 el-dialog 中集成高德地图的 Geocoder 模块（尤其是 Autocomplete 输入提示）时，amap-sug-result 下拉框闪烁后消失的问题，通常由 层级冲突（z-index）、初始化时机不当、容器尺寸计算错误 或 事件代理失效 引起。以下是具体原因分析和解决方案，结合代码优化步骤： ⚙️ 一、核心问题分析 z-index 层级被遮挡（最
Uniapp 小程序分包页面间跳转解决方案 在 Uniapp 开发小程序时，分包之间不能直接通过常规方式引用页面，但可以通过以下方案实现分包页面间的跳转和通信。 解决方案：使用全局路由跳转 文件结构 ├── pages │ └── main-page.vue // 主包页面 ├── subpackageA │ └── pages │ └── pageA.vue
Vue实现断点续传的完整代码示例，包含暂停/继续、进度显示和上传速度计算功能： FileUpload.vue <template> <div> <input type="file" @change="handleFileChange" /> <button @click="uploadF
在 UniApp 开发小程序时，实现发送验证码后自动填充到键盘的功能，主要依赖于小程序的 键盘输入框自动填充能力（目前微信小程序支持较好）。以下是完整实现方案： 核心原理 短信模板规范：短信内容中需包含 验证码 关键字和 4-6位数字 的验证码 开启自动填充：在 input 组件上添加 enable-auto-fill 属性（微信小程序） 监听键盘事件：通过 keyboardheightcha
在 Vue 中，"宏"（Macro）通常指的是 Vue 编译器在编译阶段处理的特殊语法或函数，它们会被转换成标准的 Vue 运行时代码。这些宏主要出现在 Vue 3 的 <script setup> 语法中，用于简化组件开发。 一、核心宏列表及作用 1. defineProps - 声明 Props 声明组件接收的 props（支持类型推导和默认值）： <s
在 Vue2 项目中按需引入 Element UI 的 Empty 组件 (el-empty)，可以按照以下步骤操作： 完整解决方案 1. 安装必要依赖 npm install element-ui babel-plugin-component -D # 或 yarn add element-ui babel-plugin-component -D 2. 配置 Babel (.babelrc 或
Vue 和 React 的 Diff 算法在核心设计、列表处理、节点复用策略及性能优化等方面存在显著差异。以下是两者的关键对比及原理分析： 一、核心设计理念 React 的 Diff 算法 单向递归对比：采用自顶向下的逐层比较，仅对比同级节点，若节点类型不同则直接删除重建。 Key 优化机制：依赖开发者手动为列表元素设置 key，通过 key 识别节点是否可复用，未设置或 key 不稳定时
uCharts 本身是一个基于 JavaScript 的图表库，虽然其原生代码并非完全使用 TypeScript 编写，但可以通过以下方式在 TypeScript（TS）项目中集成并实现类型安全支持： ? 一、基本集成方法 安装依赖 在项目中引入 uCharts 库（通常通过 npm 或直接引入 JS 文件）： npm install @qiun/ucharts # 若已发布到 npm，否
Vue 3 时间轴组件 (TypeScript) 下面是一个功能完整的 Vue 3 + TypeScript 时间轴组件，支持通过开始/结束时间生成时间轴，支持鼠标拖动更改时间，并具有平滑滚动和自适应功能。 功能亮点 支持时分秒的时间选择 平滑的拖拽体验 响应式设计 时间刻度自适应 精确的时间选择 视觉反馈优化 实现思路 将时间转换为秒数进行数学计算 使用 transform: transl
如果在项目中使用 eslint.config.mjs 后，VS Code 的 ESLint 插件不生效，可能是由于 配置格式兼容性、插件版本或 模块类型冲突 导致。以下是逐步排查和解决方案： 1. 确认 ESLint 版本支持 新版扁平化配置 (eslint.config.mjs) 需要 ESLint v8.23.0 或更高版本。 检查版本： npx eslint --version # 或全局
ESLint 的 eslintrc.cjs 和 eslint.config.mjs 是两种不同的配置文件格式，主要区别在于 配置系统版本、模块类型和 语法结构。以下是详细对比： 1. 配置系统版本 文件类型 所属系统 说明 .eslintrc.cjs 旧版配置 ESLint 传统配置方式（基于 eslintrc） eslint.config.mjs 新版扁平化配置 ESLint
Wot Design Uni 和 NutUI 是两款针对不同技术栈和应用场景设计的 UI 组件库，以下是两者的核心区别及适用场景分析： 一、技术栈与跨平台支持 特性 Wot Design Uni NutUI 技术栈 基于 Vue3 + TypeScript 构建 同时支持 Vue（2/3）和 React 技术栈 跨平台兼容性 支持微信、支付宝、钉钉小程序、H5、APP 等平台，
在 UniApp 开发中，使用 脚手架（如 Vue CLI）创建项目 和 HBuilderX 可视化创建项目 存在显著差异，主要体现在 编译器管理、开发工具支持、项目结构、扩展能力 等方面。以下是两者的详细对比： 一、编译器与升级机制 特性 脚手架（Vue CLI） HBuilderX 创建项目 编译器位置 编译器安装在项目目录下（如 node_modules） 编译器位于 HBu
在 UniApp 开发小程序时，实现分包的预加载可以有效提升用户体验，减少首次进入分包页面时的等待时间。 一、开启分包优化 修改 manifest.json 在 manifest.json 中开启分包优化："mp-weixin": { "optimization": { "subPackages": true // 开启
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号
