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

Vue 封装组件之Input框

封装Input组件:MyInput.vue

<template><div class="base-input-wraper"><el-inputv-bind="$attrs"v-on="$listeners"class="e-input":style="inputStyle":value="value":size="size"@input="$emit('input', $event)"></el-input></div>
</template><script>
const sizeList = {medium: "36px",small: "32px",mini: "28px",
}
export default {name: "Input",props: {value: String,width: {type: Number,default: 240,},size: {type: String,default: "medium",},},computed: {inputStyle() {return {width: `${this.width}px`,}},wraperStyle() {return {height: sizeList[this.size],}},},
}
</script>
<style lang="scss" scoped>
.base-input-wraper {.e-input {input {border: none;outline: none;background: transparent;&:hover {border: none;outline: none;background: transparent;}}}
}
</style>

组件使用

  <Myinput v-model="form.name" placeholder="请输入内容":disabled="false" size="small" maxlength="5"></Myinput>

相关文章:

Vue 封装组件之Input框

封装Input组件:MyInput.vue <template><div class"base-input-wraper"><el-inputv-bind"$attrs"v-on"$listeners"class"e-input":style"inputStyle":value"value":size"size"input&quo…...

一段代码让你了解Java中的抽象

我们先来看一道题&#xff01; 计算几何对象的面积之和&#xff09;编写一个方法&#xff0c;该方法用于计算数组中所有几何对象的面积之和。该方法的签名是&#xff1a; public static double sumArea(GeometricObject[] a) 编写一个测试程序&#xff0c;该程序创建一个包含四…...

Sping源码(九)—— Bean的初始化(非懒加载)— Bean的创建方式(factoryMethod)

序言 前面文章介绍了在Spring中多种创建Bean实例的方式&#xff0c;包括采用FactoryBean的方式创建对象、使用反射创建对象、自定义BeanFactoryPostProcessor。 这篇文章继续介绍Spring中创建Bean的形式之一——factoryMethod。方法用的不多&#xff0c;感兴趣可以当扩展了解。…...

绝对全网首发,利用Disruptor EventHandler实现在多线程下顺序执行任务

disruptor有两种任务处理器&#xff0c;一个是EventHandler ,另一个是WorkHandler. EventHandler可以彼此独立消费同一个队列中的任务&#xff0c;WorkHandler可以共同竞争消费同一个队列中的任务。也就是说&#xff0c;假设任务队列中有a、b、c、d三个事件&#xff0c;eventHa…...

单例设计模式双重检查的作用

