实例化方法一:DbSearcher(String dbFile, QueryType queryType, String key)
实例化方法二:DbSearcher(InputStream is, QueryType queryType, String key)
方法一通过传入文件路径来实例化,方法二通过传入文件流来实例化;
当 queryType 为 MEMORY 时,方法一和方法二只有在实例化时有性能差别,差别在于将指定路径的文件读到内存中保存;在执行 Search 方法时无性能差别,因为都是在内存中执行查找;
queryType 为 MEMORY 和 BTREE 的差别在于前者是在内存中查找,速度快但占内存,后者是在文件中查找,速度慢但省内存。
错误:Padding is invalid and cannot be removed.
原因:可能是数据库文件与密钥不一致。
尝试捕获 InnerException 的 Message:
catch (Exception ex)
{
return BadRequest(ex.InnerException?.Message ?? ex.Message);
}得到具体的错误信息:
Failed to find library "leptonica-1.82.0.dll" for platform x64.
GitHub 上有人提出了同样的问题,去看看。
解决方法:
安装 VC Redist。
其实 Tesseract 的 GitHub 已经提到需要安装 Visual Studio 2019 运行时。
.NET SDK 的版本 8.0.303 至少需要 MSBuild 的 17.8.3 版本。当前可用的 MSBuild 版本为 16.11.2.50704。请将在 global.json 中指定的 .NET SDK 更改为需要当前可用的 MSBuild 版本的旧版本。
解决方法:
运行 Visual Studio Installer,
选择相应 VS 版本进行修改,
切到“单个组件”,
勾选“.NET SDK (out of support)”,
点击修改并继续。
.NET Framework 项目中使用 MySql.Data.EntityFramework 连接 MySQL 8.0 时遇到以下错误:
NotSupportedException: Character set 'utf8mb3' is not supported by .Net Framework.
解决方法:
Nuget 中将 MySql.Data 和 MySql.Data.EntityFramework 更新到最新版。
未能找到路径“\roslyn\csc.exe”的一部分。
解决方法:
在 nuget 中直接卸载 Microsoft.CodeDom.Providers.DotNetCompilerPlatform
如果 web.config 报错,删除与 Microsoft.CodeDom.Providers.DotNetCompilerPlatform 相关的项,如:
<system.codedom>
<compilers>
<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701;612;618" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=4.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008,40000,40008 /define:_MYTYPE=\"Web\" /optionInfer+" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=4.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</compilers>
</system.codedom>然后遇到错误:
功能 空传播运算符 在 C# 5 中不可用。请使用 6 或更高的语言版本所以还是少不了 Microsoft.CodeDom.Providers.DotNetCompilerPlatform
又把这货装上了,竟然不报错了。
这期间我更改过在 Release 模式下调试,将 .NET Framework 4.8 升级到 .NET Framework 4.8.1 等,然后又退回到原来的状态和版本,竟然都正常了。
就这样吧!
客户端:Failed to connect to host.
服务端:无任何日志
原因:可能是域名、IP 或端口有误,或端口未开放。
客户端/服务端:530 Login incorrect.
原因:用户名或密码错误。
客户端/服务端:503 Use AUTH first.
原因:服务端开启了 FTPS 协议(FTP over TLS),且禁止了 FTP 协议(plain FTP)。
解决方法:不建议服务端恢复不安全的 FTP 协议,客户端应配置 client.Config 的 EncryptionMode、DataConnectionEncryption、SslProtocols、ValidateCertificate 等参数。
客户端/服务端:530 This server does not allow plain FTP. You have to use FTP over TLS.
原因:服务端启用了 FTPS。
解决方法:给 client.Config.EncryptionMode 正确的赋值(FtpEncryptionMode.Explicit 或 FtpEncryptionMode.Auto)。
服务端:[Error] TLS session of data connection not resumed.
原因:证书版本有误。
解决方法:给 client.Config.SslProtocols 赋值正确的 TLS 版本。
服务端:521 PROT P required
原因:服务端开启了“Require TLS session resumption on data connection when using PROT P”
解决方法:client.Config.DataConnectionEncryption = true;
客户端/服务端:450 TLS session of data connection has not resumed or the session does not match the control connection
原因:TLS 与控制连接不匹配,即服务端开启了“Require TLS session resumption on data connection when using PROT P”
解决方法:我暂时还不知道原因,临时关闭了“Require TLS session resumption on data connection when using PROT P”(不建议)。该问题出现在 FileZilla Server 0.x 版本,在 1.x 版本中没有该配置选项。

