uniapp中自定义带清除功能的input组件

默认带有清除功能，用到的都是基础知识，供初学者参考。

一、input-item组件

<template>
	<view class="flex-center-center input-wrap">
		<view class="input-lable">{{lable}}</view>
		<input class="input-val" :type="type" :focus="focus" :value="value" :password="password" :disabled="disabled"
			:data-field="dataField" :name="name" :placeholder="placeholder" :maxlength="maxlength" @input="change" />
		<view v-if="valLength>0&&clear" class="iconfont icon-close" :data-field="dataField" @click="clearInput"> </view>
	</view>
</template>

<script>
	export default {
		name: "input-item",
		props: {
			type: {
				type: String,
				default: 'text'
			},
			password: {
				type: Boolean | String,
				default: false
			},
			focus: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean | String,
				default: false
			},
			clear: {
				type: Boolean | String,
				default: true
			},
			maxlength: {
				type: Number | String,
				default: 140

			},
			lable: {
				type: String,
				default: "name"
			},
			name: {
				type: String
			},
			placeholder: {
				type: String
			},
			dataField: {
				type: String
			},
			value: {}
		},
		data() {
			return {};
		},
		computed: {
			valLength: {
				get() {
					console.log("val的长度", this.value.length)
					return this.value.length
				},
				set(val) {
					console.log(val)
				}
			}
		},
		methods: {
			// 将输入的值传递给父组件，调用父组件的change方法，
			change(e) {
				console.log("子组件 输入内容变化时：", e)
				console.log("val====", e.detail.value, )
				this.valLength = e.detail.value.length
				console.log("val长度", e.detail.value.length, this.valLength);
				this.$emit('change', e)
			},
			// 将输入的值传递给父组件，调用父组件的clear方法，
			clearInput(e) {
				console.log(" 子组件 清空输入的内容", e)
				this.$emit('clear', e)
			},
		}

	}
</script>

<style>
	.input-wrap {
		min-height: 100upx;
		border-bottom: 1px solid #DDDDDD;
		color: #121212;
	}

	.input-lable {
		font-size: 24upx;
		width: 22%;
		word-wrap: break-word;
		font-weight: 600;
	}

	.input-val {
		font-size: 28upx;
		color: #181818;
		width: 75%;
		word-wrap: break-word;
		flex: 1;
	}
</style>

 

二、在组件中调用input-item组件

 

<template>
	<view class="verify-page">
		<block v-if="isCert==0" >
			<view class="verify-container">
				<view class="flex-center-center verify-wrap">
					<image class="verify-img" src="../../static/verify.png"></image>
					<text class="verify-explain">请进行登录识别验证</text>
					<text>本次操作需要您进行登录验证</text>
				</view>
				<view class="page_spacing">
					<form @submit="formSubmit">
						<view class="content_spacing">
							<input-item lable="姓名" name="realName" dataField="realName" v-model="realName" maxlength="10"
								placeholder="请填写姓名" @change="change" @clear="clear"></input-item>
							<input-item lable="身份证" type="idcard" name="idCard" dataField="idCard" v-model="idCard" maxlength="18"
								placeholder="填写身份证号码" @change="change" @clear="clear"></input-item>
							<input-item lable="手机号" type="number" name="phoneNumber" dataField="phoneNumber" v-model="phoneNumber"
								maxlength="11" placeholder="填写手机号码" @change="change" @clear="clear"></input-item>
						</view>
						<view class="btn-group">
							<button form-type="submit" :class="[ disabled?'disabledBtn':'defaultBtn']"
								:disabled="disabled">开始认证</button>
						</view>
					</form>
				</view>
			</view>
		</block>
		<block v-else-if="isCert==1">
			<slot></slot>
		</block>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "verify",
		data() {
			return {
				disabled: true,
				isCert: 0,
				realName: '',
				idCard: '',
				phoneNumber: '',
				user_id: '',
				
			};
		},


		methods: {
			change(e) {
				console.log("当前输入的内容", e)
				this[e.currentTarget.dataset.field] = e.detail.value
			},
			clear(e) {
				console.log("父组件清除")
				this[e.currentTarget.dataset.field] = ''
			},
			disabledVerifyBtn() {
				this.disabled = (this.realName.length > 0 && this.idCard.length > 0 && this.phoneNumber.length > 0) ?
					false : true
			},
			
			formSubmit(e) {
				console.log(e)
				let _this = this
				let {
					value
				} = e.detail
				
			},

			
	}
</script>

<style scoped>
	.verify-page {
		/* background-image: linear-gradient(#FC5757, #ffff00); */
		width: 100%;
	}
	.verify-wrap {
		flex-direction: column;
		height: 400upx;
	}

	.verify-img {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 60rpx;
	}

	.verify-explain {
		font-size: 36rpx;
		columns: #000;
	}
</style>