vue 项目如何实现一键网站换肤效果 (webpack-theme-color-replacer 的使用)现在看不少网站都有一键换肤的效果，这东西要说简单有简单的做法，要说复杂有复杂的做法，看到ant design pro 源码使用了webpack-theme-color-replacer插件，就了解一下，记录下学习过程。本文主要记录 webpack-theme-color-replacer插件的
转载
2024-07-16 12:22:45
71阅读
提笔前言工作中结合Ant Design开发React项目已经有一段时间了，最近开始阅读Ant Design的源码，略有收获。现在整理一下阅读源码过程中的一些记录与心得。文中如有解释不准确的地方Ant简介Ant Design（以下简称为Antd）是基于React的UI库，不仅提供了各种常用组件，还提供了大量的设计规范指导。而本系列文章是从Antd的各个组件来揣摩下作者大大们的思路，先从最最基本的UI
转载
2024-07-09 22:03:39
145阅读
概览本文主要用于记录该次使用Formik时用到的相关接口，而侧重点不在antd-mobile，对antd-mobile会贴出对应组件API。文章需要基础知识点：React基本知识ES6基本知识文章实践环境为：antd-mobile@2.2.3formik@1.1.1react@16.4.1文章最后成果：熟悉Formik的使用方法封装一个简单的自用表单组件Formik开源的轻量级 React 表单组
目录一、问题背景二、CDN的功能三、CDN的组成一、问题背景由于服务器众多，如果访问的服务器距离用户很远，那么就会出现访问卡顿和高延迟的现象，因为需要更多的带宽和时间从遥远的服务器传输数据到用户的移动端，所以为了方便用户的快速访问，提高访问的流畅度和好的体验，很多企业使用了CDN服务器，牵扯到很多的CDN加速和CDN缓存的问题。1998 年，中国第一家 CDN 公司 ChinaCache
转载
2024-10-22 15:05:25
202阅读
在系统操作中，批量操作是常用的操作方式，例如批量启用、批量禁用、批量删除、批量下载……所以今天作者就教大家如何在Axure中制作一个能多选和批量操作的的原型模板，该原型主要使用中继器制作，所以复用性很高，再次使用时只需填写中继器表格内容，自动实现交互效果。完成后如下如所示效果：【原型效果】【原型预览】https://axhub.im/ax9/2bcd864c6573fb02/#g=1&id
前言页面我用一个Modal组件包一个Form组件，由于页面较复杂，所以采用混合布局，一部分用Form.Item包裹组件（受控），一部分直接用原始组件（不受控）受 控 组 件 ：手动改变，页面动态更新，form.getFieldsValue() 能取到最新值不受控组件：设置defaultValue时，手动改变，页面动态更新，onChange能取到输入的值，外部数据也更新 【√】设置value时，手动
转载
2024-10-16 12:22:45
224阅读
以前不太懂后台的时候一直在纠结分页机制具体是如何实现的，好高端的赶脚，随着知识的增长和经验的日积月累，发现其实也就是那么回事，那么具体是怎么一回事呢？或许还有很多新手小伙伴不太清楚具体的实现机制，那么接下来我们一起来分享一下吧！ &n
封装的组件的代码：<template>
<div>
<!-- 该组件专门用于：用于上传图片（预览、上传、删除）-->
<!-- 他的接口现在只能一次上传一个-->
<!-- :getPopupContainer="triggerNode => triggerNode.p
本文案例是月视图下的预定管理安装FullCalendar，按需引入，官方文档：https://fullcalendar.io/docs/vue
npm install @fullcalendar/vue @fullcalendar/daygrid moment在页面中引用fullcalendar组件<template>
<div class='calendarAll'>
转载
2024-07-11 05:34:56
331阅读
引言在开发中台过程中 我们的原型中有很多表单，antd有表单组件，但是粒度比较细，就单纯组件而言，无可厚非，但是在开发过程中，可能会造成代码不够聚合，有些表单公共逻辑无法提取，copy paste比较多，所以可以加以封装，搞一个兼容性和扩展性都契合项目本身的组件。主要思路我简单查阅了一番资料，参考了一下别人的封装方式，决定以Col和FormItem作为基本单元，进行表单的搭建，主要原因可以将For
简单日程表1. css文件如下：body{
width: 1200px;
height:800px;
background: aquamarine;
}
#style1{
position: fixed;
top: 0;
left: 40%;
font-size: 30px;
color: red;
}
#style2{
p
转载
2024-07-19 22:02:27
39阅读
AntDesign-React与VUE有点不一样，第一篇深入了解React的概念之一：JSX一、什么是JSX使用JSX声明一个变量（REACT当中的元素）： const element =<h1>Hello,world!</h1>; JSX是一种JavaScript的语法扩展。我们推荐在REACT中使用JSX来描述用户界面，JSX乍一看起来可能比较像是模板语言，但事实上
table表头的修改遇到的问题解决方法详细解释 遇到的问题我想实现的效果 但是我实际出现的效果仔细观察，发现存在以下问题：1.表头的背景与遮挡 2.加上边界在项目中找到了对应的界面代码，发现特别简单，根本不存在实现这个效果的代码，于是找到了其导入的文件 界面的代码 很明显不存在我想要实现的效果的代码，于是找进了导入的文件oj-table 但翻看了几次代码依旧不知道如何实现的，就开始搜集去找相关资
转载
2024-10-04 08:55:13
225阅读
一、简介Rspack CLI 官方文档。rspack.config.js 官方文档。二、创建 vue 项目创建项目（文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式，根据需求进行选择）# npm 方式
$ npm create rspack@latest
# yarn 方式
$ yarn create rspack
# pnpm 方式
$ pnpm create r
Tree 树形控件用清晰的层级结构展示信息，可展开或折叠。基础用法基础的树形结构展示。通过dataSource绑定数据源，使用afterToggle获得每次展开收起的回调方法。同时你还可以配置数据源中的display决定默认展开的选项。<template>
<fl-Tree :dateSource = "treeData" @afterToggle = "afterToggle
大屏设计器项目开发纪实之项目搭建篇。创建项目使用pnpm创建 vite + vue3 项目，终端执行pnpm create vite
选择 vue 模板中 Customize with create-vue
选择安装 ts, jsx, vue-router, pinia, elsint, prettier, vitest使用pnpm workspace文档参考：https://pnpm.io/zh
恩，这是小小本周的第六篇。 高能时刻即将到来！前端部分这里阐述前端部分导入，导出，生成Excel表格 这里使用的是一个js-xlsx插件，所以这里进行尝试。安装依赖yarn add xlsx项目中引入import * as XLSX from 'xlsx'导出基本实现定义导出的基本方法export default function download(json,fileName){
con
Ant构建工具使用: 1、下载ant并解压到硬盘的某个位置 2、配置ant的环境变量ANT_HOME=D:\commons\apache-ant-1.7.1 path=%ANT_HOME%\bin 3、测试ant是否安装成功。 运行cmd命令(小窗口+r可以调出运行窗口键入cmd)进入dos窗口，键入ant回车运行得到 Buildfile: build.xml does not exi
第一个组件上一节，我们写了一个页面组件。export default () => {
return <div>hello world</div>;
}页面插入这个组件以后，就会显示 Hello World 。但是，上一节并没有解释这段代码的含义，只是让大家照着拷贝。本节就来解释什么是组件，以及怎样写组件。这是 React 和 Ant Design 的使用基础，只有
1.登录-整体认识和路由配置登录-表单校验实现ElementPlus表单组件内置了表单校验功能，只需要按照组件要求配置必要参数即可.。 思想：当功能很复杂时，通过多个组件各自负责某个小功能，再组合成一个大功能是组件设计中的常用方法。表单校验步骤：1. 按照接口字段准备表单对象并绑定2. 按照产品要求准备规则对象并绑定3. 指定表单域的校验字段名4. 把表单对象进行双向绑定 自定
