首页 > 其他分享 >vue.js组件开发实战:带图标的输入框组件

vue.js组件开发实战:带图标的输入框组件

时间:2024-11-11 10:43:37浏览次数:8  
标签:vue img icotxtbox js iptchange components 组件

1.效果展示

2.组件页:icotxtbox.vue

使用props:['img','wth']接收父页的参数,img为图标url地址,wth为输入框宽度。

this.$emit('iptchange', e.target.value)回调父页方法并将输入值传回父页。

<template>
		<view class="icotxtbx" style="display: flex;justify-content: space-between;">
			<img :src="img" style="width: 20px;height: 20px;" />
			<input type="text" @input="onInput" class="mvaltxt" :style="{width:wth}" />
		</view>
</template>

<script>
import { any, object } from 'prop-types'
	export default {
		name:"icotxtbox",
		data() {
			return {
			}
		},
		props:['img','wth'],
		mounted() {
			//console.log('00',this.img)
		},
		onLoad() {},
		methods: {
			onInput(e){
				console.log(e.target.value)
				this.$emit('iptchange', e.target.value);
			}
		}
	}
</script>

<style>
	.icotxtbx {
		display: flex;
		justify-content: space-between;
		border: solid 1px #ddd;
		padding: 10px;
		border-radius: 5px;
		margin-top: 10px;
	}
	.mvaltxt{border-left: solid 1px #ddd;padding: 2px;}
</style>

3.调用页:index.vue

引入组件 import icotxtbox from '@/components/icotxtbox.vue'

注册组件 components:{icotxtbox}

使用和传参 <icotxtbox :img="img1" wth="200px" @iptchange="handleiptchange1"></icotxtbox>

iptchange为组件页触发的回调,handleiptchange1为调用页的方法。

<template>
	<view class="content">
		<icotxtbox :img="img1" wth="200px" @iptchange="handleiptchange1"></icotxtbox>
		<icotxtbox :img="img2" wth="300px" @iptchange="handleiptchange2"></icotxtbox>
	</view>
</template>

<script>
	import icotxtbox from '@/components/icotxtbox.vue';
	export default {
		components:{icotxtbox},
		data() {
			return {
				img1:'https://img1.baidu.com/it/u=3129178035,433503679&fm=253&fmt=auto&app=138&f=JPG',
				iptdata1:'',
				img2:'https://img.ixintu.com/upload/jpg/20210605/6fbf18b95f392faba500b9256f87c4d1_37080_512_512.jpg',
				iptdata2:''
			}
		},
		onLoad() {
		},
		methods: {
			handleiptchange1(v){
				//回调,回填数据
				this.iptdata1 = v
			},
			handleiptchange2(v){
				//回调,回填数据
				this.iptdata2 = v
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

标签:vue,img,icotxtbox,js,iptchange,components,组件
From: https://blog.csdn.net/cooluca/article/details/143674736

相关文章

  • vue将字段绑定为响应式和不为响应式的情况
    背景:在项目中,因为自己直接将列表的对象中的字段在vue中赋值了,并且未使用$set方法,导致赋值的字段没有响应式,在页面点击输入,没有数据的变化。 字段具有响应式的几种方法:1:前端请求的后端接口返回的数组对象中,返回的字段存在的话,前端会将这个对象中的字段设置为响应式的,存在get......
  • 【前端】JSX 中事件处理详解
    在React和JSX中,处理事件是构建交互式用户界面的重要部分。通过合理地处理事件,可以实现用户与应用的互动,从而提升用户体验。本文将详细说明如何在JSX中处理事件,包括类组件和函数组件中的不同方法,并提供示例代码和最佳实践。1.事件处理的基本概念在React中,事件处......
  • seriko框架-js逆向解密框架
    //seriko框架的文件教程https://www.bilibili.com/video/BV1UH14YkEn2///解析第一步https://oss.iinti.cn/sekiro/sekiro-demo下载地址下载5.1m的安装打开sekiro.bat//第二步在网页上定位到加密定位的地方通过替换文件方式插入varclient这段代码修改内容有group=......
  • 大数据毕业设计:Django电影推荐系统 双协同过滤推荐算法 爬虫 豆瓣电影 vue框架 (建议收
    博主介绍:✌全网粉丝10W+,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业项目实战6年之久,选择我们就是选择放心、选择安心毕业✌>......
  • 基于Django + Vue的二手电子设备交易平台
    具体实现截图系统测试从多个角度进行测试找到系统中存在的问题是本系统首要的测试目的,通过功能测试寻找出系统缺陷并改正,确保系统没有缺陷。在测试过程中证明系统满足客户需求,发现问题和不足及时改正。测试完成之后得出测试结论。系统测试目的在酒店管理......
  • 鸿蒙自定义组件生命周期
    在开始之前,我们先明确自定义组件和页面的关系:自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用,可以调用组件的生命周期。页面:即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个......
  • 基于SpringBoot+Vue+Uniapp微信小程序的医院预约挂号系统设计与实现(精选计算机毕业设
    文章目录1.前言2.详细视频演示3.文档参考3.1论文参考3.2流程设计图3.3数据库表结构设计3.4系统测试部分4.项目运行截图5.技术框架5.1后端采用SpringBoot框架5.2前端框架Vue6.选题推荐毕设案例8.系统测试8.1系统测试的目的8.2系统功能测试9.代码参考10......
  • 基于SpringBoot+Vue的高考志愿智能推荐系统设计与实现(精选计算机毕业设计-源码+文档+
    文章目录1.前言2.详细视频演示3.文档参考3.1论文参考3.2流程设计图3.3数据库表结构设计3.4系统测试部分4.项目运行截图5.技术框架5.1后端采用SpringBoot框架5.2前端框架Vue6.选题推荐毕设案例8.系统测试8.1系统测试的目的8.2系统功能测试9.代码参考10......
  • js内置函数
    Javascript考点内置对象MathMath.<方法名>(参数);Math.abs(x)---绝对功能:返回数字x的绝对值。语法:Math.abs(x)console.log(Math.abs(-5));//输出5console.log(Math.abs(10));//输出10Math.ceil(x)---天花板功能:返回大于或等于x的最小整数(向上取整)。......
  • 【015】基于Spring Boot+Vue的养老院管理系统【原创】
    一.系统开发工具与环境搭建1.系统设计开发工具后端使用Java编程语言的Springboot框架项目架构:B/S架构运行环境:win10/win11、jdk17前端:技术:框架Vue.js;UI库:ElementUI;开发工具:VisualStudioCode;后端:技术:Java语言、mybatisplus、Springboot框架;开发工具:IDEA20......