这是由语法错误(或 VS 无法识别的语法)引起的
找到该行,发现是 vue 的 Attribute 绑定语法不能被识别的原因。
将简写语法
<div :class="" />改为 v-bind 指令
<div v-bind:class="" />这个问题在 .aspx 页面中发生。
本文图片基于网络图片更新,如有侵权,请通过网站底部联系站长删除。
本文内容来源于网络,如有错误欢迎批评指正。
USB 接口类型
USB 接口有 Mini、Micro、Type 三种外观。

通常说的 USB-C 一般指 USB Type-C,因为没有 Mini-C 和 Micro-C。而 USB-A / USB-B 一般也特指 Type-A / Type-B。
数据传输能力
USB 标准(附 Thunderbolt)
| 规格 | 别名 | 接口类型 | 理论带宽 | 电力规格 | 备注 |
| USB 1.0 | Low-Speed | Mini A / B Micro A / B 2.0 Type A / B 2.0 | 1.5 Mbps | 5V/0.5A | |
| USB 1.1 | Full-Speed | 12 Mbps | 5V/0.5A | ||
| USB 2.0 | Hi-Speed High Speed | Mini A / B Micro A / B 2.0 Type A 2.0 / B 2.0 / C | 480 Mbps | 5V/0.5A | |
USB 3.0 USB 3.1 Gen 1 USB 3.2 Gen 1 | SuperSpeed | Micro B 3.0 Type A 3.x / B 3.x / C | 5 Gbps | 5V/0.9A PD2.0 100W | |
USB 3.1 USB 3.1 Gen 2 USB 3.2 Gen 2 | SuperSpeed+ | Micro B 3.0 Type A 3.x / B 3.x / C | 10 Gbps | 5V/0.9A PD2.0 100W | |
USB 3.2 USB 3.2 Gen 2×2 | SuperSpeed 20Gbps | Type-C | 20 Gbps | PD2.0 100W | |
USB4 Gen 2×2 | USB4 20Gbps | Type-C | 20 Gbps | PD3.0 100W PD3.1 240W | 兼容 Thunderbolt 3 |
| USB4 Gen 3×2 | USB4 40Gbps | Type-C | 40 Gbps | ||
| USB4 2.0 | USB4 80Gbps | Type-C | 80 Gbps | ||
| Thunderbolt 1 | 雷雳1、雷电1 | Mini DisplayPort | 10 Gbps | ||
| Thunderbolt 2 | 雷雳2、雷电2 | Mini DisplayPort | 20 Gbps | ||
| Thunderbolt 3 | 雷雳3、雷电3 | Type-C | 40 Gbps | 配件供电 15W PD 100W | 兼容 USB4 |
| Thunderbolt 4 | 雷雳4、雷电4 | Type-C | 40 Gbps | 配件供电 15W PD 100W | 兼容 Thunderbolt 3 |
| Thunderbolt 5 | 雷雳5、雷电5 | Type-C | 80Gpb (带宽增强 120Gpbs) | 240W | USB4 V2、DisplayPort 2.1 和 PCI Express Gen 4 |
Thunderbolt / 雷雳 / 雷电 是同一个意思,而闪电接口指的是 Lightning,都是区别于 USB 的传输技术
Thunderbolt 本身是数据传输和显示协议,Thunderbolt 3 起采用 USB-C 外观,支持 PD 协议后可进行快速充电
识别不同标准的接口,比如若 Type-C 接口旁边写着 ss 和 5 表示 SuperSpeed 和 5Gbps,即 USB 3.0;插口旁边带有⚡️标志表示雷电接口。
电力传输能力
常见快充协议
| 协议 | 版本 | 发布年份 | 区别 | 接口形态 |
BC (Battery Charging Specification) | 1.2 | 2010 年 | 7.5W(5V/1.5A) | |
高通 QC (Qualcomm Quick Charge) | 1.0 | 2013 年 | 10W(5V/2A) | Micro-USB |
| 2.0 | 2014 年 | Class A:5V、9V、12V 电压可选,最大输出功率为 18W? Class B:5V、9V、12V、20V 电压可选,最大输出功率为 60W | Micro-USB / Type-A | |
| 3.0 | 2015 年 | Class A:3.6-12V,Class B:3.6-20V,支持动态调整电压和电流,最大输出功率为 18W? | Micro-USB / Type-A / Type-C | |
| 4.0 | 2017 年 | 5V/5.6A 或 9V/3A,最大输出功率为 28W?,兼容了 USB PD 2.0 / PD 3.0 PPS? | Type-C | |
| 4+ | 2019 年 | 最大输出功率为 100W?,支持 PPS 协议?兼容 QC2.0~QC3.0 | Type-C | |
| 5.0 | 2020 年 | 最大输出功率 > 100W,兼容 QC2.0~QC4+ | Type-C | |
USB-PD (USB Power Delivery) | 1.0 | 2012 年 | 5V、12V、20V 电压可选,最大输出功率为 10W | Micro-USB / Type-A / Type-B |
| 2.0 | 2014 年 | 5V3A、9V3A、15V3A、20V3A、20V5A(E-Marked),最大输出功率为 100W | Type-C | |
| 3.0 | 2015 年 | 5V3A、9V3A、15V3A、20V3A、20V5A(E-Marked),最大输出功率为 100W | Type-C | |
| 3.0 PPS | 2017 年 | 支持 PPS 协议,3.3V-21V 3A-5A | Type-C | |
| 3.1 | 2021 年 | Type-C | ||
| 3.2 | 2023年 | 强制 AVS,优化 EPR | Type-C |
华为 SuperCharge(FCP / SCP)、小米 Mi Turbo Charge、OPPO VOOC、vivo FlashCharge、三星 AFC 等私有协议不在此列出。
Magsafe 电源适配器 是磁吸式有线充电接口,最大输出功率为 85W(截止2023年),用于 Macbook;
Magsafe 充电器 是磁吸式无线充电接口,最大输出功率为 15W(截止2023年),用于 iPhone,不属于快充。
Qi 是无线充电协议,Qi1 最大输出功率为 7.5W,Qi2 最大输出功率为 15W。
功率决定充电速度,功率与电压电流的关系:P=U*I,如 5V1A=5W
一条 USB 线由插座/母口(Receptacle)、插头/公口(Plug)和线缆(Cable)三部分组成,要实现某个协议,需要插座和插头都支持该协议。
PPS:Programmable Power Supply 可编程电源
SPR:Standard Power Range 标准功率范围
EPR:Extended Power Range 扩展功率范围
FCP:Fast Charge Protocol 华为早期快充协议,支持 18W
SCP:Super Charge Protocol 华为超级快充协议,支持 22.5W、40W
本文将详细介绍 stable diffusion webui 的下载、安装及问题解决。
Stable Diffusion 是 2022 年发布的深度学习文本到图像生成模型。它主要用于根据文本的描述产生详细图像,尽管它也可以应用于其他任务,如内补绘制、外补绘制,以及在提示词(英语)指导下产生图生图的翻译。它是一种潜在扩散模型,由慕尼黑大学的 CompVis 研究团体开发的各种生成性人工神经网络。它是由初创公司 StabilityAI,CompVis 与 Runway 合作开发的,并得到 EleutherAI 和 LAION 的支持。
其它问题请参考:
运行使用时问题《Windows 使用 Stable Diffusion 时遇到的各种问题整理》;
模型运用及参数《Stable Diffusion 个人推荐的各种模型及设置参数、扩展应用等合集》;
提示词生图咒语《Stable Diffusion 提示词词缀使用指南(Prompt)》;
不同类的模型Models说明《解析不同种类的 Stable Diffusion 模型 Models》;
绘制人物动作及手脚细节《Stable Diffusion 准确绘制人物动作及手脚细节(需 ControlNet 扩展)》;
各种风格对比及实际运用《AI绘图风格对照表/画风样稿详细研究记录及经验总结》;
一、环境准备
(一)硬件方面:
1. 显存
4G 起步,4G 显存支持生成 512*512 大小图片,超过这个大小将卡爆失败。
2. 硬盘
10G 起步,模型基本都在 5G 以上,有个 30G 硬盘不为过吧?现在硬盘容量应该不是个问题。
(二)软件方面:
1. Git
https://git-scm.com/download/win
下载最新版即可,对版本没有要求。
2. Python
https://www.python.org/downloads/
截止发稿(2023.3.6)时,最高版本只能用 3.10.*,用 3.11.* 会出问题。
3. Nvidia CUDA
https://developer.download.nvidia.cn/compute/cuda/11.7.1/local_installers/cuda_11.7.1_516.94_windows.exe
版本 11.7.1,搭配 Nvidia 驱动 516.94,可使用最新版。
4. stable-diffusion-webui
https://github.com/AUTOMATIC1111/stable-diffusion-webui
核心部件当然用最新版本~~但注意上面三个的版本的兼容性。
5. 中文语言包
https://github.com/VinsonLaro/stable-diffusion-webui-chinese
下载 chinese-all-0306.json 和 chinese-english-0306.json 文件
6. 扩展(可选)
https://github.com/Mikubill/sd-webui-controlnet
下载整个 sd-webui-controlnet 压缩包
https://huggingface.co/Hetaneko/Controlnet-models/tree/main/controlnet_safetensors
https://huggingface.co/lllyasviel/ControlNet/tree/main/models
https://huggingface.co/TencentARC/T2I-Adapter/tree/main
试用时先下载第一个链接中的 control_openpose.safetensors 或 第二个链接中的 control_sd15_openpose.pth 文件
7. 模型
https://huggingface.co/models
https://civitai.com
可以网上去找推荐的一些模型,一般后缀名为 ckpt、pt、pth、safetensors ,有时也会附带 VAE(.vae.pt)或配置文件(.yaml)。
| 类型 | 文件格式 | 存放目录 | 备注 |
|---|---|---|---|
| check point | .ckpt,.safetensors | \models\Stable-diffusion | 文件较大 |
| vae | 名字带有 vae 的 | \models\vae | 细节更好地恢复,特别是眼睛和文字 |
| Textual Inversion | *.pt | \embeddings | 一般文件很小,额外的 tag |
| Lora | *.pt | \models\Lora | 调整模型,理解为风格化也可以 |
| Hypernetworks | .pt,.ckpt,*.safetensors | \models\hypernetworks | 和 lora 工作方式相似,算法不同 |
这里可以学习一下模型的基本概念《解析不同种类的 Stable Diffusion 模型 Models,再也不用担心该用什么了》
二、安装流程
1. 安装 Git
就正常安装,无问题。
2. 安装 Python
建议安装在非 program files、非 C 盘目录,以防出现目录权限问题。
注意安装时勾选 Add Python to PATH,这样可以在安装时自动加入 windows 环境变量 PATH 所需的 Python 路径。
3. 安装 Nvidia CUDA
正常安装,无问题。
4. 安装 stable-diffusion-webui
国内需要用到代理和镜像,请按照下面的步骤操作:
a) 编辑根目录下 launch.py 文件
将 https://github.com 替换为 https://ghproxy.com/https://github.com,即使用 Ghproxy 代理,加速国内 Git。
如图将代码中所有类似地址都改掉(注意:不仅仅是图中所展示的这些)。

