vue2 组件封装 el-input

news/2025/11/14 17:36:11/文章来源:https://www.cnblogs.com/congxueda/p/19222875

vue2 组件封装 el-input

 

customInput

     index.vue.  // 组件页面

     index.js.    全局注册使用

 

 

index.vue

<template><el-inputv-bind="$attrs"v-on="$listeners":value="value"@input="handleInput":placeholder="placeholder":type="type"clearable:disabled="disabled"show-word-limit><!-- 透传所有具名插槽和默认插槽 --><template v-for="(slot, name) in $slots" :slot="name"><slot :name="name"></slot></template></el-input>
</template>
<script>
export default {name: "CustomInput",props: {value: {type: [String, Number],default: "",},// 去除首尾空格
    autoTrim: {type: Boolean,default: false,},placeholder: {type: String,default: "请输入",},clearable: {type: Boolean,default: true,},type: {type: String,default: "text",},disabled: {type: Boolean,default: false,},// 是否显示字数统计
    showWordLimit: {type: Boolean,default: false,},},computed: {// maxlength() {//   return this.$attrs.maxlength;// }
  },mounted(){},methods: {handleInput(value) {// 处理自定义逻辑,如 autoTrimconst finalValue = this.autoTrim ? value.trim() : value;// 通过 emit 'input' 事件更新 v-modelthis.$emit("input", finalValue);// Vue 3// this.$emit("update:modelValue", finalValue);
    },},
};
</script>

 

index.js.

import CustomInput from './index.vue';CustomInput.install = function(Vue) {Vue.component(CustomInput.name, CustomInput);
};export default CustomInput;

 

//main.js  注册全局。vue.use(custominput)

 

页面使用

     <el-form-item label="输入框" prop="name"><my-inputv-model="ruleForm.name"placeholder="请输入哈哈"> <i slot="suffix" class="el-input__icon el-icon-date"></i></my-input></el-form-item>

image

 

 

关键点解析:
  1. v-bind="$attrs": 这是实现 Props 透传最关键的一步。它会将父组件传递给 MyInput 但没有在 props 中声明的所有属性,全部绑定到内部的 el-input 上。例如 placeholderdisabledmaxlengthtype 等 el-input 支持的原生属性,你都无需在 MyInput 的 props 中重新定义,直接就能用。
  2. v-on="$listeners": 这是事件转发的关键。它会将父组件在 MyInput 上监听的所有事件(如 blurfocuschange),全部转发到内部的 el-input 上。这样,父组件使用 @blur 就和直接使用 el-input 的体验一致。
  3. slot 插槽与原有保持一致

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/965567.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tts sdk 安装使用

# 安装/验证 SDK 版本(3.0.1460) pip install tencentcloud-sdk-python-tts==3.0.1460 pip install websocket-client==0.48 requests tts_sdk# -*- coding: utf-8 -*- import os import json import time import re…

Docker版本太老了,不支持下载镜像的解决方案

生产环境的Docker版本太老了,已经不支持下载镜像了,为了解决这个问题,可以从其它的服务器下载之前的镜像,再加载上去。# 在新环境docker save -o openjdk8.tar openjdk:8-jdk-alpine # 传输 tar 到生产机# 在生产机…

2025 最新广州补习培训机构权威推荐榜:综合实力、提分效果与口碑测评,优质补习机构最新推荐广州课外补习/广州补课/广州提分/广州学习机构推荐

引言 随着教育竞争的日益激烈,优质课外辅导成为提升学习能力的重要助力,但市场机构良莠不齐,选择难题愈发凸显。本次榜单依托国际教育质量评估协会(IEQA)最新测评数据,结合教学资质、师资水平、课程适配性、提分…

POSTROUTING 数据包离开前,路由之后 SNAT(源地址转换),源地址转换出去前

链名处理阶段典型用途PREROUTING 数据包刚到达,路由之前 DNAT(目标地址转换)POSTROUTING 数据包离开前,路由之后 SNAT(源地址转换)INPUT 发往本机的数据包 过滤本地服务访问OUTPUT 本机发出的数据包 过滤本地进程…

C++ 进阶知识点详细教程 - 第1部分

