Web_TracerMethodology/components/tm-input/tm-input.vue

<template>
	<view class="tm-input">
		<input class="inputArea" type="text" :value="inputValue"  :placeholder="placeholder" 
		        @input="inputHandle"
				placeholder-style="font-size:25rpx;
				font-family: SourceHanSansCN-Normal, SourceHanSansCN;
				font-weight: 400;
				color: #B8BECC;" 
				
		/>
		<image @click="clearhandle" v-show="inputValue.length>0" class="clearIcon" src="../../static/clearIcon.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		name: "tm-input",
		props: {
			placeholder: {
				type: String,
				default: () => {
					return '请输入'
				}
			},
			clear:{
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {
                inputValue:''
			};
		},
		watch:{
			inputValue(val){
				this.$emit('onChange',val);
			},
			clear(val){
				if(val){
					  this.inputValue = ''
				}
			}
		},
		methods:{
			inputHandle(event){
				this.inputValue = event.target.value
			},
			clearhandle(){
				this.inputValue = ''
			}
		}
	}
</script>

<style lang="less" scoped>
	.tm-input {
		position: relative;
		.inputArea {}
		.clearIcon {
			position: absolute;
			right:25rpx;
			top:50%;
			width:25rpx;
			height: 25rpx;
			margin-top: -12.5rpx;
		}
	}
</style>