uniapp-input组件

co-input组件

参数	默认值	类型	说明
textNmae	无	String	输入框左边文字
border	false（显示）	Boolean	输入框下方横线，默认显示
placeholder	无	String	输入框默认提示字
inputType	text	String	输入框左边文字
rightTag	false	Boolean	右边箭头
value	无	[String, Number]	输入框文字
require	false	Boolean	是否显示必填小星星
requireRed	false	Boolean	小星星颜色，默认蓝色
tagText	无	String	输入框右边单位
maxLength	-1	Number	文字最大长度
isBold	无	String	左边文字加粗

组件使用

1.引入

	import CoInput from "../../components/co-input/co-input.vue"

2.注册组件

export default{
		components:{CoInput},
		data(){
		formList:{
					title:"",
					content:"",
					date:"",
					tel:"",
					address:"",
					pickupTime:"",
					pickupAddress:"",
				},},
}

3.使用组件

(1）带红色小星星

<co-input :isBold="'bold'" :
require="true" 
:requireRed="true" 
:textName="'物品名称'"
 v-model="formList.title"
 :placeholder="'请输入标题或物品名称'"></co-input>

效果图

(2）没有下方横线

		<co-input :isBold="'bold'" 
		:require="true" :requireRed="true"  
		:textName="'联系电话'" 
		:inputType="'number'"
		 v-model="formList.tel"
		  :border="true" :placeholder="'请输入联系电话'"></co-input>

效果图

(3）显示右箭头

			<co-input :textName="'新旧程度'" 
			:inputType="'digit'" :rightTag="true" 
			:placeholder="'请输入'"/>

效果图

(4）小星星默认蓝色

			<co-input  :require="true" 
			:textName="'维护区域'" 
			v-model="formList.title" 
			:placeholder="'请输入故障/需维修地点'"/>

效果图

(5）右边单位

			<co-input 
			 :textName="'租金'"
			  :tagText="'元/月'" 
			  v-model="formList.rent" 
			  :placeholder="'请输入月租金'" />

效果图

(6）限制长度

			<co-input :textName="'标题'" 
			:border='true' 
			:maxLength='25'
			 v-model="formList.buildingNumber"
			 :placeholder="'最多25个字'"/>

效果图

(7）修改样式

效果图

		<view class="form-wrap">
			<co-input :textName="'姓名'" v-model="formList.name" :placeholder="'请输入成员姓名'"></co-input>
			<co-input :textName="'电话'" v-model="formList.tel" :placeholder="'请输入电话'"></co-input>
		</view>

使用/deep/修改

<style scoped lang="less">

	.form-wrap{
		margin-bottom: 124upx;
		padding:0 30upx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		/deep/ .input-item{
			padding: 40upx 0;
			.left-text{
				font-size: 32upx;
			}
			.input-wrap{
				input{
					font-size: 32upx;
				}
			}
		}
	}	

</style>

组件

组件内容

<template>
	<view :class="{'border-input': border}" class="input-item" >
		<view class="left-text">
			<text :style="{fontWeight:isBold}" :class="{require:require,requireRed:requireRed}">{{textName}}</text>
		</view>
		<view class="input-wrap">
			<input 
			:maxlength="maxLength"
			:value="value" 
			:type="inputType" 
			placeholder-style="color:#B2B2B2" 
			class="inputstyle" 
			:placeholder="placeholder" 
			@input="inputload">
			<text class="tag-text">{{tagText}}</text>
			<image v-if="rightTag" class="right" src="../../static/image/right1.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			textName:{
				type: String,
			},
			placeholder:{
				type:String,
			},
			inputType:{
				type:String,
				default:"text",
			},
			border:{
				type:Boolean,
				default:false
			},
			rightTag:{
				type:Boolean,
				default:false
			},
			value:{
				type:[String, Number],
				default: ''
			},
			require:{
				type:Boolean,
				default:false
			},
			requireRed:{
				type:Boolean,
				default:false
			},
			isBold:{
				type:String,
			},
			tagText:{
				type:String,
			},
			maxLength:{//现在最大输入长度，默认不限制
				type:Number,
				default:-1
			}
		},
		data() {
			return {
					currentValue: this.value,
			}
		},
		methods: {
			setCurrentValue(value) {
			      // console.log(value)
			      if (value === this.currentValue) return;     
			      this.currentValue = value;
			    },
				inputload(event){
			      let value = event.target.value;      
			      this.$emit('input', value)
			    }
		},
		watch: {
		    value(val) {
		      this.setCurrentValue(val);
		    }
		}
	}
</script>

less

<style scoped lang="less">
	.input-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom-width: 1upx;
		border-bottom-style: solid;
		border-bottom-color: #EFEFF4;
		padding-top: 24upx;
		padding-bottom: 24upx;
		.left-text{
			color: #000000;
			font-size: 30upx;
		}
		.input-wrap{
			width: 75%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			input{
				width: calc(100% - 80upx);
				text-align: right;
				font-size: 30upx;
			}
		}
	}
.border-input{
	border-bottom-width: 0;
	padding-bottom: 0;
}
.right{
	width: 22upx;
	height: 22upx;
	margin-left: 5upx;
}
.require{
	position: relative;
	&::after{
		content:"*";
		position: absolute;
		right: -15upx;
		top: -10upx;
		color: #079AAA;
		font-size: 30upx;
		}
}
.requireRed::after{
	color: #F73B56;
}
.tag-text{
	font-size: 30upx;
	color: #000000;
	margin-left: 5upx;
	margin-top: -3upx;
}
</style>