Antd React Form.Item内部是自定义组件怎么自定义返回值
在线演示 https://stackblitz.com/edit/stackblitz-starters-xwtwyz?file=src%2FSelfTreeSelect.tsx 需求 当我们点击提交,需要返回用户名和选中树的id信息,但是,我不关要返回树的id信息,还需要返回选中树的名称 //默认返回的{ userName:'梦洁', treeInfo:'leaf1-value'}//但是需要返回的如下{ userName:'梦洁' treeInfo:{ name:'leaf1-name', value:'leaf1-value' }} 做法了解下Form.Item怎么获取值的 大概就是这样子 实现自定义 主组件index.tsx import {Form,Input,Button} from "antd";import SelfTreeSelect from &qu ...
defineAsync-Suspense学习
前言 示例代码:https://github.com/superBiuBiuMan/defineAsync-Suspense-study defineAsyncComponent vue官方文档之异步组件:https://cn.vuejs.org/guide/components/async.html 在需要使用组件的时候,我们必须要全部import才可以,就像下面这样子 import Home from "./components/Home/index.vue"import Center from "./components/Center/index.vue" 这样子就算你使用了v-show还是v-if,也会加载资源,不相信可以看控制台~ 所以可以通过defineAsyncComponent进行优化 参数 const AsyncFooWithOptions = defineAsyncComponent({ loader: () => import("./demo.vue"), //加载过程 ...
QQ农场怀旧版搭建(附带搭建完成示例)
QQ农场搭建 示例均在宝塔面板搭建 搭建完成网站,欢迎━(｀∀´)ノ亻!大家种种菜 http://farm.dreamlove.top/ 如果不出意外应该会一直续费下去,毕竟linux服务器便宜很多~ 所需依赖mysql 5.5php 5.4nginx 1.22 下载农场文件并安装好了依赖 下载地址1:https://cloudreve.reassurehome.com/f/8PuE/farm-ucenter1.5.zip 下载地址2:https://wwi.lanzoup.com/iy6V31a1jgqj 解压文件 新建站点 推荐配置 操作系统 不限制 UNIX/Linux/FreeBSD LinuxPHP 版本 4.3.0+ 5.0.0+ 7.4.33附件上传 允许 允许 支持/最大尺寸50MMySQL 支持 MySQL4.0+ MySQL5.0+ 不支持磁盘空间 30M+ 不限制 4959M 否则可能出现下图的情况(php版本过高导致) 如果出现了,就重新更换php版本,这里换为了php5.4 下一步 安装成功 之后我们 ...
网盘文件批量分享,目前支持百度网盘,天翼网盘,115网盘,123盘,夸克网盘,蓝奏云
前言 偶尔需要用就心血来潮做了下 目前支持 百度网盘批量分享 115网盘批量分享 天翼云盘批量分享 123盘批量分享(2023年10月05日新增) 夸克网盘批量分享(2023年10月06日新增) 蓝奏网盘批量分享(2023年10月06日新增) 中国移动网盘批量分享(新增) 迅雷网盘批量分享(新增) 阿里云盘批量分享(新增) 注意:阿里云盘规定,普通用户每天只能使用分享功能5次；会员用户和Lv.1及以上的达人用户，每天可使用分享次数1000次。超过上限后，将提示「今日分享次数已达上限」 进度条展示 复制到剪贴板 下载分享链接 分享信息自定义配置 自定义提取码 等等…… 更新日志 2023年10月09日: 1.添加迅雷网盘 2.添加阿里云盘 3.优化挂载逻辑2023年10月07日: 1.中国移动网盘添加 2.逻辑优化2023年10月06日: 1.添加夸克网盘 2.添加蓝奏云并修复修复蓝奏云文件夹分享不显示问题 3.123网盘全新选取文件逻辑 4.百度网盘全新选取文件逻辑2023年10月05日: 1.添加pinia 2.优化逻辑代码 3.优化挂载逻辑 4.修复天翼云逻辑 4.添 ...
油猴(篡改猴)学习记录
第一个Hello World 注意点:默认只匹配了http网站,如果需要https网站,需要自己添加@match https://*/* 代码如下 这样子访问任意网站就可以输出Hello World // ==UserScript==// @name 第一个脚本// @namespace http://tampermonkey.net/// @version 0.1// @description try to take over the world!// @author You// @match http://*/*// @match https://*/*// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==// @grant none// ==/UserScript==(function() { 'use strict'; ...
antd3和dva-自定义组件初始化值的操作演示和自定义组件校验
前言 在antd3 (react)版和dva下,好像有的项目使用的是getFieldDecorator来获取表单的值的,现在就遇到了一个问题,getFieldDecorator针对antd自带的组件实现效果很好,除去一个form.item只能有一个getFieldDecorator的限制,其他都很好用,但是假如是自定义组件或者说在getFieldDecorator当中遇上了全选操作,就会有问题(目前我是这样子的) 演示代码地址: https://github.com/superBiuBiuMan/dva_antd3_component 演示效果 实现 实现的关键其实就是调用getFieldDecorator修饰过后自动向组件传递的onChange事情来传递值,如果需要初始化值操作,可以借助initialValue或者使用 setFieldsValue 来动态设置其他控件的值。 initialValue: 初始化值操作,但是如果传入的是一个变量,后期变量更新,组件收到的值也不会变化 比如通过initialValue传入了变量a,值为100,那么后面a的值变为了200,那么组 ...
tdesign的白天黑夜模式实现原理
以tdesign为例 我们看下源码 可以看到,tdesign是借助于:root选择器,并结合属性选择器来设置的,当html标签存在一个名叫theme-mode属性的时候,如果值为dark就使用白天的主题,否则就使用黑天的主题 我们切换下颜色,更改html当中的属性,可以看到下图的区别 <!DOCTYPE html><!-- 黑夜模式,设置 theme-mode="dark" --><html lang="en" theme-mode="dark"> ...</html><!-- 白天模式 设置 theme-mode="light"--><html lang="en" theme-mode="light"> ...</html>
前端div水平居中的几种实现方式
借助display布局 父元素开启display:flex布局,并设置justify-content:center主轴的空隙分布 因为是单行,所以使用align-items:center设置侧轴上的对其方式 <body> <style> .a{ width: 200px; height: 200px; background-color: red; display: flex; justify-content: center; align-items: center; } .a .a1{ width: 50px; height: 50px; background-color: green; } </style> <div class="a"> <div class="a1"></div> </div& ...
前端面试之手写call,apply,bind
了解下this的指向 普通函数当中的this指向window 对象身上的方法指向这个对象 箭头函数的this执行上层作用域下的this 手写callFunction.prototype.myCall = function(context,...arg){ context = context!== undefined && context !== null ? Object(context) : window; let callFn = this;//获取call let symbolTemp = Symbol('临时');//临时存储 context[symbolTemp] = callFn; let result = context[symbolTemp](...arg); delete context[symbolTemp];//用后删除 console.log(context[symbolTemp]);//undefine return result;}const testExample = { x: 42, g ...
前端文字实现拼音标注
示例地址 https://github.com/superBiuBiuMan/duyi_study 使用ruby标签 使用ruby标签进行标注 <ruby> 汉 <rt>hàn</rt></ruby> 当遇到不兼容此标签的时候,可以添加一个rp标签,正确情况下是不显示rp标签的 <ruby>汉 <rp>(</rp> <rt>hàn</rt> <rp>)</rp></ruby> 使用拼音库 https://pinyin.js.org/ https://www.npmjs.com/package/pinyin 安装 npm install pinyin@alpha --save 使用看官网 示例 import pinyin from "pinyin/lib/pinyin-web";pinyin('你') 效果