当前位置: 首页 > news >正文

vue封装基础input组件(添加防抖功能)

先看一下效果:
在这里插入图片描述

// 调用页面
<template><div><!-- v-model:伪双向绑定   --><my-input v-model="inputVal" label="姓名" type="textarea" /></div>
</template><script>
import MyInput from './MyInput.vue'
export default {name: 'index',data () {return {inputVal: '111'}},components: {MyInput},watch: {inputVal (newVal, oldVal) {// console.log('新旧值', { newVal, oldVal })this.getDataByInputVal()}},created () {this.getDataByInputVal = this.debounce(this.getDataByInputVal, 1000)},methods: {debounce (fn, wait = 500) {let timer = nullreturn function () {timer && clearTimeout(timer)timer = setTimeout(() => {console.log('防抖执行了')fn()}, wait)}},getDataByInputVal () {setTimeout(() => {console.log(this.inputVal)}, 1000)}}
}
</script><style scoped></style>
// my-input组件
<template><div class="my-input"><label>{{ label }}</label><inputv-bind="$attrs"@input="$emit('input', $event.target.value)"/></div>
</template><script>
export default {name: 'MyInput',props: {label: {type: String,required: false}}
}
</script><style scoped></style>

相关文章:

vue封装基础input组件(添加防抖功能)

先看一下效果&#xff1a; // 调用页面 <template><div><!-- v-model&#xff1a;伪双向绑定 --><my-input v-model"inputVal" label"姓名" type"textarea" /></div> </template><script> import…...

小程序一次性订阅消息(消息通知):java服务端实现

文章目录 引言一、消息订阅1.1 小程序订阅消息功能介绍1.2 消息分类1.2.1 新版一次性订阅消息Beta1.2.2 一次性订阅消息&#xff08;用户通过弹窗订阅&#xff09;1.2.3 长期订阅消息&#xff08;用户通过弹窗订阅&#xff09;1.2.4 设备订阅消息 二、获取模板ID1.登录[微信公众…...

百度自由DIY小程序源码:PHP+MySQL组合开发 带完整的搭建教程

随着移动互联网的快速发展&#xff0c;小程序已成为企业与用户互动的重要平台。然而&#xff0c;对于许多中小企业和开发者来说&#xff0c;从零开始开发一款小程序需要投入大量的时间和资源。 以下是部分代码示例&#xff1a; 系统特色功能一览&#xff1a; 1.高度自定义&…...

Vue中的选项式 API 和组合式 API,两者有什么区别

Vue中的选项式 API&#xff08;Option API&#xff09;和组合式 API&#xff08;Composition API&#xff09;是两种不同的组件编写方式&#xff0c;它们各有特点和适用场景&#xff1a; 选项式 API&#xff08;Option API&#xff09;: 传统方法&#xff1a;Vue最初的编程范式…...

Linux下误删除后的恢复操作测试之extundelete工具使用

一、工具介绍 extundelete命令的功能可用于系统删除文件的恢复。在使用前&#xff0c;需要先将要恢复的分区卸载&#xff0c;以防数据被意外覆盖。 语法格式&#xff1a;extundelete [参数] 文件或目录名 常用参数&#xff1a; --after 只恢复指定时间后被删除的文件 --bef…...

table表格中使用el-popover 无效问题解决

实例只针对单个的按钮管用在表格里每一列都有el-popover相当于是v-for遍历了 所以我们在触发按钮的时候并不是单个的触发某一个 主要执行 代码 <el-popover placement"left" :ref"popover-${scope.$index}"> 动态绑定了ref 关闭弹窗 执行deltask…...

c++类全面讲解

文章目录 前言类的基本概念基本结构类与结构体的区别示例代码 类的属性和方法属性&#xff08;成员变量&#xff09;方法&#xff08;成员函数&#xff09;访问修饰符示例代码 类的构造函数和析构函数构造函数析构函数示例代码 类的构造函数重载重载构造函数示例代码 类中的拷贝…...

使用Python和Pygame库创建简单的的彩球效果

简介 Pygame是一款强大的游戏开发库&#xff0c;可以用于创建各种有趣的图形效果。为了更好地了解Pygame的功能&#xff0c;今天我们将要做的是在屏幕上随机生成一些彩色的小球&#xff0c;并使它们以不同的速度和方向移动。当小球碰到屏幕边缘时&#xff0c;它们将反弹。 功能…...

第2课 使用FFmpeg读取rtmp流并用openCV显示视频

本课对应源文件下载链接&#xff1a; https://download.csdn.net/download/XiBuQiuChong/88680079 这节课我们开始利用ffmpeg和opencv来实现一个rtmp播放器。播放器的最基本功能其实就两个:显示画面和播放声音。在实现这两个功能前&#xff0c;我们需要先用ffmpeg连接到rtmp服…...

【中小型企业网络实战案例 七】配置限速

相关学习文章&#xff1a; 【中小型企业网络实战案例 一】规划、需求和基本配置 【中小型企业网络实战案例 二】配置网络互连互通【中小型企业网络实战案例 三】配置DHCP动态分配地址 【中小型企业网络实战案例 四】配置OSPF动态路由协议【中小型企业网络实战案例 五】配置可…...

Hive实战:实现数据去重

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、启动Hive Metastore服务2、启动Hive客户端3、基于HDFS数据文件创建Hive外部表4、利用Hive SQL实…...

客户满意度调查常用的ChatGPT通用提示词模板

调查目的与范围&#xff1a;如何明确调查的目的和范围&#xff0c;确保调查的针对性&#xff1f; 调查方法选择&#xff1a;如何选择合适的调查方法&#xff0c;如问卷调查、访谈等&#xff1f; 问卷设计&#xff1a;如何设计问卷&#xff0c;确保问题的针对性和客观性&#…...

Android--Jetpack--Paging详解

不尝世间醋与墨&#xff0c;怎知人间酸与苦。 择一业谋食养命&#xff0c;等一运扭转乾坤。 你见过哪些令你膛目结舌的代码技巧&#xff1f; 文章目录 不尝世间醋与墨&#xff0c;怎知人间酸与苦。择一业谋食养命&#xff0c;等一运扭转乾坤。你见过哪些令你膛目结舌的代码技…...

Unity 基于UDP实现本地时间与网络时间校验 防客户端修改日期作弊

新建一个Unity GameObject 挂上NTPComponent脚本 时间校验 源码 using System.Collections; using System.Collections.Generic; using UnityEngine; using System; using UnityEngine.Networking; using System.Text; using System.Net.Sockets; using System.Net; using Sys…...

ArduPilot开源代码之MatekSys Optical Flow 3901-L0X

ArduPilot开源代码之MatekSys Optical Flow 3901-L0X 1. 源由2. 安装3. 参数配置3.1 配置光流定位3.2 配置激光测距3.3 辅助配置 4. 测试4.1 光流数据测试4.2 测距数据测试4.3 飞行注意事项4.4 实际飞行测试 5. 参考资料 1. 源由 之前介绍过MatekSys Optical Flow 3901-L0X模块…...

【时钟】分布式时钟HLC|Logical Time|Vector Clock|True Time

目录 简略 详细 附录 1 分布式系统不能使用NTP的原因 简略 分布式系统中不同于单机系统不能使用NTP(网络时间协议&#xff08;Network Time Protocol&#xff09;)来获取时间&#xff0c;所以我们需要一个特别的方式来获取分布式系统中的时间&#xff0c;mvcc也是使用time保证读…...

人工智能AI与3D视觉技术的结合正在引领新一代移动机器人的革新

随着科技的飞速发展&#xff0c;人工智能AI与3D视觉技术的结合正在引领新一代移动机器人的革新。富唯智能移动机器人&#xff0c;以其独特的3D视觉技术&#xff0c;赋予了移动机器人一双“智慧之眼”&#xff0c;从而为现代工业自动化带来了前所未有的突破。 富唯智能移动机器…...

NSSCTF 简单包含

开启环境: 使用POST传flag&#xff0c;flag目录/var/www/html/flag.php 先使用post来尝试读取该flag.php 没反应: 查看一下源码index.php&#xff0c;看有什么条件 base64解密: <?php$path $_POST["flag"];if (strlen(file_get_contents(php://input)) <…...

FlinkSQL处理Canal-JSON数据

背景信息 Canal是一个CDC&#xff08;ChangeLog Data Capture&#xff0c;变更日志数据捕获&#xff09;工具&#xff0c;可以实时地将MySQL变更传输到其他系统。Canal为变更日志提供了统一的数据格式&#xff0c;并支持使用JSON或protobuf序列化消息&#xff08;Canal默认使用…...

玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— DevEco Studio下载与安装

一、下载DevEco Studio IDE开发工具 1. 登录鸿蒙官网 网址为&#xff1a; ​​​​​​​华为HarmonyOS智能终端操作系统官网 | 应用设备分布式开发者生态 页面如下&#xff1a; 2. 搜索“DevEco Studio IDE” 点击右上角的“请输入关键词”&#xff0c;在其中搜索“DevEc…...

浏览器兼容性问题汇总

1.IE10版本以上浏览器input标签后面自带一个X问题IE10&#xff0c;IE11浏览器当点击input text文本框时&#xff0c;输入文本后出现一个删除功能的X按钮IE浏览器效果&#xff0c;而谷歌浏览器没有解决方案&#xff1a;给input添加如下CSS样式 input::-ms-clear{display:none;}2…...

Stable Diffusion XL 1.0开源大模型教程:灵感画廊app.py核心逻辑解读

Stable Diffusion XL 1.0开源大模型教程&#xff1a;灵感画廊app.py核心逻辑解读 “见微知著&#xff0c;凝光成影。将梦境的碎片&#xff0c;凝结为永恒的视觉诗篇。” 如果你对AI绘画感兴趣&#xff0c;一定听说过Stable Diffusion XL 1.0这个强大的开源模型。但面对复杂的参…...

团队用ai写代码越来越猛但为什么改个功能像在拆炸弹背后是流程断了

最近不少团队反馈&#xff0c;AI Coding 跑得飞快&#xff0c;两周就能堆出新功能&#xff0c;可一旦要改个按钮颜色&#xff0c;整个系统却像在拆炸弹。这种“改功能崩塌”的怪圈&#xff0c;正让许多管理者头疼&#xff1a;明明用了最先进的工具&#xff0c;交付反而更慢了。…...

借助yakit高效构建渗透字典:从历史流量中智能提取关键参数

1. 为什么需要从历史流量中提取渗透字典&#xff1f; 做过渗透测试的朋友都知道&#xff0c;字典的质量直接影响测试效率。传统方式要么用现成的通用字典&#xff0c;要么手动收集整理&#xff0c;前者命中率低&#xff0c;后者耗时费力。我遇到过最头疼的情况是测试一个Web系统…...

AI 开发实战:需求变更后,如何让 AI 自动补回归范围

AI 开发实战&#xff1a;需求变更后&#xff0c;如何让 AI 自动补回归范围 一、这个问题为什么值得专门拿出来做&#xff1f; 在 AI 工程落地里&#xff0c;真正拖慢团队的往往不是模型本身&#xff0c;而是流程和协作方式没有跟上。 围绕“需求变更后&#xff0c;如何让 AI 自…...

火狐浏览器必备:Z-Library Finder扩展安装与使用全攻略(附最新下载链接)

火狐浏览器高效获取电子书资源&#xff1a;Z-Library Finder扩展深度指南 在数字阅读日益普及的今天&#xff0c;电子书资源获取工具成为许多阅读爱好者的刚需。对于火狐浏览器用户而言&#xff0c;Z-Library Finder扩展无疑是一款能够极大提升电子书搜索效率的神器。这款工具专…...

Vitis新手避坑:自定义IP编译报错?先检查这个Makefile路径!

Vitis新手避坑指南&#xff1a;自定义IP编译报错的核心排查思路 第一次在Vitis中集成自定义IP时遇到编译报错&#xff0c;那种挫败感我至今记忆犹新。明明硬件描述文件&#xff08;XSA&#xff09;已经正确生成&#xff0c;软件工程却莫名其妙地报出"xxx.h: No such file …...

构建全渠道智能通知系统:从高可用架构到用户体验优化

1. 全渠道智能通知系统的核心价值 想象一下这样的场景&#xff1a;你在电商平台下单后&#xff0c;系统立即通过短信发送订单确认通知&#xff1b;当你忘记支付时&#xff0c;APP推送会及时提醒&#xff1b;订单发货后&#xff0c;邮箱里静静躺着物流信息&#xff1b;而站内信则…...

基于RAG的智能客服系统实战:从架构设计到生产环境优化

最近在做一个智能客服系统的升级项目&#xff0c;之前用规则引擎维护起来太痛苦了&#xff0c;纯用大模型又贵又不准。经过一番折腾&#xff0c;最终用RAG&#xff08;检索增强生成&#xff09;技术搞定了&#xff0c;效果提升非常明显。今天就来分享一下从架构设计到上线优化的…...

Llama-3.2V-11B-cot惊艳效果:多对象遮挡场景下的因果关系链推演

Llama-3.2V-11B-cot惊艳效果&#xff1a;多对象遮挡场景下的因果关系链推演 1. 视觉推理新标杆 在计算机视觉领域&#xff0c;多对象遮挡场景下的因果关系推演一直是个技术难题。传统方法往往只能识别可见部分&#xff0c;而无法理解遮挡背后的逻辑关系。Llama-3.2V-11B-cot的…...