<template>
<div class="LoginInput"
	:style="{height,borderRadius,border,background}"
>
	<div class="li_before" v-if="$slots.before">
		<slot name="before"></slot>
		<div class="before_line"></div>
	</div>
	<input class="li_input" :value="modelValue" v-bind="$attrs" @input="(ev)=>$emit('update:modelValue',ev.target.value)" />
	<div class="li_after" v-if="$slots.after">
		<slot name="after"></slot>
	</div>
</div>
</template>
<script setup name="LoginForm">

const props = defineProps({
	modelValue:String,
	height:{type:String,default:'50px'},
	borderRadius:{type:String,default:'10px'},
	border:{type:String,default:null},
	background:{type:String,default:'rgba(255,255,255,0.7)'},
});
const isFoucs = ref(false);
</script>
<style lang="less" scoped>
.LoginInput{
	display:flex; justify-content:space-between; align-items:center;
	padding:10px; height:40px; box-sizing:border-box;
	overflow:hidden;
	.before_line{
		width:1px; height:100%; background:rgba(0,0,0,0.3);
		margin:0 20px 0 10px;
	}
	.li_before,.li_after{
		height:100%;
		display:flex; justify-content:flex-start; align-items:center;
		flex:1;
	}
	.li_input{
		border:none; width:100%; height:100%;
		background:none;
	}
}
</style>