Input 单行文本输入

基于input组件进行封装，用于单行文本输入的场景。

基本使用

<!--基础用法-->
<com-input v-model="name" />

<!--密码框-->
<com-input v-model="pwd" password/>

<!--只能输入整数 -->
<com-input v-model="age" type="int"/>
<com-input v-model="age" type="number"/>

<!--只能输入数字(包含小数点)-->
<com-input v-model="price" type="float"/>
<com-input v-model="price" type="digit"/>

<!--可以清空的输入框-->
<com-input v-model="value" clearable/>

<!--显示边框-->
<com-input v-model="value1" border/>

<!--设置边框颜色-->
<com-input v-model="value1" border border-color="orange"/>

<!--显示圆角边框-->
<com-input v-model="value2" border border-radius="40"/>

<!--自定义尺寸-->
<com-input v-model="value3" border width="300" height="80"/>

搜索功能

实现一个常用搜索框的样式，将mode属性设置为search，则可以实现一个搜索框，

通过监听confirm事件触发搜索操作。

<com-input mode="search" v-model="keyword" border @confirm="handleSearch"/>

<script>
    data(){
        return {
            keyword: "",
        }
    },
    methods: {
        handleSearch(){
            uni.showToast({
                title: "触发搜索"
            })
        },
    }
</script>

输入建议

搜索框模式下，可以设置一些输入建议，方便用户快速选择搜索关键词.

设置auto-complete为true；设置list输入建议列表；

<com-input 
    mode="search" 
    placeholder="搜索湖南省的学校" 
	v-model="keyword" 
    border 
    auto-complete 
	:list="list"
	@confirm="handleSearch"/>

<script>
    data(){
        return {
            keyword: "",
            list: [
                "湖南大学",
                "长沙理工大学",
                "中南大学",
                "湖南女子学院",
            ],
        }
    },
    methods: {
        handleSearch(){
            uni.showToast({
                title: "触发搜索"
            })
        },
    }
</script>

远程搜索输入建议

开启远程搜索，需要将remote设置为true，并监听query事件，在query事件中将异步数据传递给回调函数

<com-input 
    mode="search" 
    placeholder="根据用户编号搜索" 
	v-model="keyword" 
    border 
    auto-complete
    remote
    @query="handleQuery"
	@confirm="handleSearch"/>

<script>
    data(){
        return {
            keyword: "",
        }
    },
    methods: {

        // 第一个参数是当前输入框的内容，第二个参数是函数
       handleQuery(keyword, handler){
            UserList({
                name: keyword,
                current: 1,
                size: 20,
            }).then((res)=>{
                // 如果获取的异步数据是对象数组，第二个参数为对象中需要匹配的字段名称
                handler(res.data, 'name')
            })
        },
        
        handleSearch(){
            uni.showToast({
                title: "触发搜索"
            })
        },
    }
</script>

自定义输入建议面板内容

<com-input 
    mode="search" 
    placeholder="根据用户编号搜索" 
	v-model="keyword" 
    border 
    auto-complete
    remote
    @query="handleQuery"
	@confirm="handleSearch"
>
    <!-- 自定义输入建议面板内容，需自行实现选择事件 -->
    <view class="border-bottom flex y-center pd-20" 
    v-for="user in userList" @click="keyword3 = user.name">
            <view class="mgr-50">姓名：{{ user.name }}</view>
            <view>编号：{{ user.id }}</view>
        </view>
    </com-input>

<script>
    data(){
        return {
            keyword: "",
            userList: [],
        }
    },
    methods: {

       handleQuery(keyword, handler){
            UserList({
                name: keyword,
                current: 1,
                size: 20,
            }).then((res)=>{
                this.userList = res.data
                // 如果获取的异步数据是对象数组，第二个参数为对象中需要匹配的字段名称
                handler(res.data, 'name')
            })
        },
        
        handleSearch(){
            uni.showToast({
                title: "触发搜索"
            })
        },
    }
</script>

API

Props

属性名	说明	类型	必填	默认值
value	输入框的值，可通过v-model绑定	String / Number	false	-
type	输入框数据类型	String	false	text
mode	输入框常用模式 search 搜索框	String	false	text
password	是否展示密码	Boolean	false	false
placeholder	输入框为空时候的占位文本	String	false	请输入
clearable	是否可清空	Boolean	false	false
disabled	是否禁用	Boolean	false	false
readonly	是否只读	Boolean	false	false
showPwdIcon	是否展示密码框后的小眼睛	Boolean	false	true
confirmType	设置键盘右下角按钮的文字，仅在 type="text" 时生效。	String	false	完成
autoComplete	是否开启输入建议	Boolean	false	false
list	输入建议的值	Array	false	[]
remote	远程搜索	Boolean	false	false
triggerOnFocus	是否在获取焦点时触发输入建议	Boolean	false	false
highlight	搜索建议时是否关键字高亮	Boolean	false	true
width	输入框宽度	String	false	100%
height	输入框高度	String	false	60
border	是否显示边框	Boolean	false	false
borderRadius	圆角大小	String / Number	false	10
borderColor	边框颜色	String / Number	false	#d4d4d4
bgColor	背景颜色	String	false	#fff
color	文本颜色	String / Number	false	#666
textAlign	文本对齐方式	String	false	-

Events

事件	说明	回调参数
input	输入文本时触发	文本中的值
clear	点击清空按钮时触发	-
confirm	处理点击键盘右下角确定按钮	-
focus	获取焦点时触发
blur	失去焦点时触发
query	触发远程搜索

Slots

名称	说明	Default Slot Content
prefix	前置内容	-
suffix	后置内容	-
default	输入建议面板内容	-