From 950cd515498fead57432471c9b99a71cd41cf6df Mon Sep 17 00:00:00 2001 From: zxlfly Date: Sun, 27 Mar 2022 13:57:12 +0800 Subject: [PATCH] =?UTF-8?q?docs(auto-complete):=20=E5=AE=8C=E5=96=84?= =?UTF-8?q?=E6=96=87=E6=A1=A3=EF=BC=8C=E4=BF=AE=E6=94=B9=E9=83=A8=E5=88=86?= =?UTF-8?q?=E5=85=B3=E8=81=94=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../auto-complete/src/auto-complete.scss | 6 + .../src/composables/use-custom-template.ts | 18 +-- .../docs/components/auto-complete/index.md | 141 ++++++++++-------- .../en-US/components/auto-complete/api-en.md | 137 +++++++++-------- 4 files changed, 167 insertions(+), 135 deletions(-) diff --git a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss index 4632fc8e0f..88eba5ad52 100644 --- a/packages/devui-vue/devui/auto-complete/src/auto-complete.scss +++ b/packages/devui-vue/devui/auto-complete/src/auto-complete.scss @@ -16,6 +16,12 @@ } } +.devui-auto-complete { + .devui-form-control { + padding: 4px 8px; + } +} + .devui-auto-complete, .devui-auto-complete-menu { .active { diff --git a/packages/devui-vue/devui/auto-complete/src/composables/use-custom-template.ts b/packages/devui-vue/devui/auto-complete/src/composables/use-custom-template.ts index 95a71660a5..0b83da0f5f 100644 --- a/packages/devui-vue/devui/auto-complete/src/composables/use-custom-template.ts +++ b/packages/devui-vue/devui/auto-complete/src/composables/use-custom-template.ts @@ -7,32 +7,32 @@ type CustomRenderSoltsType = { export default function useCustomTemplate(ctx: SetupContext,modelValue: Ref): any { const itemTemplate = (item: any, index: number) => { const arr = { item, index }; - if (ctx.slots.itemTemplate) { - return ctx.slots.itemTemplate(arr); + if (ctx.slots.item) { + return ctx.slots.item(arr); } return null; }; const noResultItemTemplate = () => { - if (ctx.slots.noResultItemTemplate) { - return ctx.slots.noResultItemTemplate(modelValue.value); + if (ctx.slots.nothing) { + return ctx.slots.nothing(modelValue.value); } return null; }; const searchingTemplate = () => { - if (ctx.slots.searchingTemplate) { - return ctx.slots.searchingTemplate(modelValue.value); + if (ctx.slots.searching) { + return ctx.slots.searching(modelValue.value); } return null; }; const customRenderSolts = () => { const slots: CustomRenderSoltsType = {}; - if (ctx.slots.itemTemplate) { + if (ctx.slots.item) { slots['itemTemplate'] = itemTemplate; } - if (ctx.slots.noResultItemTemplate) { + if (ctx.slots.nothing) { slots['noResultItemTemplate'] = noResultItemTemplate; } - if (ctx.slots.searchingTemplate) { + if (ctx.slots.searching) { slots['searchingTemplate'] = searchingTemplate; } return slots; diff --git a/packages/devui-vue/docs/components/auto-complete/index.md b/packages/devui-vue/docs/components/auto-complete/index.md index 1cdc2aa8f8..8f2f1ab5d8 100644 --- a/packages/devui-vue/docs/components/auto-complete/index.md +++ b/packages/devui-vue/docs/components/auto-complete/index.md @@ -17,12 +17,11 @@ :delay="1000" :source="source" v-model="value" - :allowEmptyValueSearch="allowEmptyValueSearch" - :selectValue="selectValue" - :transInputFocusEmit="transInputFocusEmit" - :appendToBody="true" - :appendToBodyDirections="appendToBodyDirections" - :dAutoCompleteWidth="450" + :allow-empty-value-search="allowEmptyValueSearch" + :select-value="selectValue" + :trans-input-focus-emit="transInputFocusEmit" + :position="position" + :width="420" > @@ -49,25 +48,20 @@ export default defineComponent({ 'LiveScript', 'CoffeeScript', ]) - const selectValue = ()=>{ - console.log('selectValue') + const selectValue = (e)=>{ + console.log('selectValue',e) } const transInputFocusEmit = ()=>{ console.log('transInputFocusEmit') } - const appendToBodyDirections = ref({ - originX: 'left', - originY: 'bottom', - overlayX: 'left', - overlayY: 'top', - }) + const position = ref(['bottom']) return { value, source, allowEmptyValueSearch, transInputFocusEmit, selectValue, - appendToBodyDirections + position } } }) @@ -148,20 +142,20 @@ export default defineComponent({ ::: ### 自定义数据匹配方法 -通过 searchFn 自定义数据的匹配方法和返回的数据格式。 +通过 search-fn 自定义数据的匹配方法和返回的数据格式。 :::demo ```vue