feat(select): editable-select和select组件增加input-cahnge事件 (DevCloudFE#1738)

Co-authored-by: GreatZP <greatzp@greatzp.cn>

Author: fengjiancai

packages/devui-vue/devui/editable-select/src/composables/use-input-event.ts

@@ -64,6 +64,7 @@ export function useInputEvent(
 
  const handleInputChange = () => {
  states.query = states.inputValue;
+ ctx.emit('inputChange', states.query);
  handleQueryChange(states.query);
  };
 

packages/devui-vue/devui/editable-select/src/editable-select.tsx

@@ -21,7 +21,7 @@ import './editable-select.scss';
 export default defineComponent({
  name: 'DEditableSelect',
  props: editableSelectProps,
- emits: ['update:modelValue', 'focus', 'blur', 'clear', 'change', 'visibleChange', 'loadMore'],
+ emits: ['update:modelValue', 'focus', 'blur', 'clear', 'change', 'visibleChange', 'loadMore', 'inputChange'],
  setup(props: EditableSelectProps, ctx: SetupContext) {
  // name space
  const ns = useNamespace('editable-select');

packages/devui-vue/devui/select/src/select.tsx

@@ -29,7 +29,7 @@ import { FlexibleOverlay, Placement } from '../../overlay';
 export default defineComponent({
  name: 'DSelect',
  props: selectProps,
- emits: ['toggle-change', 'value-change', 'update:modelValue', 'focus', 'blur', 'remove-tag', 'clear'],
+ emits: ['toggle-change', 'value-change', 'update:modelValue', 'focus', 'blur', 'remove-tag', 'clear', 'input-change'],
  setup(props: SelectProps, ctx: SetupContext) {
  const app = getCurrentInstance();
  const t = createI18nTranslate('DSelect', app);

packages/devui-vue/devui/select/src/use-select.ts

@@ -268,6 +268,7 @@ export default function useSelect(
 
  const queryChange = (query: string) => {
  filterQuery.value = query;
+ ctx.emit('input-change', query);
  };
 
  const isLoading = computed(() => typeof props.loading === 'boolean' && props.loading);

packages/devui-vue/docs/components/editable-select/index.md

@@ -215,7 +215,7 @@ export default defineComponent({
 
 ```vue
 <template>
- <d-editable-select v-model="value" :width="450" :options="options" allow-clear></d-editable-select>
+ <d-editable-select v-model="value" :width="450" :options="options" allow-clear @input-change="handleInputChange"></d-editable-select>
 </template>
 
 <script>
@@ -240,9 +240,14 @@ export default defineComponent({
  },
  ]);
 
+ const handleInputChange = (val) => {
+ console.log(val);
+ };
+
  return {
  value,
  options,
+ handleInputChange,
  };
  },
 });
@@ -471,6 +476,7 @@ export default defineComponent({
 | blur | `(e: FocusEvent)->void` | 可选，当 input 失去焦点时触发 | |
 | change | `(value:string\|number)=>void` | 可选，选中值发生变化时触发 |
 | visible-change | `(visible:boolean)=>void` | 可选，下拉框显隐时触发 |
+| input-change | `(inputvalue:string)=>void` | 可选，输入框输入内容时触发 |[可清空选项](#可清空选项)|
 
 ### EditableSelect 插槽
 

packages/devui-vue/docs/components/menu/index.md

@@ -374,7 +374,7 @@ const addSelect = () => {
 | open-keys | Array | [] | 默认展开的子菜单 key 值 | [默认展开](#默认展开) |
 | default-select-keys | Array | [] | 默认选择菜单项 key 值 | [基本用法](#基本用法) |
 | router | Boolean | false | 是否启用`vue-router`模式。启用该模式会在激活导航时以 key 作为 path 进行路由跳转 | - |
-| disableOverflowStyle| Boolean | false | 是否禁用宽度过小时菜单的省略样式 | - |
+| disable-overflow-style| Boolean | false | 是否禁用宽度过小时菜单的省略样式 | - |
 
 ### Menu 事件
 

packages/devui-vue/docs/components/select/index.md

@@ -376,7 +376,7 @@ export default defineComponent({
 ```vue
 <template>
  <div class="mb-0">默认筛选</div>
- <d-select class="mb-2" v-model="value1" :allow-clear="true" filter>
+ <d-select class="mb-2" v-model="value1" :allow-clear="true" filter @input-change="handleInput">
  <d-option v-for="(item, index) in options.data" :key="index" :value="item.value" :name="item.name"></d-option>
  </d-select>
  <div class="mb-0">远程搜索</div>
@@ -418,13 +418,17 @@ export default defineComponent({
  options1.data = [];
  }
  };
+ const handleInput = (val) => {
+ console.log(val);
+ };
  return {
  value1,
  value2,
  options,
  options1,
  loading,
  filterFunc,
+ handleInput,
  };
  },
 });
@@ -539,6 +543,7 @@ export default defineComponent({
 | clear | `Function()` | 可选, 通过右侧删除图标清空所有选项时触发 |
 | remove-tag | `Function(value)` | 可选，多选时删除单个 tag 时触发，参数为当前 tag 的值 |
 | load-more | `Function()` | 可选，下拉框有滚动条时滚动到底部触发 |[下拉列表显隐方法](#下拉列表显隐方法)|
+| input-change | `Function(value)` | 可选，输入框输入内容时触发，参数为输入的值 |[筛选、搜索选项](#筛选、搜索选项)|
 
 ### Select 插槽