安装依赖
sudo yum install -y epel-release sudo yum install -y lua lua-devel gcc make下载安装 LuaRocks
访问 LuaRocks 的官方网站 获取最新版本的 LuaRocks。你可以使用 wget 命令下载：
wget https://luarocks.org/releases/luarocks-x.x.x.tar.gz tar zxpf luarocks-x.x.x.tar.gz cd luarocks-x.x.x ./configure && make && sudo make install设置环境变量（可选）
通常，LuaRocks 会自动处理这一步，但如果需要手动设置，可以编辑 ~/.bash_profile 或 ~/.bashrc 文件，添加以下行：
export PATH=$PATH:/usr/local/bin然后运行以下命令使更改生效：
source ~/.bash_profile验证安装
luarocks --version
今天早上同事反映论坛某管理账号无法登录，于是我尝试用创始人账号登录，也不行，第一反应就是中招了。
于是进阿里云控制台，发现云安全中心有许多安全警告，类型是网站后门，幸好 nginx 中设置了仅部分文件可执行 PHP，这些后门文件无法被执行。
尝试在 config_global_default.php 文件中添加创始人，但账号必须是副站长等管理账号才能成为创始人。
于是借用一个小号，从表 pre_ucenter_members 中将这个小号的 password 和 salt 复制到创始人账号中，这样创始人账号就可以用这个小号的密码登录了。
进入论坛后台，在 工具-运行记录-系统记录-后台访问 中查看入侵时间段的记录（操作、时间、IP 等），可搜索。
发现基本上在操作模板管理和专题管理。
对比时间，发现进入后台操作在先，上传后门在后。
查询 web 访问日志，通过访问文件路径或 IP 查询，在进入论坛后台之间，他进入了 UCenter 的后台，但是再往前就没有记录了。
因此基本可以确定：
黑客从 UCenter 修改了某管理员账号的密码（可能是利用漏洞），然后登录论坛后台修改了创始人的密码（可能也是用 UCenter 改的），通过模板管理和专题管理功能的上传功能上传了后门文件。
索性他没有对数据进行破坏性处理，也没有挂马，只是发现后门文件无法执行就放弃了。
例子：IPAddress.Parse("27.184.49.031")
Parse 方法认为 031 是八进制数，所以最终的结果是 27.184.49.25。
例子：IPAddress.Parse("27.184.49.081")
同理，“0”开头的数会按八进制数处理，那么这个转换将抛出异常：提供了一个无效的参数。An invalid IP address was specified.
[DS218+] DS218plus 上每秒接收的日志数超出 10 的容差值
DS218plus 每秒接收 55 个日志，这超出了每秒 10 个日志的容差值。请前往日志中心查看详细信息。
来自 DS218plus
打开群晖日志中心，左侧切换到“日志”选项卡，列表上方有“常规”、“连接”、“文件传输”、“硬盘”四个日志分类。
我的情况是“文件传输”中有大量日志，是因为我的小米摄像头设置的是把录制的视频保存到NAS中，而且是始终录制，而不是录制移动画面。这样就会产生多个视频文件，当自动清理一年前的视频时会出现同一秒处理了超过指定数量的文件，群晖就会发送这个通知。
解决的方法很简单：
方法一：米家 - 摄像头 - ...（右上角的设置） - 存储设置 - 存储卡状态 - 录制模式 改为录制移动画面。
方法二：群晖 - 日志中心 - 通知 - 修改“每秒日志数超出”。
SignalR 是一个开源的实时通信库，用于构建实时 Web 应用程序。它提供了一个简单的 API，可以在客户端和服务器之间建立持久连接，以便实时地推送数据。
与传统的 WebSocket 相比，SignalR 提供了更高级的功能和更简单的开发体验。下面是一些主要区别：
支持多种传输方式：SignalR 可以使用多种传输方式，包括 WebSocket、Server-Sent Events（SSE）、长轮询和 Forever Frame。这使得 SignalR 在不同的环境中都能提供实时通信的能力，即使某些浏览器不支持 WebSocket，也可以使用其他传输方式。
自动处理连接管理：SignalR 管理连接的生命周期，包括连接的建立、断开和重新连接。它会自动处理连接的失败和重新连接的逻辑，简化了开发人员的工作。
服务器端推送：SignalR 允许服务器端主动推送消息给客户端，而不需要客户端发起请求。这使得实时通信变得更加高效和实时，适用于聊天应用、实时监控等场景。
跨平台支持：SignalR 可以在多个平台上使用，包括 .NET、Java、JavaScript 等。这使得开发人员可以使用自己熟悉的语言和框架来构建实时应用程序。
微软官方提供了针对 ASP.NET Core Web 应用（Razor 页面）的详细教程，这里给出 MVC 版本入门教程。
最终将创建一个正常运行的聊天应用：
创建 Web 应用项目
添加 SignalR 客户端库
在“解决方案资源管理器”>中，右键单击项目，然后选择“添加”“客户端库”。
在“添加客户端库”对话框中：
“提供程序”选择“unpkg”
“库”，请输入 @microsoft/signalr@latest。
选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.min.js。
点击“安装” 。
创建 SignalR Hubs 类
using Microsoft.AspNetCore.SignalR;
/// <summary>
/// Hub 类管理连接、组和消息
/// </summary>
public class ChatHub : Hub
{
/// <summary>
/// 可通过已连接客户端调用 SendMessage，以向所有客户端发送消息
/// </summary>
public async Task SendMessage(string user, string message)
{
// Clients.All 向所有的客户端发送消息
// ReceiveMessage 是客户端监听的方法
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}其父类 Hub 可管理连接、组和消息。这里演示的是向所有客户端发送消息。
配置 SignalR
打开 Program.cs，添加注入：
builder.Services.AddSignalR();添加路由：
app.MapHub<ChatHub>("/chatHub");添加 SignalR 客户端代码
视图页面：
<div class="container">
<div class="row p-1">
<div class="col-1">用户</div>
<div class="col-5"><input type="text" id="userInput" /></div>
</div>
<div class="row p-1">
<div class="col-1">消息</div>
<div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
</div>
<div class="row p-1">
<div class="col-6 text-end">
<input type="button" id="sendButton" value="发送消息" />
</div>
</div>
<div class="row p-1">
<div class="col-6">
<hr />
</div>
</div>
<div class="row p-1">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/chat.js"></script>chat.js 文件：
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
// 在连接建立之前禁用发送按钮
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var li = document.createElement("li");
document.getElementById("messagesList").appendChild(li);
// 修改此处时应注意脚本注入问题
li.textContent = `${user} says ${message}`;
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});完成。在线示例：https://xoyozo.net/Demo/SignalRDemo
推荐使用 SignalR 来平替 WebSocket，参考教程。
【服务端（.NET）】
一、创建 WebSocketHandler 类，用于处理客户端发送过来的消息，并分发到其它客户端
public class WebSocketHandler
{
private static List<WebSocket> connectedClients = [];
public static async Task Handle(WebSocket webSocket)
{
connectedClients.Add(webSocket);
byte[] buffer = new byte[1024];
WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
while (!result.CloseStatus.HasValue)
{
string message = Encoding.UTF8.GetString(buffer, 0, result.Count);
Console.WriteLine($"Received message: {message}");
// 处理接收到的消息，例如广播给其他客户端
await BroadcastMessage(message, webSocket);
result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
}
connectedClients.Remove(webSocket);
await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
}
private static async Task BroadcastMessage(string message, WebSocket sender)
{
foreach (var client in connectedClients)
{
if (client != sender && client.State == WebSocketState.Open)
{
await client.SendAsync(Encoding.UTF8.GetBytes(message), WebSocketMessageType.Text, true, CancellationToken.None);
}
}
}
}二、在 Program.cs 或 Startup.cs 中插入：
// 添加 WebSocket 路由
app.UseWebSockets();
app.Use(async (context, next) =>
{
if (context.Request.Path == "/chat")
{
if (context.WebSockets.IsWebSocketRequest)
{
WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
await WebSocketHandler.Handle(webSocket);
}
else
{
context.Response.StatusCode = 400;
}
}
else
{
await next();
}
});这里的路由路径可以更改，此处将会创建一个 WebSocket 连接，并将其传递给 WebSocketHandler.Handle 方法进行处理。
也可以用控制器来接收 WebSocket 消息。
【客户端（JS）】
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>WebSocket 示例（JS + ASP.NET）</title>
<style>
#list { width: 100%; max-width: 500px; }
.tip { color: red; }
</style>
</head>
<body>
<h2>WebSocket 示例（JS + ASP.NET）</h2>
<textarea id="list" readonly rows="20"></textarea>
<div>
<input type="text" id="msg" />
<button onclick="fn_send()">发送</button>
<button onclick="fn_disconnect()">断开</button>
</div>
<p id="tip_required">请输入要发送的内容</p>
<p id="tip_closed">WebSocket 连接未建立</p>
<script>
var wsUrl = "wss://" + window.location.hostname + ":" + window.location.port + "/chat";
var webSocket;
var domList = document.getElementById('list');
// 初始化 WebSocket 并连接
function fn_ConnectWebSocket() {
webSocket = new WebSocket(wsUrl);
// 向服务端发送连接请求
webSocket.onopen = function (event) {
var content = domList.value;
content += "[ WebSocket 连接已建立 ]" + '\r\n';
domList.innerHTML = content;
document.getElementById('tip_closed').style.display = 'none';
webSocket.send(JSON.stringify({
msg: 'Hello'
}));
};
// 接收服务端发送的消息
webSocket.onmessage = function (event) {
if (event.data) {
var content = domList.value;
content += event.data + '\r\n';
domList.innerHTML = content;
domList.scrollTop = domList.scrollHeight;
}
};
// 各种情况导致的连接关闭或失败
webSocket.onclose = function (event) {
var content = domList.value;
content += "[ WebSocket 连接已关闭，3 秒后自动重连 ]" + '\r\n';
domList.innerHTML = content;
document.getElementById('tip_closed').style.display = 'block';
setTimeout(function () {
var content = domList.value;
content += "[ 正在重连... ]" + '\r\n';
domList.innerHTML = content;
fn_ConnectWebSocket();
}, 3000); // 3 秒后重连
};
}
// 检查连接状态
function fn_IsWebSocketConnected() {
if (webSocket.readyState === WebSocket.OPEN) {
document.getElementById('tip_closed').style.display = 'none';
return true;
} else {
document.getElementById('tip_closed').style.display = 'block';
return false;
}
}
// 发送内容
function fn_send() {
if (fn_IsWebSocketConnected()) {
var message = document.getElementById('msg').value;
document.getElementById('tip_required').style.display = message ? 'none' : 'block';
if (message) {
webSocket.send(JSON.stringify({
msg: message
}));
}
}
}
// 断开连接
function fn_disconnect() {
if (fn_IsWebSocketConnected()) {
// 部分浏览器调用 close() 方法关闭 WebSocket 时不支持传参
// webSocket.close(001, "Reason");
webSocket.close();
}
}
// 执行连接
fn_ConnectWebSocket();
</script>
</body>
</html>
【在线示例】
https://xoyozo.net/Demo/JsNetWebSocket
【其它】
-
服务端以 IIS 作为 Web 服务器，那么需要安装 WebSocket 协议
-
一个连接对应一个客户端（即 JS 中的 WebSocket 对象），注意与会话 Session 的区别
-
在实际项目中使用应考虑兼容性问题
-
程序设计应避免 XSS、CSRF 等安全隐患
-
参考文档：https://learn.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets
本文由 ChatGTP 3.5 提供
在 .NET C# 桌面应用程序中，你可以使用委托和事件来实现在窗体页面处理事务过程中实时更新界面。下面是一个示例，展示了在不同情况下如何更新主界面：
首先，在窗体页面中定义一个委托和一个事件，用于更新界面：
public delegate void UpdateUIHandler(string msg);
public event UpdateUIHandler UpdateUIEvent;然后，在窗体的构造函数中订阅事件，并在事件处理程序中更新界面：
public Form1()
{
InitializeComponent();
UpdateUIEvent += UpdateUI;
}
private void UpdateUI(string msg)
{
if (InvokeRequired)
{
Invoke(new UpdateUIHandler(UpdateUI), msg);
}
else
{
// 在这里更新界面
label1.Text = msg;
}
}现在，你可以在窗体页面的任何地方调用 UpdateUIEvent 来触发更新界面的事件。例如，在按钮点击事件中：
private void button1_Click(object sender, EventArgs e)
{
// 处理事务过程中实时更新界面
string msg = "处理事务中...";
UpdateUIEvent?.Invoke(msg);
// 异步调用一个类方法中的方法，并在方法内部实时更新主界面
Task.Run(() =>
{
MyClass myClass = new MyClass();
myClass.LongRunningMethod(UpdateUIEvent);
});
}在上面的示例中，MyClass 是一个自定义的类，其中的 LongRunningMethod 是一个耗时的方法。在这个方法内部，你可以通过传递 UpdateUIEvent 来实时更新主界面：
public class MyClass
{
public void LongRunningMethod(UpdateUIHandler updateUI)
{
// 处理事务过程中实时更新界面
string msg = "处理事务中...";
updateUI?.Invoke(msg);
// 其他耗时操作...
}
}通过以上示例，你可以在窗体页面处理事务过程中实时更新界面，并且在异步调用的方法内部也能实时更新主界面。记得在更新界面时使用 Invoke 方法，以确保在主线程上更新界面，避免跨线程访问 UI 的问题。
解析域名（非网站域名）、挂载磁盘（若有另购）、修改实例名称、主机名
设置阿里云（重要）
远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 3389 端口，可先在安全组临时放行 3389 端口）
开启 Windows 防火墙（使用推荐设置）
Windows 更新、并在高级选项中开启（更新 Windows 时接收其它 Microsoft 产品的更新）
安装 IIS：服务器管理器-添加角色和功能-勾选“Web 服务器(IIS)”包括管理工具
建议勾选：
默认已勾选项
按需安装 IP 和域限制
跟踪（即“失败请求跟踪”）
请求监视器、日志记录工具、
按需安装 ASP
按需安装 ASP.NET 4.8（会同时勾选 .NET Extensibility 4.8、ISAPI 扩展、ISAPI 筛选器）
按需安装 WebSocket 协议
应用程序初始化（建议安装）
管理服务（用于 Web 部署）
细节：设置任务栏；设置桌面图标；个性化-颜色-勾选“标题栏和窗口边框”；设置输入法；
下载 URL 重写（文件名：rewrite_amd64_zh-CN.msi）
下载 MySQL Connector/NET（文件名：mysql-connector-net-8.0.19.msi）
下载 ASP.NET Core 运行时 Hosting Bundle（文件名：dotnet-hosting-*.*.*-win.exe）
下载 .NET 桌面运行时 Windows x64（文件名：windowsdesktop-runtime-*.*.*-win-x64.exe）
下载 Web Deploy（文件名：WebDeploy_amd64_zh-CN.msi）
服务：设置“ASP.NET State Service”自动启动
IIS 日志：路径（如 D:\wwwlogs），每小时（统一设置一个全局的就行了，不需要设置每个网站），按需勾选“使用本地时间进行文件命名和滚动更新”
IIS 导入证书：个人、允许导出证书。参
设置默认网站的 https、设置默认网站跳转到指定网站。
设置权限：设置网站所在分区（如 D 盘），安全，添加 IIS_IUSRS，全部拒绝（防止跨站）
添加用户：为每个网站创建用户（既能防止跨站，又能跟踪进程），密码不能改、不过期，仅隶属于 IIS_IUSRS，并添加到每个网站的根目录，若用户创建失败看这里。
创建网站：设置访问物理路径的用户；设置应用程序池的“标识”用户；编辑绑定：勾选需要服务器名称指示；检查域名是否绑全；设置写入目录的用户权限；设置写入目录的“处理程序映射”取消“脚本”。
重复上面两步
检查所有网站用户是否仅隶属于 IIS_IUSRS（在“组”页面双击 Users 和 IIS_IUSRS 查看成员）
在应用程序池列表页面检查 CLR 版本、管托管道模式和标识；在网站列表页面检查绑定和路径
设置“IP 地址和域限制”
废弃旧服时再次检查：IIS 中各功能设置、hosts、安装的应用程序、启动项、任务计划程序、服务、防火墙等
接入 WAF
解析各网站域名
其它：资源管理器-选项-查看-去掉“始终显示图标，从不显示缩略图”前的勾
再次检查阿里云设置
在备份工具中添加该服务器的所有备份项
其它：到期日期提醒、
>> 关于域名解析
因各地域名解析生效时间不可控，一般国内域名 1 天内，国际域名 2 天内。
若网站数据库在 RDS、上传文件在 OSS，则解析 48 小时后直接停止原网站即可；（比较理想的）
文件上传到 ECS 的可使用 FTP 等工具定时同步文件，或直接停止原网站。（网友会遇到新文章中图片无法显示等问题）
还有一种方法是新网站提前解析一个备用域名，确保完全生效后再修改正式域名的解析，原网站无条件跳转到备用域名，如果数据库中有保存完整网址路径的，关闭原网站并解绑备用域名之后，进行批量替换。（缺点是可能会影响在搜索引擎的网站权重）
部分有定时器的网站要注意，如果两个网站的定时器都正常开启会导致意外的，需要停止其中一个网站的定时器。
当然每种方法都有优缺点，选择可以接受且方便的一种即可。
更多文章：
语言集成查询（LINQ）为 C# 和 VB 提供语言级查询功能和高阶函数 API，让你能够编写具有很高表达力度的声明性代码。
LINQ 有两种写法：查询语法和方法语法，查询语法又称查询表达式语法。
查询语法：
from 变量名 in 集合 where 条件 select 结果变量方法语法：
集合.Where(变量名 => 条件)LINQ 的标准查询运算符及语法示例
| 类型 | 操作符 | 功能 | 方法语法 | 查询语法 |
| 投影操作符 | Select | 用于从集合中选择指定的属性或转换元素 | | |
| SelectMany | 用于在嵌套集合中选择并平铺元素 | | | |
| 限制操作符 | Where | 根据指定的条件筛选集合中的元素 | | |
| 排序操作符 | OrderBy、OrderByDescending、ThenBy、ThenByDescending | 用于对集合中的元素进行排序 | | |
| Reverse | 将集合中的元素顺序反转 | | ||
| 联接操作符 | Join GroupJoin | 用于在两个集合之间执行内连接（Join）操作，或者对一个集合进行分组连接（GroupJoin）操作 | 内联接左连接 | 内联接左连接 |
| 分组操作符 | GroupBy | 根据指定的键对集合中的元素进行分组 | ||
| 串联操作符 | Concat | 将两个集合连接成一个新集合 | ||
| 聚合操作符 | Aggregate、Average、Count、LongCount、Max、Min、Sum | Aggregate 可以用于在集合上执行自定义的累积函数，其他方法用于计算集合中的元素的平均值、总数、最大值、最小值和总和 | ||
| 集合操作符 | Distinct、Union、Intersect、Except | 用于执行集合间的不同操作，Distinct 移除重复元素，Union 计算两个集合的并集，Intersect 计算两个集合的交集，Except 计算一个集合相对于另一个集合的差集 | ||
| 生成操作符 | Empty、Range、Repeat | Empty 创建一个空集合，Range 创建一个包含一系列连续数字的集合，Repeat 创建一个重复多次相同元素的集合 | ||
| 转换操作符 | AsEnumerable、Cast、OfType、ToArray、ToDictionary、ToList、ToLookup | 这些方法用于将集合转换为不同类型的集合或字典 | ||
| 元素操作符 | DefaultIfEmpty、ElementAt、ElementAtOrDefault、First、Last、FirstOrDefault、LastOrDefault、Single、SingleOrDefault | 这些方法用于获取集合中的元素，处理可能的空集合或超出索引的情况 | ||
| 相等操作符 | SequenceEqual | 用于比较两个集合是否包含相同的元素，顺序也需要相同 | ||
| 量词操作符 | All、Any、Contains | 用于检查集合中的元素是否满足特定条件，All 检查是否所有元素都满足条件，Any 检查是否有任何元素满足条件，Contains 检查集合是否包含特定元素 | ||
| 分割操作符 | Skip、SkipWhile、Take、TakeWhile | 用于从集合中跳过一些元素或只取一部分元素，可以结合特定条件进行操作 |
了解立即执行与延迟执行可以大大改善性能。
不知道从哪个版本的 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