b) 执行根目录下 webui.bat 文件
根目录下将生成 tmp 和 venv 目录。
c) 编辑 venv 目录下 pyvenv.cfg 文件
将 include-system-site-packages = false 改为 include-system-site-packages = true。
d) 配置 python 库管理器 pip
方便起见,在 \venv\Scripts 下打开 cmd 后执行如下命令:
pip config set global.index-url https://mirrors.aliyun.com/pypi/simple/ # 镜像
pip freeze > requirements_versions.txt # 创建文件
pip install -r requirements_versions.txt # 执行此条命令前,请检查你的剩余磁盘空间
pip install xformer # 如果不执行此条命令,启动 Stable Diffusion 时可能会出现错误。xformer 还可以在后续使用中降低显卡占用。xformer 会安装到 \venv\Lib\site-packages 中,安装失败可以用 pip install -U xformers 命试试。
e) 安装语言包
将文件 chinese-all-0306.json 和 chinese-english-0306.json 放到目录 \localizations 目录中。
运行 webui 后进行配置,操作方法见下。
f) 安装扩展(可选)
将 sd-webui-controlnet 解压缩到 \extensions 目录中。
将 control_sd15_openpose.pth 文件复制到 /extensions/sd-webui-controlnet/models 目录中。
不同的扩展可能还需要安装对应的系统,比如 controlnet 要正常使用则还需要安装 ffmpeg 等。
g) 安装模型
下载的各种模型放在 \models\Stable-diffusion 目录中即可。
h) 再次执行根目录下 webui.bat 文件
用浏览器打开 webui.bat 所提供的网址即可运行。