先看双重校验锁的写法 public class Singleton {/*volatile 修饰&#xff0c;singleton new Singleton() 可以拆解为3步&#xff1a;1、分配对象内存(给singleton分配内存)2、调用构造器方法&#xff0c;执行初始化&#xff08;调用 Singleton 的构造函数来初始化成员变量&am…...

NGINX_十二 nginx 地址重写 rewrite

十二 nginx 地址重写 rewrite 1 什么是Rewrite Rewrite对称URL Rewrite&#xff0c;即URL重写&#xff0c;就是把传入Web的请求重定向到其他URL的过程。URL Rewrite最常见的应用是URL伪静态化&#xff0c;是将动态页面显示为静态页面方式的一种技术。比如 http://www.123.com…...

react用ECharts实现组织架构图

找到ECharts中路径图。 然后开始爆改。 <div id{org- name} style{{ width: 100%, height: 650, display: flex, justifyContent: center }}></div> // data的数据格式 interface ChartData {name: string;value: number;children: ChartData[]; } const treeDep…...

坚持刷题|合并有序链表

文章目录 题目思考代码实现迭代递归 扩展实现k个有序链表合并方法一方法二 PriorityQueue基本操作Java示例注意事项 Hello&#xff0c;大家好&#xff0c;我是阿月。坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;消失了一段时间&#xff0c;我又回来刷题啦&#xff0c;今天…...

SPI协议——对外部SPI Flash操作

目录 1. W25Q32JVSSIQ背景知识 1.1 64个可擦除块 1.2 1024个扇区&#xff08;每个块有16个扇区&#xff09; 1.3 页 1. W25Q32JVSSIQ背景知识 W25Q32JV阵列被组织成16,384个可编程页&#xff0c;每页有256字节。一次最多可以编程256个字节。页面可分为16组(4KB扇区清除&…...

kotlin类型检测与类型转换

一、is与!is操作符 1、使用 is 操作符或其否定形式 !is 在运行时检测对象是否符合给定类型。 fun main() {var a "1"if(a is String) {println("a是字符串类型:${a.length}")}// 或val b a is Stringprintln(b) } 二、"不安全的"转换操作符…...

【JDBC】Oracle数据库连接问题记录

Failed to load driver class oracle.jdbc.driver.OracleDriver in either of HikariConfig class oracle驱动包未正确加载&#xff0c;可以先尝试使用下面方式加载检查类是否存在&#xff0c;如果不存在需要手动下载odbc包 try {Class.forName("oracle.jdbc.driver.Ora…...

leetcode45 跳跃游戏II

题目 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - 1]…...

【数学】什么是方法矩估计?和最大似然估计是什么关系?

背景 方法矩估计&#xff08;Method of Moments Estimation&#xff09;和最大似然估计&#xff08;Maximum Likelihood Estimation, MLE&#xff09;是两种常用的参数估计方法。方法矩估计基于样本矩与总体矩的关系&#xff0c;通过样本数据计算样本矩来估计总体参数。最大似…...

C++初学者指南第一步---10.内存(基础)

C初学者指南第一步—10.内存&#xff08;基础&#xff09; 文章目录 C初学者指南第一步---10.内存&#xff08;基础&#xff09;1.内存模型1.1 纸上谈兵&#xff1a;C的抽象内存模型1.2 实践&#xff1a;内存的实际处理 2. 自动存储3.动态存储&#xff1a;std::vector3.1 动态内…...

扩散模型详细推导过程——编码与解码

符号表 符号含义 x ( i ) z 0 ( i ) \boldsymbol{x}^{(i)}\boldsymbol{z}_0^{(i)} x(i)z0(i)​第 i i i个训练数据&#xff0c;其为长度为 d d d的向量 z t ( i ) \boldsymbol{z}_t^{(i)} zt(i)​第 i i i个训练数据在第 t t t时刻的加噪版本 ϵ t ( i ) \boldsymbol{\epsilo…...

js如何实现开屏弹窗

开屏弹窗是什么&#xff0c;其实就是第一次登录后进入页面给你的一种公告提示&#xff0c;此后再回到当前这个页面时弹窗是不会再出现的。也就是说这个弹窗只会出现一次。 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>…...

C#——文件读取Directory类详情

文件读取Directory类 Durectory提供了目录以及子目录进行创建移动和列举操作方法 Directory和Directorylnfo类(主要操作文件目录属性列如文件是否隐藏的 或者只读等这些属性) Directory对目录进行复制、移动、重命名、创建和删除等操作DirectoryInfo用于对目录属性执行操作 …...

Ruby on Rails Post项目设置网站初始界面

在构建了Ruby的Web服务器后&#xff0c;第三步就可以去掉框架的官方页面&#xff0c;设置自己的网页初始页了。 Linux系统安装Ruby语言-CSDN博客 、在Ubuntu中创建Ruby on Rails项目并搭建数据库-CSDN博客、 Ruby语言建立Web服务器-CSDN博客 了解Ruby onRails项目中的主要文件…...

03-QTWebEngine中使用qtvirtualkeyboard

qt提供了 virtualKeyboard 虚拟键盘模块&#xff0c;只需要在在main函数中最开始加入这样一句就可以了 qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard")); 但是在使用的时候遇到了一些问题&#xff1a; 1、中文输入的时候没有输入提示 Qvirt…...

leetcode3无重复字符的最长字串(重点讲滑动窗口)

本文主要讲解无重复字符的最长字串的要点与细节&#xff0c;根据步骤一步步走更方便理解 c与java代码如下&#xff0c;末尾 具体要点&#xff1a; 1. 区分一下子串和子序列 子串&#xff1a;要求元素在母串中是连续地出现 子序列&#xff1a;不要求连续 2. 题目中有两个核心…...

Path of Building完全指南:3步掌握流放之路最强Build规划与天赋计算神器

Path of Building完全指南&#xff1a;3步掌握流放之路最强Build规划与天赋计算神器 【免费下载链接】PathOfBuilding Offline build planner for Path of Exile. 项目地址: https://gitcode.com/GitHub_Trending/pa/PathOfBuilding Path of Building是《流放之路》玩家…...

FireRedASR-AED-L在软件测试中的应用:语音交互功能自动化测试

FireRedASR-AED-L在软件测试中的应用&#xff1a;语音交互功能自动化测试 你有没有想过&#xff0c;那些能听懂你说话的手机应用、智能音箱或者车载系统&#xff0c;它们的“听力”到底准不准&#xff1f;开发团队是怎么确保你每次说“播放音乐”或者“导航回家”&#xff0c;…...

FastAPI 2.0流式响应源码深度拆解,从Starlette 1.12到Pydantic v2.6兼容层的5处隐式await丢失点(生产环境已验证)

第一章&#xff1a;FastAPI 2.0流式响应架构演进与问题定位全景FastAPI 2.0 对流式响应&#xff08;StreamingResponse&#xff09;进行了底层重构&#xff0c;核心变化在于将 ASGI 生命周期与异步生成器的生命周期解耦&#xff0c;并引入更严格的流控契约。此前版本中常见的内…...

PasteMD真实案例分享:从零散笔记到结构化学习计划的全过程

PasteMD真实案例分享&#xff1a;从零散笔记到结构化学习计划的全过程 1. 引言&#xff1a;当杂乱笔记遇上智能格式化 你是否经历过这样的困境&#xff1f;电脑桌面上散落着十几个临时创建的记事本文件&#xff0c;手机备忘录里堆满了未经整理的零散想法&#xff0c;会议录音…...

Qwen3-14B入门到精通:从环境搭建到多轮工具调用防死循环实战

Qwen3-14B入门到精通&#xff1a;从环境搭建到多轮工具调用防死循环实战 1. 为什么选择Qwen3-14B 在当今企业AI应用场景中&#xff0c;我们常常面临一个两难选择&#xff1a;要么使用功能有限的小模型&#xff0c;要么部署资源消耗巨大的千亿参数模型。Qwen3-14B恰好提供了一…...

Windows系统卡顿?一招禁用Microsoft Compatibility Telemetry释放CPU资源(附详细截图)

Windows系统卡顿终极解决方案&#xff1a;彻底禁用Microsoft Compatibility Telemetry 最近帮朋友处理一台老笔记本时&#xff0c;遇到了典型的Windows系统卡顿问题——风扇狂转、程序响应迟缓&#xff0c;任务管理器里一个叫"Microsoft Compatibility Telemetry"的进…...

避开这些坑!Sigma-Delta调制器设计中最容易忽略的5个稳定性问题(附MASH级联实测数据)

避开这些坑&#xff01;Sigma-Delta调制器设计中最容易忽略的5个稳定性问题&#xff08;附MASH级联实测数据&#xff09; 在高速高精度ADC设计中&#xff0c;Sigma-Delta调制器因其优异的噪声整形特性成为首选方案。但当工程师们沉浸在理论计算的理想世界时&#xff0c;实验室示…...

深入FFmpeg解码器:从avcodec_send_packet看硬解与软解的实现差异

深入FFmpeg解码器&#xff1a;从avcodec_send_packet看硬解与软解的实现差异 在多媒体处理领域&#xff0c;FFmpeg无疑是开发者最常接触的开源框架之一。其强大的编解码能力支撑着从视频播放器到直播系统的各类应用&#xff0c;而解码器作为其中的核心组件&#xff0c;其性能直…...

OpenClaw自动化邮件处理:GLM-4.7-Flash模型分类与回复

OpenClaw自动化邮件处理&#xff1a;GLM-4.7-Flash模型分类与回复 1. 为什么需要自动化邮件处理 每天早晨打开邮箱时&#xff0c;我的收件箱总是堆满了各种邮件——工作汇报、会议邀请、订阅资讯、促销广告……手动分类和回复这些邮件至少会消耗我30分钟时间。直到上个月&…...

RWKV7-1.5B-g1a部署案例:从零搭建轻量中文对话服务,60秒完成API调用

RWKV7-1.5B-g1a部署案例&#xff1a;从零搭建轻量中文对话服务&#xff0c;60秒完成API调用 1. 模型简介 rwkv7-1.5B-g1a是基于新一代RWKV-7架构开发的多语言文本生成模型&#xff0c;特别适合中文场景下的轻量级对话应用。这个1.5B参数的版本在保持较高生成质量的同时&#…...