wardrobe/tm-vuetify/components/tm-input/tm-input.vue

<template>
	<view class="d-block tm-input overflow"
	:class="[
		
		black_tmeme?(bgTheme?'grey-darken-5':''):bgTheme,
		flat?'':`px-${padding[0]}`,
		'round-'+ bgRound,
		`shadow-${color}-${bgShadow}`
	]"
	>
		<view 
			:class="(flat?'':`  py-${padding[1]} `)+` ${borderBottom?black_tmeme?'border-grey-darken-4-b-1 ':'border-grey-lighten-4-b-1':''}`"
			>
			<view @click="onclickInput" :class="[vertical?'tm-input-col':'flex-between ']" :style="{
				width: '100%',height: 'auto',
				alignItems:inputType=='textarea'?'flex-start':'center'
			}">
				<!-- 左边内容。 -->
				<view v-if="leftIcon||title" class="tm-input-left flex-start flex-shrink" :class="[vertical?'pb-24':'']">
					<!-- icon -->
					<view v-if="leftIcon" class="pr-16 vertical-align-middle flex-center">
						<tm-icons dense  :name="leftIcon" :color="color_tmeme"></tm-icons>
					</view>
					<!-- 标题 -->
					<view v-if="title" class="d-inline-block  "
					:style="{fontSize:title_size}"
						:class="[titleClass,black_tmeme?'bk  text-grey-lighten-3':'']">
						<text v-if="required" class="text-red">*</text>
						<slot name="default" :title="title">
							{{title}}
						</slot>
					</view>
				</view>
				<view  class="flex-between " :class="[disabled?'opacity-6':'',]" style="width: 100%;">

					<!-- input主体 -->
					<view class="tm-input-center relative fulled" >
						<view class="flex-start   tm-input-center-wk"
							:class="['round-'+round,showIndent?'px-16':'',
							black_tmeme?(bgColor?'grey-darken-4  text-grey-lighten-3':'text-grey-lighten-3'):bgColor,
							`text-${textColor}`,isFocus&&focusShow?(black_tmeme?`border-${color_tmeme}-a-1`:`${color_tmeme} outlined `):``,
							`border-${black_tmeme?(borderColor?'grey-darken-4':''):borderColor}-a-1`,
							
							]">
							<view class="flex-shrink px-16 flex-center" v-if="prefixpIcon" style="line-height: 0;">
								<tm-icons dense  :name="prefixpIcon" :size="28" :color="(prefixpIconColor||color_tmeme)" ></tm-icons>
							</view>
							<view :style="{fontSize:font_size}" class="flex-shrink pr-24" :class="[titleClass,black_tmeme?'bk  text-grey-lighten-3':'']" v-if="prefixpText">
								{{prefixpText}}
							</view>
							
							
							<input 	always-embed v-if="inputType!='textarea'"  @confirm="$emit('confirm',$event)" @input="input"
								@keyboardheightchange="$emit('keyboardheightchange',$event)" @blur="blur"
								@focus="focusFun" :focus="focus_fs" :maxlength="maxlength" :adjust-position="adjustPosition"
								:auto-focus="autoFocus" :confirm-type="confirmType" :disabled="disabled" 
								:password="password"  :type="inputType" :value="value" class="tm-input-center-input "
								:class="['text-align-'+align,showError?'text-red':'',' py-5 ']" :placeholder="placeholder"
								:placeholder-class="black_tmeme? 'text-grey-darken-1 ':'  ' +` text-size-n ` + placeholderClass"
								 :style="{
									fontSize:font_size,
								 	height:height_rpx+'rpx'
								 }"
								/>
								<!-- uniapp的bug，当输入框禁用时，点击此处来获取新的焦点，以让键盘收起。 -->
							<view v-if="disabled" class="absolute fulled t-0 r-0" :style="{
								 	height:height_rpx+'rpx'
								 }"></view>
							
							<textarea always-embed v-if="inputType=='textarea'"  @confirm="$emit('confirm',$event)" @input="input"
								@keyboardheightchange="$emit('keyboardheightchange',$event)" @blur="blur"
								@focus="focusFun" :focus="focus_fs" :maxlength="maxlength" :adjust-position="adjustPosition"
								:auto-focus="autoFocus"  :confirm-type="confirmType" :disabled="disabled"
								:value="value"  class="tm-input-center-input " :style="{
									height:height_rpx+'rpx',
									fontSize:font_size,
								}"
								:class="[maxlength>0?'pb-46':'','text-align-'+align,showError?'text-red':'','pt-16 fulled']" :placeholder="placeholder"
								:placeholder-class="black_tmeme? 'text-grey-darken-1 ':' text-grey-lighten-1 ' +` text-size-n `+ placeholderClass" >	
							</textarea>
							<!-- 清除图标 -->
							<view v-if="clear&&valdata.length!=''" class="flex-center pl-16">
								<tm-icons @click.stop="clearVal" name="icon-times-circle-fill" :color="color_tmeme"></tm-icons>
							</view>
							
							<view v-if="suffixIcon" class="flex-center">
								<tm-icons :size="26" :name="suffixIcon" :color="(suffixIconColor||color_tmeme)"></tm-icons>
							</view>
						</view>
						<view v-if="maxlength>0&&inputType=='textarea'" 
						:style="{bottom:'16rpx',right:'16rpx'}"
						class="tm-input-center-numXz text-align-right text-size-xxs pt-12 text-grey absolute fulled">{{valueLen}}/{{maxlength}}</view>

					</view>
					<!-- 右边。 -->
					<view class="tm-input-right flex-end flex-shrink">
						<!-- 后缀文字，比如单位，等 -->
						<text v-if="suffix" class=" text-grey-darken-4 pl-10" :style="{fontSize:font_size}">{{suffix}}</text>
						<!-- 后台图标。 -->
						<view v-if="rightIcon" class="pl-10" style="line-height: 0;">
							<tm-icons dense  :name="rightIcon" color="grey-lighten-1"></tm-icons>
						</view>
						<!-- 插入的按钮等内容。 -->
						<slot name="rightBtn"></slot>
					</view>
				</view>


			</view>
			<!-- detail出错成功等信息。 -->
			<view v-if="showError" class="text-size-xs text-red pt-12">{{errorText}}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 输入框
	 * @property {Number} maxlength = [-1] 默认：-1，最大输入字符数。
	 * @property {Boolean} black = [] 默认：false，暗黑模式。
	 * @property {Function} verify = [] 默认： (val) => {check: val.length <= 0 ? false : true,text: "必填项不能为空。"}，校验规则函数。
	 * @property {String} title-class = [] 默认： text-grey-darken-4,自定左边标题或者上标题的类。
	 * @property {Boolean} required = [] 默认： false, 是否是必填。如果必填写将会触发基础的校验，不能为空。
	 * @property {Boolean} adjust-position = [] 默认： false, 是否上推键盘。
	 * @property {Boolean} auto-focus = [] 默认： false, 自动获得焦点。
	 * @property {String} confirm-type = [done|go|next|send|search] 默认： done, 键盘右下角确认按钮文字。
	 * @property {Boolean} disabled = [] 默认： false, 禁用。
	 * @property {Boolean} focus-show = [] 默认： false, 是否显示聚焦状态。
	 * @property {Boolean} show-indent = [] 默认： false, 是滞使输入框内容两边缩进。默认是。
	 * @property {Boolean} password = [] 默认： false, 密码模式
	 * @property {String} input-type = [digit|text|number|password|idcard|textarea] 默认： text, 输入模式 
	 * @property {String} value = [] 默认： "", 输入内容，同v-model
	 * @property {String} right-icon = [] 默认： "", 后缀图标
	 * @property {String} left-icon = [] 默认： "", 外层前缀图标
	 * @property {String} prefixp-icon = [] 默认： "", 输入框内部前缀图标
	 * @property {String} prefixp-icon-color = [] 默认： "", 默认空，使用主题color颜色
	 * @property {String} suffix = [] 默认： "", 后缀文字
	 * @property {String} suffix-icon = [] 默认： "", 输入框内后缀图标
	 * @property {String} suffix-icon-color = [] 默认： "", 默认使用主题图标
	 * @property {String} title = [] 默认： "", 左边标题。
	 * @property {String} title-font-size = [xxs/xs/s/n/g/lg/xl] 默认： "n",同类的字号,xxs,xs,s,n,g,lg,xl
	 * @property {Number|String} font-size = [xxs/xs/s/n/g/lg/xl/任意数字] 默认： "n",同类的字号,xxs,xs,s,n,g,lg,xl，也可以是数字单位rpx
	 * @property {String} align = [left|center|right] 默认： "", 输入框文字对齐方式。left,center,right
	 * @property {Boolean} clear = [false|true] 默认： false, 显示清除图标。
	 * @property {String} color = [] 默认： primary, 主题色名称
	 * @property {String} bg-color = [grey-lighten-5|white] 默认： grey-lighten-5, 输入框背景色。
	 * @property {String} border-color = [] 默认： "", 输入框边框类型主题颜色名称。
	 * @property {Boolean} border-bottom = [false|true] 默认： true, 是否显示下划线
	 * @property {String} text-color = [black|primary] 默认： black, 输入框文字颜色。
	 * @property {String} placeholder = [] 默认： 请输入, 占位文字
	 * @property {Boolean} vertical = [false|true] 默认： false, 是否上下排列
	 * @property {Number} round = [] 默认： 2, 输入框圆角。
	 * @property {Boolean} showIndent = [] 默认： true, 是否输入框内部两边缩进
	 * @property {Number} bg-round = [] 默认： 0, 整体框圆角。
	 * @property {Number} bg-shadow = [] 默认： 0, 整体框投影。
	 * @property {String} bg-theme = [] 默认：white, 整体框背景
	 * @property {Boolean} flat = [] 默认： false, 是否去除所有边框
	 * @property {Number|String} height = [] 默认： 68, 
	 * @property {String} name = [] 默认：''，提交表单时的的字段名称标识
	 * @property {String} prefixp-text = [] 默认：''，输入框内前缀文字
	 * @property {String} placeholder-class = [] 默认：''，点位符的自定义类。
	 * @property {Array} padding = [] 默认：[32,12]，左右，上下内间距。
	 * @property {Function} click 点击输入框时触发发的函数。
	 * @property {Function} clear 清空时触发携带相关数据
	 * @property {Function} input 输入时触发携带相关数据
	 * @example <tm-input ></tm-input>
	 * 
	 */
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
	export default {
		components:{tmSheet,tmIcons},
		name:"tm-input",
		props: {
			//提交表单时的的字段名称
			name:{
				type:String,
				default:''
			},
			prefixpText:{
				type:String,
				default:''
			},
			flat: {
				type: Boolean,
				default: false
			},
			//是否输入框内部两边缩进。默认是
			showIndent:{
				type:Boolean,
				default:true
			},
			maxlength: {
				type: Number,
				default: -1
			},
			black: {
				type:Boolean|String,
				default:null
			},
			//是否显示聚焦状态
			focusShow: {
				type:Boolean|String,
				default:false
			},
			titleFontSize:{
				type:String,
				default:'n',//同类的字号,xxs,xs,s,n,g,lg,xl
			},
			height:{
				type:Number|String,
				default:68
			},
			// 校验规则函数。
			verify: {
				type: Function,
				default: ()=>{
					return (val) => {
						return {
							check: val?.length <= 0 ? false : true,
							text: "必填项不能为空。"
						};
					}
				}
			},
			titleClass: {
				type: String,
				default: 'text-grey-darken-4'
			},
			// 是否是必填。如果必填写将会触发基础的校验，不能为空。
			required: Boolean,
			adjustPosition: Boolean,
			autoFocus: Boolean,
			confirmType: String,
			disabled: Boolean,
			password: Boolean,
			inputType: {
				type: String,
				default: 'text'
			},
			value: {
				type: String|Number,
				default: ''
			},
			// 右边外层后缀图标。
			rightIcon: {
				type: String,
				default: ''
			},
			// 输入框内部前缀图标。
			prefixpIcon: {
				type: String,
				default: ''
			},
			prefixpIconColor: {
				type: String,
				default: ''
			},
			// 左边外层图标。
			leftIcon: {
				type: String,
				default: ''
			},
			// 后缀文字
			suffix: {
				type: String,
				default: ''
			},
			// 输入框后缀图标
			suffixIcon: {
				type: String,
				default: ''
			},
			suffixIconColor:{
				type: String,
				default: ''
			},
			// 左边标题。
			title: {
				type: String,
				default: ''
			},
			fontSize:{
				type:Number|String,
				default:'n'
			},
			// 输入框文字对齐方式。left,center,right
			align: {
				type: String,
				default: 'left'
			},
			// 显示清除图标。
			clear: Boolean,
			// 主题色名称。
			color: {
				type: String,
				default: 'primary'
			},
			//输入框背景色。grey-lighten-5
			bgColor: {
				type: String,
				default: ''
			},
			// 输入框边框类型主题颜色名称。
			borderColor: {
				type: String,
				default: ''
			},
			// 是否显示下划线
			borderBottom: {
				type: Boolean,
				default: true
			},
			// text输入框文字颜色。
			textColor: {
				type: String,
				default: 'black'
			},
			placeholder: {
				type: String,
				default: "请输入"
			},
			placeholderClass:{
				type:String,
				default:'text-grey-lighten-1'
			},
			// 是否上下排列输入框。
			vertical: Boolean,
			round:{
				type:Number|String,
				default:2
			},
			bgRound:{
				type:Number|String,
				default:0
			},
			bgShadow:{
				type:Number|String,
				default:0
			},
			bgTheme:{
				type:String,
				default:'white'
			},
			//获取焦点。
			focus:{
				type:Boolean,
				default:false
			},
			padding:{
				type:Array,
				default:()=>{
					return [32,12];
				}
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		data() {
			return {
				showError: false,
				errorText: "请正确填写",
				FOCUS_Auto:false,
				isFocus:false,
			};
		},
		computed: {
			height_rpx:function(){
				return this.height;
			},
			font_size:function () {
				
				let font = {
					'xxs':'20rpx',
					'xs':'22rpx',
					's':'24rpx',
					'm':'26rpx',
					'n':'28rpx',
					'g':'32rpx',
					'lg':'36rpx',
					'xl':'40rpx'
				}
				if(typeof this.fontSize=='string') return font[this.fontSize];
				return this.fontSize+'rpx';
			},
			title_size:function () {
				let font = {
					'xxs':'20rpx',
					'xs':'22rpx',
					's':'24rpx',
					'm':'26rpx',
					'n':'28rpx',
					'g':'32rpx',
					'lg':'36rpx',
					'xl':'40rpx'
				}
				if(typeof this.titleFontSize=='string') return font[this.titleFontSize];
				return this.titleFontSize+'rpx';
			},
			focus_fs:{
				get:function(){
					return this.FOCUS_Auto;
				},
				set:function(val){
					this.FOCUS_Auto = val;
				}
			},
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			valueLen:function(){
				// 为了兼容ios不能使用this.valdata.length.
				let p = String(this.valdata);
				return p?.split('').length||0 ;
			},
			valdata:{
				get:function(){
					return this.value;
				},
				set:function(val){
					this.$emit('input', val)
					this.$emit('update:value', val)
					if (this.required) {
						this.$nextTick(function(){
							this.verifyInput();
						})
					}
				}
			}
		},
		mounten(){
			this.FOCUS_Auto = this.focus;
		},
		methods: {
			onclickInput(e){
				this.$emit('click',e)
			},
			input(e) {
				this.valdata = e.target.value;
			},
			// 校验是否通过。
			verifyInput() {
				
				let verify = this.verify.bind(this, this.valdata||'');
				verify = verify.call(this,this.valdata||'')
				if(typeof verify ==='function'){
					verify = verify.call(this,this.valdata||'')
				}
				
				if (typeof verify !== 'object') verify = {};
				this.showError = !(verify.check??true);
				this.errorText = verify.text??"";
				return verify.check??true;
			},
			//清除校验显示 的内容。
			clearVerify() {
				this.showError = false;
				this.errorText = "";
			},
			blur(e) {
				this.isFocus=false;
				this.$emit('blur', e)
			},
			focusFun(e){
				this.isFocus=true;
				this.$emit('focus',e)
			},
			clearVal(e){
				this.valdata ="";
				this.$emit('clear', this.valdata)
			}
		},

	}
</script>

<style lang="scss" scoped>
	.tm-input {

		.tm-input-center {
			width: 100%;
			.tm-input-center-wk{
				transition: all 0.2s;
			}
			.tm-input-center-input {
				border: none;
				background: none;
				box-shadow: 0;
				width: 100%;
				
			}
		}

		.tm-input-left {
			flex-shrink: 0;
			height: 100%;
			
			min-width: 80rpx;
			padding-right: 24rpx;
		}

		.tm-input-col {
			.tm-input-left {
				max-width: inherit;
				padding-right: 0;
			}

			.tm-input-center {

				.tm-input-center-input {

					height: 76upx;

				}
			}
		}

		.tm-input-right {
			height: 100%;
			// width: 300upx;
		}
	}
</style>