其中提供了网址:http://127.0.0.1:7860。
打开该网址后在 Settings -> User interface -> Localization (requires restart) 设置语言,在菜单中选择 chinese-all-0220(前提是已经在目录中放入了对应语言包,见上),点击 Apply Settings 确定,并且点击 Reload UI 重启界面后即可。

好了,现在可以开始使用了~~
三、问题及注意点
1. python 版本错误
错误:
ERROR: Could not find a version that satisfies the requirement torch==1.13.1+cu117
ERROR: No matching distribution found for torch==1.13.1+cu117
这是由于 python 版本不对导致的(上面提过了,截止发稿时不能追求新版本),要用 python 3.10.* 版本。
解决来源:https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/7166

2. pip版本错误
警告:
[notice] A new release of pip available: 22.3.1 -> 23.0.1
[notice] To update, run: D:\stable-diffusion-webui\venv\Scripts\python.exe -m pip install --upgrade pip
提示中已经给出了解决方案:
在 \venv\Scripts\ 目录中打开 cmd,执行
python.exe -m pip install --upgrade pip
3. 安装或执行停滞
如果在执行 webui.bat 进行包下载安装时或者生成图片时会卡很久都没反应,那么这时可以复制包名,进入 python 安装目录或 \venv\Scripts\ 目录中打开 cmd,执行
pip install 包名也可以通过任务管理查看网络状态,如果网络在玩命下载,那么就等着吧~~

