input实时输入

<<< 几天前，在接到甲方要求说，手写输入要如下图（实时输入）显示：

因为现在大部分人都是用键盘，所以我们一般习惯输入完了以后在输入法中确认一下，才会输入到输入框。
这个时候我们看不出问题所在

因为甲方大部分是用 【手写 】 的，所以当我们采取以下策略的时候（此时会出现手写预输入的字不显示的问题）
一般在写input的时候是这样的：
<input @input="inputChange" :value="value" class="input"/>
...
value: "",
...
input(e) {
this.value = e.detail.value;
}

经测试可以看见当我们把input写成上面的时候就会发现，用键盘打字是会显示实时结果的，
但是当我们用手写的时候就发现预输入第一个字的时候（此时还没有确认那个字（处于预输入阶段）），
会发现我们就无法像抖音，百度，酷狗那样实时搜索，只能等到字被确认的时候才会显示出来。

<<<<<<<<< 于是百度了很多地方，大部分的解决办法都是https://www.cnblogs.com/pyspang/p/11402947.html
使用compositionstart、compositionend来解决。但是后面我发现这个方法只适用于html界面，并不适用于uniapp中的vue,
貌似uniapp官方已经封装了这个东西（因为在 vue 的关于input源码中是可以使用compositionstart、compositionend的，但是
在uniapp里面用不了）

。。。。过了比较久的时间都没有解决（期间想过用plus监听键盘按键值，但实际上根本监听不到，头疼）。。。。

《〈不久前突然想到了两个办法来解决手写的问题〉》

【第一种方法比较自由可以自由更改样式 】

【第二种方法，使用原生顶部搜索栏，不怎么自由，但是可以解决上面问题 】

第一种方法：（比较推荐）
我们可以这样写：

<template>  
    <view>  
        <input placeholder="请输入信息" v-model="inputValue" @input="inputChange" class="input"/>  
    <view/>  
<template/>  
<script>  
   export default {  
    data() {  
        return {  
            inputValue: ""  
        }  
    },  
        //采用监听  
        watch:{  
        //双向绑定  
        value(val) {  
            this.inputValue = val;  
        },  
    },  
        methods: {  
        inputChange(){  
            console.log(this.inputValue) //这个打印的值就是实时输入的值  
                        //下面就可以处理实时输入的逻辑了  
                        。。。。  
        },  
        }  
   }  
<script/>  
<style>  
    .input{  
            font-size: 20px;  
        }  
</style>

第二种方法

第一步：配置pages.json
//在要配置的页面的style中写下如下内容

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages  
        {  
            "path": "pages/index/index",  
            "style": {  
                "app-plus": {  
                    "titleNView": {  
                        "type": "default",//透明渐变导航栏 App-nvue 2.4.4  支持  
                        "searchInput": {  
                            "backgroundColor": "#fbfcff",  
                            "borderRadius": "20px", //输入框圆角  
                            "placeholder": "请输入搜索内容",  
                            "disabled": false //disable时点击输入框不置焦，可以跳到新页面搜索  
                        }  
                    }  
                }  
            }  
        },  
                ....  
]  

**第二步：在vue页面【script 】中写下**  
<script>  
   export default {  
    data() {  
        return {  
            inputValue: ""  
        }  
    },  
        onNavigationBarSearchInputChanged(e) {  
                this.inputValue = e.text;  
                console.log(this.inputValue) //这个打印的值就是实时输入的值  
                //下面就可以处理实时输入的逻辑了  
                。。。。  
        }  
        。。。  
   }  
<script/>

如上解决了实时输入中文带来的麻烦（特别是手写带来的麻烦，毕竟还有很多老年用户，细节、细节、细节）