更新记录

1.0.4（2024-04-28） 下载此版本

readme调整

1.0.3（2024-04-26） 下载此版本

将弹出日历去掉

1.0.2（2024-04-26） 下载此版本

功能调整

平台兼容性

tf-input

1. 组件作用
   • 关键字的搜索框
   • 若需要点击图标弹出日历，可以下载tf-calendar配合使用使用
2. 基础组件引用例子

<template>
    <view class="content">
        <TfInput 
        v-model:value="value"
        @timeConfirmation="timeConfirmation"
        @search="searchFn"
        >
        </TfInput>
    </view>
</template>

<script>
    import TfInput from '../../uni_modules/tf-input/components/tf-input/tf-input.vue'
    export default {
        components:{
            TfInput
        },
        data() {
            return {
                value: '测试'
            }
        },
        methods: {
            timeConfirmation(value){
                console.log('时间',value)
            },
            searchFn(keyValue){
                console.log('搜索',keyValue)
            }
        }
    }
</script>

<style>
</style>

3. 结合TfCalendar日历一起使用例子

<template>
    <view class="content">
        <TfInput 
        v-model:value="value"
        @inputTimeChange= "inputTimeChange"
        @clickDate="clickDate"
        >
        </TfInput>
        <TfCalendar
        v-model:value="show"
        mode="range"
        @timeChange="timeChange"
        />
    </view>
</template>

<script>
    import TfInput from '../../uni_modules/tf-input/components/tf-input/tf-input.vue'
    import TfCalendar from '../../uni_modules/tf-calendar/components/tf-calendar/tf-calendar.vue'
    export default {
        components:{
            TfInput,
            TfCalendar
        },
        data() {
            return {
                value: '',
                show:false
            }
        },
        methods: {
            inputTimeChange(value){
                console.log(value)
            },
            clickDate(){
                this.show = true
            },
            timeChange(e){
                console.log(e)
            }
        }
    }
</script>

<style>
</style>

4. 主要属性说明

5. 主要方法说明