更新记录

1.1.0（2019-10-07）

• 新增 slot 插槽，可在输入框左右两侧定义自己需要的内容
• 新增 theStyle 属性， 功能等于style
• 新增 overflow 属性，控制 当下拉列表数据超出组件宽度时 的展现形式 滚动条或省略（...）
• 优化 点击组件外部，收起下拉列表

1.0.6（2019-10-05）

无

1.0.5（2019-10-05）

• 加入两个input 自带方法 @focus 聚焦 和@blur 失焦
• 新增 timeDelay 输入数据延时返回时间

平台兼容性

input输入框，带下拉选项

组件属性

bug 特定环境：微信小程序中使用自定义组件嵌套。 将 bjx-input 组件放在 自定义组件中当绑定值改变时，会有报错，但不会影响结果， 组件中定义了setValue、setDisabled两个方法，可避免这个问题

使用方法

<template>
    <view class="content" >
        <view style="text-align: center;" >输入框1</view>
        <!-- 若要查看微信小程序 自定义组件嵌套产生的问题 可打开 -->
<!--        <bjx-list>
                <bjx-inputs ref='inputs1' :value="value1" placeholder='组件嵌套测试' @list="getData1" @select='select1' @focus="focus1" @blur="blur1"/>
        </bjx-list> -->
        <bjx-inputs the-style="margin: 20upx auto;" ref='inputs1' :value="value1" placeholder='请输入内容' @list="getData1" @select='select1' @focus="focus1" @blur="blur1">
            <view slot="left" style="background: #cccccc;padding: 10upx 20upx;color: #fff;">
                https
            </view>
        </bjx-inputs>
        <view style="text-align: center;">输入框2</view>
        <bjx-inputs the-style="margin: 20upx auto;font-size: 46upx;" :value="value2" item-key="value" placeholder='请输入内容' @list="getData2" @select='select2' overflow="hide">
            <view slot="right" style="background: #1AAD19;color: #fff;">
                <button type="primary" style="line-height: 80upx;">搜索</button>
            </view>
        </bjx-inputs>
        <button type="primary"  @tap="setInputsValue">将输入框2的值赋给输入框1</button>
    </view>
</template>

import BjxInputs from '@/components/bjx-inputs/bjx-inputs.vue'
// import bjxList from './list.vue' // 若要查看微信小程序 自定义组件嵌套产生的问题 可打开
export default {
    components: {
        BjxInputs,
        // bjxList // 若要查看微信小程序 自定义组件嵌套产生的问题 可打开
    },
    data() {
        return {
            value1: '',
            value2: '这是默认值2',
            data1: ['这是数据','数组中的字符串数据',' 这个注定是一个很长的选项，可以试试向左滑动一下'],
            data2: [
                {id: 1, value: '这是默认值2'},
                {id: 2, value: '数组中嵌套json格式数据'},
                {id: 3, value: '这种格式比较常用'},
                {id: 4, value: '只需在组件中设定item-key属性即可，如当前可设为 item-key="value"'},
                {id: 5, value: '单行文本超出省略...'},
                {id: 6, value: '这是6'},
                {id: 7, value: '这是7'},
                {id: 8, value: '这是8'},
                {id: 9, value: '这是9'},
                {id: 10, value: '这是10'},
            ]
        }
    },
    methods: {
        // 远程加载数据 返回一个对象，{value: 输入框值, callback: 回调函数}
        getData1(e) {
            // 覆盖 value1
            this.value1 = e.value
            if(!e.value){
                e.callback(this.data1)
            }else{
                let data = []
                this.data1.forEach(item=>{
                    if(item.indexOf(e.value) > -1){
                        data.push(item)
                    }
                })
                e.callback(data)
            }
        },
        getData2(e) {
            console.log(e)
            this.value2 = e.value
            if(!e.value){
                e.callback(this.data2)
            }else{
                let data = []
                this.data2.forEach(item=>{
                    if(item.value.indexOf(e.value) > -1){
                        data.push(item)
                    }
                })
                e.callback(data)
            }
        },
        select1(value){
            this.value1 = value.value
            console.log(1,value)
        },
        select2(value){
            this.value2 = value.value
            console.log(2,value)
        },
        // bug 特定环境：微信小程序中使用自定义组件嵌套
        // 将 bjx-input 组件放在 list 自定义组件中 当绑定值改变时，会有报错，但不会影响结果
        // 可调用组件中的setValue方法避免
        setInputsValue(){
            this.value1 = this.value2
            // this.$refs.inputs1.setValue(this.value)
        },
        focus1(e){
            console.log('框1聚焦', e)
        },
        blur1(e){
            console.log('框1失焦', e)
        }
    }
}

.content .bjx-inputs{border: #cccccc 1upx solid;}