4. xFormers 安装不上
很多同学都反应 xformers 无法安装,可以用以下的方法试试:
检查 Dreambooth 要求的 Python 版本:
如果您的 Python 版本低于 3.6,请安装最新的 Python 版本,并重复尝试安装 xformers。
# 据此可以在终端中运行以下命令,以检查您的 Python 版本:
python --version安装依赖项:xformers 有许多依赖项,如果这些依赖项没有正确安装可能会导致升级失败。您可以尝试安装以下依赖项:
pip install numpy scipy torch torchaudio transformers清除 pip 缓存并重新安装:
# 清除 xformers 缓存:运行以下命令清除 xformers 缓存。
pip uninstall -y xformers
pip cache purge
# 更新 pip:确保您正在使用最新版本的 pip,可以运行以下命令更新 pip。
pip install --upgrade pip
# 安装 xformers:在清除了缓存并更新了 pip 之后,重新安装 xformers。
pip install xformers手动安装 xformers 指定版本
如果上述步骤仍然无法解决问题,可尝试手动安装 Dreambooth 所需的 xformers 版本。在 Dreambooth 的文档中,可以找到 xformers 的版本要求。
pip install xformers==0.0.17.dev465使用 conda 环境
如果您使用的是 conda 环境,请尝试在 conda 环境中安装 xformers。
# 创建 conda 环境
conda create --name myenv
# 激活 conda 环境并安装 xformers
conda activate myenv
pip install xformers网络问题
如果已经配置好了代理,就不要考虑这个了。
检查网络连接:请确保您的计算机与互联网连接,并且网络连接没有被防火墙或代理服务器阻止:
# 检查网络连接是否正常
ping google.com非必要
你确定需要使用 xformers 么?如果不需要,可以在webui-user.bat中把--xformers去掉试试。其它
如果上述方法还是无法解决问题,请尝试在 OpenAI 的论坛或者 Dreambooth 的 GitHub 页面上寻求更多帮助。-_-!
5. 其他安装问题
删除 /tmp 和 /venv 目录后重启 webui.bat 试试。
6. 硬件问题
一般显卡不达标,就会爆卡,解决办法就是编辑根目录下 webui-user.bat 文件,试一下修改参数 COMMANDLINE_ARGS 即可。
以下几个设置逐一测试看看哪个适合自己。
set COMMANDLINE_ARGS=--lowvram --precision full --no-half --skip-torch-cuda-test
set COMMANDLINE_ARGS=--lowvram --precision full --no-half
set COMMANDLINE_ARGS=--lowvram本机显存 4G,使用最后一个配置方法,可以烧出 2048*1080 的图,前两种方法反而会在最后爆卡。
最后,预祝各位成功~~

