<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: {
_required(){
return this.required
},
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>