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


        },

    },
    
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