1、【基于原生Html浏览器执行的方案】CSS_点击input输入框后提示文字上移缩小_小歪博客-CSDN博客
2、注意:以下基于uni-app【兼容app的方案】uniapp的input标签和浏览器原生的html5标签的属性不一样,因为uni-app是基于二次封装的,为此基于html的方案在uni-app的是行不通的,需重新定制!
<template>
<view class="content">
<!-- 基于动态传参的方式【JavaScript传入props初始化参数】-->
<view class="group_dynamic">
<input v-model="value"
:style="{fontSize: fontSize,height:inputHeight,paddingLeft:inputPaddingLeft}"
:focus="isFocus"
@focus="onEventType('focus')"
@blur="onEventType('blur')"/>
<label @click="onEventType('focus')"
:style="{fontSize:labelFontSize,left:inputPaddingLeft,top:blurPositionTop}">请输入用户名(动态传参 )</label>
</view>
<!-- 基于静态传参【基于sass指定固定参数,初始化参数不变】-->
<!-- <view class="group_static">-->
<!-- <input v-model="value"-->
<!-- :focus="isFocus"-->
<!-- @focus="onEventTypeFirst('focus')"-->
<!-- @blur="onEventTypeFirst('blur')"/>-->
<!-- <label-->
<!-- :class="{'input-blur':isInputBlur,'input-focus':isInputFocus}"-->
<!-- @click="onEventType('focus')">请输入用户名(静态传参)</label>-->
<!-- </view>-->
</view>
</template>
<script>
export default {
onLoad() {
},
props: {
inputPaddingLeft: {
type: String,
default: "10px",
},
inputHeight: {
type: String,
default: "50px",
},
fontSize: {
type: String,
default: "16px",
},
},
data() {
return {
isInputFocus: false,
isInputBlur: true,
value: "",
blurPositionTop: "25%",
labelFontSize: this.fontSize,
isFocus: false,
};
},
methods: {
onEventType(eventType) {
if (this.value || eventType === "focus") {
this.labelFontSize = "5px";
this.blurPositionTop = "2px";
this.isFocus = true;
console.log("======input");
} else {
this.labelFontSize = this.fontSize;
this.blurPositionTop = "30%";
this.isFocus = false;
console.log("======blur");
}
},
onEventTypeFirst(eventType) {
if (this.value || eventType === "focus") {
this.isInputBlur = false;
this.isInputFocus = true;
this.isFocus = true;
console.log("======input");
} else {
this.isInputBlur = true;
this.isInputFocus = false;
this.isFocus = false;
console.log("======blur");
}
},
},
};
</script>
<style lang="scss">
$font_size: 12px;
$position_left: 10px;
.group_static {
position: relative;
input {
background: yellow;
height: 50px;
font-size: 16px;
margin: 0;
padding: 0 #{$position_left};
}
.input-focus {
position: absolute;
left: $position_left;
top: 2px;
font-size: 5px;
transition: all .3s;
}
.input-blur {
position: absolute;
font-size: 16px;
left: $position_left;
top: 25%;
transition: all .3s;
}
label:hover {
cursor: text;
}
}
.group_dynamic {
position: relative;
/**
基于【动态传入$position_left和$font_size参数】
*/
input {
background: yellow;
margin: 0;
padding: 0;
}
label {
position: absolute;
transition: all .3s;
&:hover {
cursor: text;
}
}
}
</style>