input输⼊框显⽰默认⽂字
input 输⼊框显⽰默认⽂字
我做了⼀个有下拉框的input输⼊框组件，在输⼊框显⽰默认设置的⽂字，可以通过设置input的v-model的绑定内容来设置⼦组件vue：
<div class="input-select-container" @blur="onConBlur()"  id="input-select-container">
<div class="input-container FlexRow">
<input class="drop-input":class="{'warning':IsInValid,'lock':IsUnEnabled}"
v-bind:disabled="!inputOption || IsUnEnabled"
@blur="onBlur()"
@focus="onFocus()"
v-model="inputVal":placeholder="tip">
<div class="dropsvg-container">
<div class="dropsvg" @click="clickDropDown()"></div>
</div>
</div>
<div class="edit-dropdown" v-if="dropDown" id="edit-dropdown">
<ul class="drop-list">
<li @click="clickDropItem(item)" v-for=" item in OptionValue">{{item}}</li>
</ul>
</div>
</div>
⼦组件ts:
inputVal的值为input框显⽰的内容
setup(props:any, ctx){
var inputVal =ref('');
var lastValue ='';
var dropDown =ref(false);
if(props.parameter !==undefined){
inputVal.value = props.Value;
}
function onFocus(){
lastValue = props.Value;
}
function onConBlur(){
dropDown.value =false;
}
function onBlur(){
dropDown.value =false;
}
function clickDropItem(item:any){
inputVal.value = item;
dropDown.value =false;
}
function clickDropDown(){
if(!props.IsUnEnabled){
lastValue = props.Value;
dropDown.value =!dropDown.value;
}
}
function closeDropDown(){
dropDown.value =false;
}
return{
input绑定onblur事件dropDown, inputVal, onFocus, onBlur, clickDropItem, clickDropDown, closeDropDown, onConBlur,
}
}
⽗组件vue
<SelectBox class="param1" :parameter="'Bed Type'":boxWidth="'25'":Value="data[0]":OptionValue="data"></SelectBox>⽗组件ts
import SelectBox from'../../../../components/common/pr/pr-select-input-box/pr-select-input-box.vue';
export default{
components:{
SelectBox
},
data(){
return{
bedId:1,
isSelect:false,
data:['1-mouse Bed','2-mouse Bed','3-mouse Bed','4-mouse Bed']
}
},
methods:{
selectBed(id){
if(this.bedId == id){
this.isSelect =!this.isSelect
}
this.bedId = id
},
},
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。