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

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>