dccloud/uni-app-front/components/org-input-text/org-input-text.vue

<template>
	<view class="org-input-text">
		<view class="org-input-text-info" :style="{'border-radius':borderRadius}">
			<view v-if="$slots.left">
				<slot name="left"></slot>
			</view>
			<view class="left-info" v-if="leftText&&!$slots.left" :style="{'font-size':fontSize+'px','background-color':labeBg,'padding':padding}">
				{{leftText}}
			</view>
			<view v-if="$slots.content" class="content" :style="{'padding':padding}">
				<slot name="content"></slot>
			</view>
			<view class="content" v-if="!$slots.content&&placeholder" :style="{'padding':padding}">
				<input type="text" :maxlength="140" :password="isShowPass" v-model="inputText" :placeholder="placeholder"
				 :placeholder-style="'color:'+placeholderColor+';font-size:'+(fontSize-2)+'px;'" :style="{'font-size':fontSize+'px'}"
				 @input="changeInput" @blur="changeInput" @focus="changeInput" @confirm="changeInput" />
			</view>
			<view v-if="$slots.right">
				<slot name="right"></slot>
			</view>
			<view v-if="isPassword" @tap="isShowPass=!isShowPass" class="red-pass" :style="{'padding':padding,'padding-left':'10rpx'}">
				<uni-icons type="eye" :color="btnColor" :size="fontSize"></uni-icons>
			</view>
			<view class="clear-btn" v-if="showClear" @tap="clear" :style="{'padding':padding}">
				<uni-icons type="clear" :color="btnColor" :size="fontSize"></uni-icons>
			</view>
			<view class="status" @tap="getMsg" :style="{'padding':padding,'padding-left':'10rpx'}">
				<uni-icons :type="!isTrue?'clear':'checkbox-filled'" :color="!isTrue?'red':'#20a97e'" :size="fontSize"></uni-icons>
			</view>
		</view>

	</view>
</template>

<script>
	import uniIcons from '../../components/uni-icons/uni-icons';
	export default {
		data() {
			return {
				inputText: this.value,
				isTrue: false,
				isShowPass: this.isPassword,
				msg: this.leftText+'不能为空！'
			}
		},
		components: {
			uniIcons
		},
		props: {
			/**
			 * 输入问题不提示文字，
			 */
			leftText: {
				type: String,
				default: '标题标题'
			},
			/**
			 * 是否显示清除按钮，
			 */
			showClear: {
				type: Boolean,
				default: true
			},
			/**
			 * 默认提示占位信息
			 */
			placeholder: {
				type: String,
				default: '请输入信息...'
			},
			/**
			 * 提示文字颜色
			 */
			placeholderColor: {
				type: String,
				default: '#cccccc'
			},
			/**
			 * 字体大小
			 */
			fontSize: {
				type: Number,
				default: 20
			},
			/**
			 * 左侧提示文字颜色
			 */
			labeBg: {
				type: String,
				default: '#dedede'
			},
			/**
			 * 按钮默认颜色
			 */
			btnColor: {
				type: String,
				default: '#dedede'
			},
			/**
			 * 是否是密码框
			 */
			isPassword: {
				type: Boolean,
				default: false
			},
			/**
			 * 最大长度
			 */
			maxLength: {
				type: Number,
				default: 140
			},
			/**
			 * 边框圆角
			 */
			borderRadius:{
				type: String,
				default: '20rpx'
			},
			/**
			 * 默认初始值
			 */
			value:{
				type: String,
				default: ''
			},
			/**
			 * 校验信息
			 */
			checkInfo: {
				type: Object,
				default: function() {
					return {
						msg: '请输入6-12位字符',
						reg: '^.{6,12}$',
						required: true
					}
				}
			},
			/**
			 * 中间文本框边距
			 */
			padding: {
				type: String,
				default: '20rpx'
			}


		},
		methods: {
			clear() {
				this.inputText = "";
				this.$emit("clear");
				this.changeInput();
			},
			changeInput() {
				var text = this.inputText;
				if (this.checkInfo.required == true || this.checkInfo.required === undefined) {
					if (text.length <= 0) {
						this.isTrue = false;
						this.msg = this.leftText + "不能为空，请输入！"
						return;
					}
				}
				let reg = new RegExp(this.checkInfo.reg);
				if (!reg.test(text)) {
					this.msg = this.leftText + this.checkInfo.msg;
					this.isTrue = false;
					return;
				}
				this.msg = "验证通过！";
				this.isTrue = true;
				this.$emit("input", this.inputText);
			},
			getMsg() {
				uni.showToast({
					icon: "none",
					title: this.msg
				});
			}
		}
		,created() {
			setTimeout(()=>{
				this.changeInput() 
			},200);
		}
	}
</script>

<style lang="scss" scoped>
	.org-input-text {
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;

		.org-input-text-info {
			border-radius: 20rpx;
			border: 1px solid rgba(215, 215, 215, 1);
			line-height: 60rpx;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			overflow: hidden;

			.left-info {
				flex-direction: column;
				 flex: 2;
				padding: 20rpx;
				color: #AAAAAA;
				flex-basis:250rpx; 
				// min-width: 80rpx;
				background-color: #dedede;
				text-align: right;
			}

			.content {
				flex-grow: 1;
				// width: 100%;
				padding: 20rpx;
			}

			.clear-btn {
				padding: 20rpx;
			}

			.status {
				padding: 20rpx;
			}

			.red-pass {
				padding: 20rpx;
			}
		}
	}
</style>