From fa1846142a56e3cb7a546d7117c5db4bd679b72c Mon Sep 17 00:00:00 2001 From: 337547038 <337547038@qq.com> Date: Wed, 8 Dec 2021 21:25:04 +0800 Subject: [PATCH 01/17] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/table/README.md | 27 +++++---- src/packages/table/table.vue | 104 +++++++++++++++++++++-------------- 2 files changed, 77 insertions(+), 54 deletions(-) diff --git a/src/packages/table/README.md b/src/packages/table/README.md index a048450..207fa41 100644 --- a/src/packages/table/README.md +++ b/src/packages/table/README.md @@ -550,7 +550,9 @@ export default { ``` ### 表头参数也支持slots + 默认slots为当前props,表头时为当前props-header + ```vue demo diff --git a/src/packages/select/README.md b/src/packages/select/README.md index b6bf24b..149ca76 100644 --- a/src/packages/select/README.md +++ b/src/packages/select/README.md @@ -375,7 +375,11 @@ export default { |change |选中值发生变化时触发| |beforeChange |选择前事件| |limitChange |超出最大选择数时事件,仅`multiple=true`和设定了`multipleLimit`时有效| -|searchChange |可搜索时,搜索框事件| +| input | 可搜索时输入框改变事件 | +| blur | 可搜索时输入框焦点事件 | +| focus | 可搜索时输入框获得焦点事件 | +| clear | 清空事件 | +| delete | 删除单个选项,多选时有效 | ### Select Method diff --git a/src/packages/select/select.vue b/src/packages/select/select.vue index 41e952d..03c5a95 100644 --- a/src/packages/select/select.vue +++ b/src/packages/select/select.vue @@ -64,7 +64,7 @@ export default defineComponent({ size: pType.string(), collapseTags: pType.bool() // 多选时是否将选中值按文字的形式展示 }, - emits: ['update:modelValue', 'change', 'limitChange', 'searchChange'], + emits: ['update:modelValue', 'change', 'limitChange', 'input', 'delete', 'blur', 'clear'], setup(props, {emit}) { const el = ref() const selectDown = ref() @@ -115,6 +115,7 @@ export default defineComponent({ delete item._disabled }) }, 500) + emit('blur', value) } const inputChange = (value: string) => { // 默认情况下仅对当前下拉数据进行筛选 @@ -129,7 +130,7 @@ export default defineComponent({ }) } state.setFirst = true - emit('searchChange', value) + emit('input', value) } // 设置初始值 const setFirstText = () => { @@ -241,11 +242,13 @@ export default defineComponent({ const clearClick = () => { state.checked = [] emitCom() + emit('clear') } // 删除选项事件 const deleteClick = (index: number) => { state.checked.splice(index, 1) emitCom() + emit('delete') } provide(`${prefixCls}GetChildOption`, (item: FormControlOption) => { // options.value.push(item) diff --git a/src/packages/selectDown/README.md b/src/packages/selectDown/README.md index 8ed8685..dc071ca 100644 --- a/src/packages/selectDown/README.md +++ b/src/packages/selectDown/README.md @@ -178,14 +178,15 @@ export default { ### SelectDown Event -|参数| 说明 | -|----------|--------------| -|change | 可搜索时输入框改变事件 | -|input | 可搜索时输入框改变事件 | -|blur | 可搜索时输入框焦点事件 | -|toggleClick | 点击展开收起事件 | -|clear | 清空事件 | -|delete | 删除单个选项,多选时有效 | +| 参数 | 说明 | +|-------------|----------------| +| change | movelValue改变事件 | +| input | 可搜索时输入框改变事件 | +| blur | 可搜索时输入框焦点事件 | +| focus | 可搜索时输入框获得焦点事件 | +| toggleClick | 点击展开收起事件 | +| clear | 清空事件 | +| delete | 删除单个选项,多选时有效 | ### SelectDown Methods diff --git a/src/packages/selectDown/index.vue b/src/packages/selectDown/index.vue index 39738ca..f538654 100644 --- a/src/packages/selectDown/index.vue +++ b/src/packages/selectDown/index.vue @@ -34,8 +34,8 @@ :disabled="disabledOk" :placeholder="valueLabel.length===0?placeholder:''" @input="inputInput" - @change="inputChange" - @blur="inputBlur($event,1)"> + @focus="inputFocus" + @blur="inputBlur"> @@ -45,10 +45,7 @@ :readonly="!filterable" :placeholder="placeholder" :class="inputCls" - :disabled="disabledOk" - @input="inputInput" - @change="inputChange" - @blur="inputBlur"> + :disabled="disabledOk"> { emit('update:modelValue', state.valueLabel) + emit('change', state.valueLabel) } - const inputChange = (e: Event) => { + /*const inputChange = (e: Event) => { if (props.filterable) { const {value} = e.target as HTMLInputElement emit('change', value) } - } + }*/ const inputInput = (e: Event) => { if (props.filterable) { const {value} = e.target as HTMLInputElement emit('input', value) } } - const inputBlur = (e: any, type?: number) => { + const inputBlur = (e: any) => { if (props.filterable) { const {value} = e.target as HTMLInputElement emit('blur', value) @@ -199,9 +197,15 @@ export default defineComponent({ }*/ // 恢复输入框的值 state.valueLabel = JSON.parse(JSON.stringify(props.modelValue || [])) - if (type === 1) { - e.target.value = '' - } + //if (type === 1) { + e.target.value = '' + //} + } + } + const inputFocus = (e: any) => { + if (props.filterable) { + const {value} = e.target as HTMLInputElement + emit('focus', value) } } // 计算插入body的位置样式 @@ -280,9 +284,10 @@ export default defineComponent({ el, selectDown, inputCls, - inputChange, + // inputChange, inputInput, inputBlur, + inputFocus, downPanelStyle, slideUp, slideDown, -- Gitee From add67e28aca30883bc8ca1516b6995696d633670 Mon Sep 17 00:00:00 2001 From: 3375477038 <3375477038@qq.com> Date: Fri, 11 Mar 2022 16:09:06 +0800 Subject: [PATCH 14/17] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 2 +- src/packages/cascader/index.vue | 2 +- src/views/test.vue | 387 +++++++++++++------------------- 3 files changed, 160 insertions(+), 231 deletions(-) diff --git a/src/App.vue b/src/App.vue index 65a3d20..6f738cf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -36,7 +36,7 @@ import {defineComponent, ref} from 'vue' export default defineComponent({ setup() { - let visible = true + let visible = false const getName = (name: string) => { return name.substring(0, 1).toUpperCase() + name.substring(1) } diff --git a/src/packages/cascader/index.vue b/src/packages/cascader/index.vue index 84c8de2..5dc4231 100644 --- a/src/packages/cascader/index.vue +++ b/src/packages/cascader/index.vue @@ -185,7 +185,7 @@ const toggleClick = (visible: boolean) => { state.checked = (props.modelValue.join(',')).split(',') const firstOpt = filterFormatOptions() if (firstOpt && firstOpt.length > 0) { - state.downDataList.push() // 首先添加第一级,第一级的_tid为空 + state.downDataList.push(firstOpt) // 首先添加第一级,第一级的_tid为空 } const value: any = props.modelValue[0] // 多选时默认展开第一组 if (value && value.length > 0) { diff --git a/src/views/test.vue b/src/views/test.vue index 10179e5..ffcf390 100644 --- a/src/views/test.vue +++ b/src/views/test.vue @@ -1,307 +1,236 @@ ``` +### 异步加载 + +通过`lazy`开启异步加载,并通过`lazyload`来设置加载数据源的方法。 `lazyload`方法有两个参数,第一个参数`node`为当前点击的节点,第二个`resolve`为数据加载完成的回调(必须调用) + +```vue demo + + + + +``` + ## API ### Cascader -| 参数 | 类型 | 说明 | -|---------------|---------------|-----------------------------------------------------------------------------------------------| -| v-model | array | 显示的值 | -| width | string | 组件宽 | -| multiple | boolean/false | 多选模式 | -| collapseTags | boolean/false | 多选模式下是否折叠Tag | -| clear | boolean/false | 是否可清空 | -| filterable | boolean/false | 是否可搜索选项 | -| size | string | 大小 | -| placeholder | string | 占位符 | -| disabled | boolean/false | 禁用状态 | -| direction | number | 下拉的方向动画,0默认 1向下 2向上 | -| downClass | string | 下拉面板类 | -| downStyle | object | 下拉面板样式 | -| appendToBody | boolean/false | 下拉插入到body | -| downHeight | number | 下拉的面板的高 | -| icon | string | icon图标 | -| options | object | 下拉面板选项数据 | -| optionsKey | object | 指定选择数据的`label`和`value`属于,默认{label:‘label’,value:‘value’} | -| showAllLevels | boolean/true | 定义了是否显示完整的路径,将其赋值为`false`则仅显示最后一级 | -| lazy | boolean/false | 是否动态加载子节点,需与 `lazyLoad` 方法结合使用 | +| 参数 | 类型 | 说明 | +|---------------|---------------|------------------------| +| v-model | array | 显示的值 | +| width | string | 组件宽 | +| multiple | boolean/false | 多选模式 | +| collapseTags | boolean/false | 多选模式下是否折叠Tag | +| clear | boolean/false | 是否可清空 | +| filterable | boolean/false | 是否可搜索选项 | +| size | string | 大小 | +| placeholder | string | 占位符 | +| disabled | boolean/false | 禁用状态 | +| direction | number | 下拉的方向动画,0默认 1向下 2向上 | +| downClass | string | 下拉面板类 | +| downStyle | object | 下拉面板样式 | +| appendToBody | boolean/false | 下拉插入到body | +| downHeight | number | 下拉的面板的高 | +| icon | string | icon图标 | +| options | object | 下拉面板选项数据 | +| optionsKey | object | 指定选择数据的`label`和`value`属于,默认{label:‘label’,value:‘value’} | +| showAllLevels | boolean/true | 定义了是否显示完整的路径,将其赋值为`false`则仅显示最后一级 | +| lazy | boolean/false | 是否动态加载子节点,需与 `lazyLoad` 方法结合使用 | | lazyLoad | function | 加载动态数据的方法,仅在 `lazy` 为 `true` 时有效,function(node, resolve),node为当前点击的节点,resolve为数据加载完成的回调(必须调用) | -| checkAny | boolean/false | 启用该功能后,选择任意一级选项。 | -| emptyText | string | 无下拉数据提示文案 | +| checkAny | boolean/false | 启用该功能后,选择任意一级选项。 | +| emptyText | string | 无下拉数据提示文案 | ### Cascader Event diff --git a/src/packages/cascader/index.vue b/src/packages/cascader/index.vue index 5e009f0..6712b5f 100644 --- a/src/packages/cascader/index.vue +++ b/src/packages/cascader/index.vue @@ -13,12 +13,10 @@ @delete="deleteClick" @input="inputChange" @toggleClick="toggleClick"> - -