前端map标签(创建热点区域或是点击图片指定区域跳转对应链接))
前言 点击整张图片的某一部分,可以实现自定义跳转或者一些事件 利用img和map和area标签实现 先来看下实现 https://www.w3cschool.cn/tryrun/showhtml/tryhtml_areamap 1234567<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"> <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif"> <area shap ...
前端进度条和进度条流光效果
前言 进度条的实现学习这个的,这里只是记录下自己笔记 https://bytefish.medium.com/css-awesome-trick-how-to-create-a-progress-bar-that-changes-color-according-to-progress-be9652ebdd1c 在线演示地址(原作者) https://codepen.io/bytefishmedium/pen/VwXYKQK 在线演示地址(添加了一个流光) https://codepen.io/superbiubiuman/pen/bGZNbwp 设定的范围颜色显示 12345678980 <= --percent <= 100 绿色(green)60 <= --percent <80 蓝色(blue)40 <= --percent < 60 紫色(purple)20 <= --percent < 40 桔色(orange)0 <= --percent < 20 红色(red) 效果差不多这样子 有 ...
Antd React Form.Item内部是自定义组件怎么自定义返回值
在线演示 https://stackblitz.com/edit/stackblitz-starters-xwtwyz?file=src%2FSelfTreeSelect.tsx 需求 当我们点击提交,需要返回用户名和选中树的id信息,但是,我不关要返回树的id信息,还需要返回选中树的名称 12345678910111213//默认返回的{ userName:'梦洁', treeInfo:'leaf1-value'}//但是需要返回的如下{ userName:'梦洁' treeInfo:{ name:'leaf1-name', value:'leaf1-value' }} 做法了解下Form.Item怎么获取值的 大概就是这样子 实现自定义 主组件index.tsx 123456789101112131415161718192021222324252627282930313233343536373839404 ...
defineAsync-Suspense学习
前言 示例代码:https://github.com/superBiuBiuMan/defineAsync-Suspense-study defineAsyncComponent vue官方文档之异步组件:https://cn.vuejs.org/guide/components/async.html 在需要使用组件的时候,我们必须要全部import才可以,就像下面这样子 12import Home from "./components/Home/index.vue"import Center from "./components/Center/index.vue" 这样子就算你使用了v-show还是v-if,也会加载资源,不相信可以看控制台~ 所以可以通过defineAsyncComponent进行优化 参数 12345678910111213141516171819202122const AsyncFooWithOptions = defineAsyncComponent({ loader: () => im ...
QQ农场怀旧版搭建(附带搭建完成示例)
QQ农场搭建 示例均在宝塔面板搭建 搭建完成网站,欢迎━(｀∀´)ノ亻!大家种种菜 http://farm.dreamlove.top/ 如果不出意外应该会一直续费下去,毕竟linux服务器便宜很多~ 所需依赖123mysql 5.5php 5.4nginx 1.22 下载农场文件并安装好了依赖,下面演示为老版本的搭建 下载地址1:https://cloudreve.123916.xyz/s/J6UW (7.0版本带module) 下载地址1.1: https://www.123pan.com/s/9biA-sH5Hh.html (7.0版本带module) 下载地址2:https://wwi.lanzoup.com/iy6V31a1jgqj (老版本) 如果需要更新请查看新帖子 https://dreamlove.top/6b274c12.html 解压文件 新建站点 推荐配置 12345操作系统 不限制 UNIX/Linux/FreeBSD LinuxPHP 版本 4.3.0+ 5.0.0+ 7.4.33附件上传 允许 允许 支持/最大尺寸50 ...
网盘文件批量分享,目前支持百度网盘,天翼网盘,115网盘,123盘,夸克网盘,蓝奏云
前言 偶尔需要用就心血来潮做了下 目前支持 百度网盘批量分享 115网盘批量分享 天翼云盘批量分享 123盘批量分享(2023年10月05日新增) 夸克网盘批量分享(2023年10月06日新增) 蓝奏网盘批量分享(2023年10月06日新增) 中国移动网盘批量分享(新增) 迅雷网盘批量分享(新增) 阿里云盘批量分享(新增) 注意:阿里云盘规定,普通用户每天只能使用分享功能5次；会员用户和Lv.1及以上的达人用户，每天可使用分享次数1000次。超过上限后，将提示「今日分享次数已达上限」 进度条展示 复制到剪贴板 下载分享链接 分享信息自定义配置 自定义提取码 等等…… 更新日志 1234567891011121314151617182023年10月09日: 1.添加迅雷网盘 2.添加阿里云盘 3.优化挂载逻辑2023年10月07日: 1.中国移动网盘添加 2.逻辑优化2023年10月06日: 1.添加夸克网盘 2.添加蓝奏云并修复修复蓝奏云文件夹分享不显示问题 3.123网盘全新选取文件逻辑 4.百度网盘全新选取文件逻辑2023年10月05日: 1.添加pinia 2.优化 ...
油猴(篡改猴)学习记录
第一个Hello World 注意点:默认只匹配了http网站,如果需要https网站,需要自己添加@match https://*/* 代码如下 这样子访问任意网站就可以输出Hello World 12345678910111213141516// ==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() { & ...
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当中的属性,可以看到下图的区别 12345678910111213<!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设置侧轴上的对其方式 1234567891011121314151617181920<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&q ...
