uni-app 搜索框应用

搜索框应用

image.png

<template>
  <input type="text" 
    v-model="search"//输入的内容
    confirm-type="search" //confirm-type类型以下有详解
    @confirm="getSearch" //重点是绑定@confirm软键盘回车事件
    placeholder="华为P30 Pro" 
    placeholder-style="font-size:30rpx;color:#B5B9BF"/>
 </template>

export default {
    components: {uniSearchBar},
    data(){
        return{
            search:""
        }
    },
    methods:{
        //@confirm监听软键盘回车事件
        getSearch(){
            console.log(this.search)
            uni.showToast({
                title:"搜索成功",
                duration:2000
                // icon:"none"
                
            })
        }
    }
}

在input框组件将confirm-type属性设为上表中对应的值，手机软键盘右下角按钮就会变成对应的说明的按钮值。 比如设为search，那么手机键盘右下角就会变为‘搜索’，其他类似。

image.png