select-input（选择输入框）

基础用法

示例：

代码示例：

选择输入框组件选择的默认是name

vue

<template>
  <div class="bs-bg-color-white w230">
    <v-select-input v-model="data" :data="OPTIONS" trigger-on-focus @change="onChange"></v-select-input>
  </div>
</template>

<script>
/**
 * 选项数据
 */
const OPTIONS = [
  {
    code: '01',
    name: '一',
  },
  {
    code: '02',
    name: '二',
  },
  {
    code: '03',
    name: '三',
  },
];
export default {
  data() {
    return {
      data: '',
      OPTIONS
    };
  },
  methods: {
    /**
     * change事件
     */
    onChange(data) {
      console.log('data: ', data);
      // data:  二
    },
  },
};
</script>

属性：

参数	说明	类型	可选值	默认值
data	选项数据	Array	-	[]
value	绑定的值	String, Number	-	''
props	props值	String	-	'name'
disabled	是否禁用	Boolean	-	false
encrypt	是否加密显示（如需要加密，需要将数据中传入显示的位数）	Boolean	-	false
triggerOnFocus	是否在输入框focus时显示选项	Boolean	-	false
placeholder	placeholder	String	-	''
tip	提示信息	String	-	'输入后匹配输入建议'
tooltip	是否显示提示信息	Boolean	-	false
prefixVisible	头部区域是否显示	Boolean	-	true
filterFunc	自定义过滤方法	Function	-	-

事件：

事件名	说明	参数	参数说明
visible-change	显示隐藏变化	value	true/false(显示/隐藏)
input	输入事件	value	-
focus	获取焦点事件	event	-
blur	失去焦点事件	event	-
clear	清除数据事件	-	-
change	绑定的值更改事件	value, data	选择的值/选择的完整数据

方法：

方法名	说明	参数	参数说明
focus	使输入框获取焦点	-	-
blur	使输入框失去焦点	-	-
scroll	使组件内容区域滚动	scrollTop	滚动距离

插槽：

插槽名	说明	参数	参数说明
-	内容项插槽	node	当前选项数据
option-right	内容项右侧插槽	data	当前选项数据
tooltip	提示信息内容	data	提示信息数据

select-input（选择输入框） ​

基础用法 ​

示例： ​

代码示例： ​

属性： ​

事件： ​

方法： ​

插槽： ​

select-input（选择输入框）

基础用法

示例：

代码示例：

属性：

事件：

方法：

插槽：