input 输入框显示默认文字
input 输入框显示默认文字我做了一个有下拉框的input输入框组件,在输入框显示默认设置的文字,可以通过设置input的v-model的绑定内容来设置子组件vue:<div class="input-select-container" @blur="onConBlur()"id="input-select-container" ><div class="input-conta
·
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 {
dropDown, inputVal, onFocus, onBlur, clickDropItem, clickDropDown, closeDropDown, onConBlur,
}
}
父组件vue
<SelectBox class="param1" style="margin-left:1.5rem" :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
},
},
}
更多推荐
已为社区贡献7条内容
所有评论(0)