C++ 进阶知识点详细教程 - 第1部分 1. do while 循环 1.1 基本语法 do {// 循环体 } while (条件);关键特点:至少执行一次循环体,因为条件判断在循环体执行之后。 1.2 与while循环的区别 // while循环:先判断条件,…

2025年苗木批发基地实力排行:这些批发商值得信赖,青叶复叶槭/金森女贞/白蜡/金叶女贞/红叶李/苗木/紫薇/栾树/金叶复叶槭供应商哪个好

行业背景分析 随着城市绿化建设持续推进和生态修复需求增长,苗木批发行业呈现蓬勃发展态势。据最新行业数据显示,2024年全国苗木市场规模已突破2000亿元,年均增长率保持在8%以上。在这一背景下,优质苗木批发基地的…

使用ollama本地部署Embedding模型bge-large-zh-v1.5 - yi

使用ollama本地部署Embedding模型bge-large-zh-v1.5下载模型sudo ollama pull modelscope.cn/Embedding-GGUF/bge-large-zh-v1.5:latest 测试curl -X POST http://localhost:11434/api/embeddings \ -H "Content…

2025年CHRO战略指南发布,头部厂商易路提供“三位一体”数智化落地路径

一、2025 年HR领导力愿景:CHRO的三大战略核心命题 在数字化转型纵深发展、全球化竞争加剧、人才价值重构的时代背景下,人力资源管理正从传统的事务支撑职能,向驱动企业战略落地、构建核心竞争力的关键引擎转变。《2…

LLM应用剖析: 舆情分析多智能体-微舆BettaFish

本文主要讲解了微舆的整体架构,并通过研读并调试源码,整理了多个Agent各自的执行流程。1. 背景 近两周github一直霸榜的国产项目-微舆,引起了广泛的关注,11月3日start数3.4K,截止今天11月14日,start数26.6K,火…

详细介绍:kafka 4.x docker启动kafka4.0.0 docker-compose启动最新版kafka 如何使用docker容器启动最新版kafka

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

HIPCXX

https://rocm.docs.amd.com/projects/radeon-ryzen/en/latest/docs/install/installryz/native_linux/install-ryzen.html HIPCXX="$(hipconfig -l)/clang" HIP_PATH="$(hipconfig -R)" cmake…

Salesforce AI能理解业务、写代码,程序员还能做什么?

过去几年,Salesforce 一直在说“AI赋能开发”,但今年的 Dreamforce ’25,让这句话第一次真正落地。 这一届大会上,Salesforce 把 AI 从“助手”变成了参与者——能理解上下文、能协作、能写、能测、还能优化。 开发…

AI元人文:岐金兰的回应

AI元人文:岐金兰的回应 岐金兰 2025年11月14日 面对诸多对"AI元人文构想"的质疑,我需要作出如下澄清。这些质疑源于传统思维范式,而我们的构想恰恰是要超越这种范式。 关于价值降解的可行性 有人说价值不…

化工产线再升级,稳定互联profinet转devicenet网关连接技术研究

本案例适用于化工生产过程控制系统,西门子S7-1200PLC通过Profinet总线连接DeviceNet主站网关,网关下联DeviceNet从站型传感器(压力、温度传感器)和执行器(电磁阀),实现现场设备数据的采集与控制信号的下发。核心…

2025 11 14

CF2119D 计数,dp考虑当 \(p_i\) 固定的时候选 a 数组方案数是确定的,即为所有 \(p_i > 0\) 的乘积 考虑 \(p_i <= i\) 这个条件,可以看成带系数的类似于括号匹配的东西 很明显这并不是我想到的,我一直在想怎么…

用户头像文件存储机制是如何实现的?

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

2025年行星减速机十大优质品牌排行榜,RV减速机/伺服减速机/传动减速机/传统减速电机/朕轴器/vgm减速机/精密行星减速机企业有哪些

行业背景与评选标准 随着工业自动化程度不断提升,行星减速机作为精密传动领域的核心部件,其市场需求持续增长。本次排行榜基于企业技术实力、产品性能、市场口碑及服务体系等多个维度,对行业内优质供应商进行综合评…

2025年真空管道软管厂家权威推荐榜单:给排水管道软管/由令波纹软管/快接波纹软管源头厂家精选

在工业自动化与管道输送技术持续发展的背景下,真空管道软管作为连接系统中的关键部件,其性能直接关系到整个系统的密封性能与运行效率。 据行业数据显示,2025年全球工业软管市场规模预计将保持稳定增长,其中耐真空…

2025年家具定制厂家权威推荐榜单:智能全屋定制家居/全屋定制/全屋定制家具源头厂家精选

在消费升级与个性化需求双重驱动下,我国家具定制行业正迎来新一轮发展机遇。据行业数据显示,2025年定制家居市场规模预计将突破6000亿元,消费者对环保、设计、服务的需求持续升级。 本次榜单基于技术实力、生产能力…

OI 笑传 #27

KanataharukaABC 小思维。口胡为主。 ABC407E 反悔贪心题。 由这个题我们导出一个关于合法括号序列的充分必要条件:对于一个长度为 \(2N\) 的合法括号序列 \(S_{2N}\),对于其任意的一个前缀子串 \(S_{1,i},i\in [1,2…