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