dog drink~~ where is dog?

参考:
【AI 繪畫】Stable-Diffusion 通過骨架分析插件 ControlNet 來製作超有意境的圖片
Stable Diffusion 2.1 + WebUI 的安装与使用(极详细)
低配显卡想玩 Stable Diffusion?修改一个配置就行
整合包
不知道从哪个版本的 Chrome 或 Edge 开始,我们无法通过 ctrl+v 快捷键将时间格式的字符串粘贴到 type 为 date 的 input 框中,我们想办法用 JS 来实现。
方式一、监听 paste 事件:
const input = document.querySelector('input[type="date"]');
input.addEventListener('paste', (event) => {
input.value = event.clipboardData.getData('text');
});这段代码实现了从页面获取这个 input 元素,监听它的 paste 事件,然后将粘贴板的文本内容赋值给 input。
经测试,当焦点在“年”的位置时可以粘贴成功,但焦点在“月”或“日”上不会触发 paste 事件。
方式二、监听 keydown 事件:
const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
event.preventDefault();
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
input.value = clipboardData.getData('text');
}
});测试发现报错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'getData')
Uncaught TypeError: Cannot read properties of undefined (reading 'clipboardData')
看来 event 中没有 clipboardData 对象,改为从 window.navigator 获取:
const input = document.querySelector('input[type="date"]');
input.addEventListener('keydown', (event) => {
if ((navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey) && event.key === 'v') {
event.preventDefault();
window.navigator.clipboard.readText().then(text => {
input.value = text;
});
}
});缺点是需要用户授权:

仅第一次需要授权,如果用户拒绝,那么以后就默认拒绝了。
以上两种方式各有优缺点,选择一种适合你的方案就行。接下来继续完善。
兼容更多时间格式,并调整时区
<input type="date" /> 默认的日期格式是 yyyy-MM-dd,如果要兼容 yyyy-M-d 等格式,那么:
const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
input.value = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}以 text 为“2023-4-20”举例,先转为 Date,如果成功,再转为英国时间格式“20-04-2023”,以“/”分隔,逆序,再以“-”连接,就变成了“2023-04-20”。
当然如果希望支持中文的年月日,可以先用正则表达式替换一下:
text = text.replace(/\s*(\d{4})\s*年\s*(\d{1,2})\s*月\s*(\d{1,2})\s*日\s*/, "$1-$2-$3");处理页面上的所有 <input type="date" />
const inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach((input) => {
input.addEventListener(...);
});封装为独立域
避免全局变量污染,使用 IIFE 函数表达式:
(function() {
// 将代码放在这里
})();或者封装为函数,在 jQuery 的 ready 中,或 Vue 的 mounted 中调用。
在 Vue 中使用
如果将粘贴板的值直接赋值到 input.value,在 Vue 中是不能同步更新 v-model 绑定的变量的,所以需要直接赋值给变量:
<div id="app">
<input type="date" v-model="a" data-model="a" v-on:paste="fn_pasteToDateInput" />
{{a}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
a: null,
}
},
methods: {
fn_pasteToDateInput: function (event) {
const text = event.clipboardData.getData('text');
const parsedDate = new Date(text);
if (!isNaN(parsedDate.getTime())) {
const att = event.target.getAttribute('data-model');
this[att] = parsedDate.toLocaleDateString('en-GB', { year: 'numeric', month: '2-digit', day: '2-digit' }).split('/').reverse().join('-');
}
},
}
});
const vm = app.mount('#app');
</script>示例中 <input /> 添加了 data- 属性,值同 v-model,并使用 getAttribute() 获取,利用 this 对象的属性名赋值。
如果你的 a 中还有嵌套对象 b,那么 data- 属性填写 a.b,方法中以“.”分割逐级查找对象并赋值
let atts = att.split('.');
let target = this;
for (let i = 0; i < atts.length - 1; i++) {
target = target[atts[i]];
}
this.$set(target, atts[atts.length - 1], text); // vue2
target[atts[atts.length - 1]] = text; // vue3