当前位置: 首页 > 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. 题目中有两个核心…...

鸿蒙应用开发全景解析与高阶面试指南

第一章 鸿蒙生态技术演进与开发环境鸿蒙操作系统&#xff08;HarmonyOS&#xff09;的分布式架构实现了跨设备算力调度&#xff0c;其核心设计思想可抽象为&#xff1a; $$ \text{Device}i \xrightarrow{\text{IDMS}} \text{Pool}{\text{compute}} \xrightarrow{\text{DistSche…...

SpringCloud Alibaba与Nacos版本不匹配?手把手教你解决‘Client not connected‘错误

SpringCloud Alibaba与Nacos版本兼容性实战&#xff1a;彻底解决Client not connected问题 微服务架构的复杂性往往隐藏在细节之中。当SpringCloud Alibaba项目启动时控制台突然抛出Client not connected, current status:STARTING的红色警告&#xff0c;不少开发者都会心头一紧…...

OpenClaw极简部署:nanobot镜像+手机Termux方案

OpenClaw极简部署&#xff1a;nanobot镜像手机Termux方案 1. 为什么要在手机上部署OpenClaw&#xff1f; 去年夏天&#xff0c;我在咖啡馆等朋友时突发奇想&#xff1a;如果能用手机随时调用AI助手处理文件该多好。当时尝试了几款云端AI工具&#xff0c;但要么功能受限&#…...

Docker 部署 Vaultwarden:轻量级自托管密码管理解决方案

1. 为什么选择Vaultwarden作为自托管密码管理方案 在这个数字时代&#xff0c;我们每个人平均要管理超过100个在线账户的密码。传统的密码管理方式——用同一个简单密码注册所有网站&#xff0c;或者把密码写在记事本上——已经远远不能满足安全需求。这就是为什么像Bitwarden这…...

Qwen2.5-7B-Instruct效果展示:农业病虫害图像描述→防治方案生成

Qwen2.5-7B-Instruct效果展示&#xff1a;农业病虫害图像描述→防治方案生成 想象一下&#xff0c;一位农民在田间地头&#xff0c;用手机拍下一片叶子上的异常斑点。几分钟后&#xff0c;他不仅得到了这是什么病害的准确诊断&#xff0c;还收到了一份详细的、可操作的防治方案…...

【调试心法】别用 printf 谋杀你的系统了!打破“测不准”魔咒,用 C++ 与 DMA 构筑微秒级零开销异步观测者

摘要&#xff1a;在硬实时控制系统中&#xff0c;最可怕的 Bug 往往是薛定谔的 Bug——当你试图用 printf 去观察它时&#xff0c;观察行为本身产生的巨大延迟&#xff0c;就足以改变系统的物理运行轨迹。本文将无情揭露同步串口打印的耗时真相&#xff0c;批判阻塞式调试对高频…...

Swift-All镜像入门:手把手教你快速部署,无需配置轻松上手

Swift-All镜像入门&#xff1a;手把手教你快速部署&#xff0c;无需配置轻松上手 想体验600大模型和300多模态模型的强大能力&#xff0c;却被复杂的安装配置劝退&#xff1f;Swift-All镜像就是为你准备的"开箱即用"解决方案。本文将带你从零开始&#xff0c;一步步…...

Windows下OpenClaw安装指南:对接ollama GLM-4.7-Flash模型

Windows下OpenClaw安装指南&#xff1a;对接ollama GLM-4.7-Flash模型 1. 为什么选择OpenClaw GLM-4.7-Flash组合 作为一个长期在Windows环境下折腾AI工具的开发者&#xff0c;我一直在寻找一个既能保持本地数据隐私&#xff0c;又能灵活对接各类开源模型的自动化框架。Open…...

Windows下FFmpeg环境配置全攻略:从下载到视频剪辑实战

Windows下FFmpeg环境配置全攻略&#xff1a;从下载到视频剪辑实战 在数字内容创作爆发的时代&#xff0c;视频处理能力已成为开发者和创作者的必备技能。FFmpeg作为开源多媒体处理领域的"瑞士军刀"&#xff0c;其强大功能与跨平台特性使其成为处理音视频文件的首选工…...

COMSOL 探索岩石力学多场景:损伤、压裂、试验与模拟

COMSOL岩石损伤、水力压裂、三轴试验 岩石在膨胀剂的膨胀作用下的损伤&#xff1b; 相场法与水力压裂(6个模型)&#xff1b; 不固结不排水三轴试验&#xff1b; 二维钻孔封孔效果模拟。在岩石力学领域&#xff0c;COMSOL 如同一个强大的实验室&#xff0c;让我们能够对复杂的岩…...