From e285f720878a1217fa2c1a7e6a1e713d196f1ba2 Mon Sep 17 00:00:00 2001 From: handsomezyw <1165966467@qq.com> Date: Sat, 3 Sep 2022 15:17:17 +0800 Subject: [PATCH 1/5] =?UTF-8?q?fix(modal):=20=E4=BF=AE=E5=A4=8Ddialog?= =?UTF-8?q?=E7=9A=84=E4=B8=AA=E7=AC=AC=E4=B8=80=E4=B8=AAicon=E5=92=8C?= =?UTF-8?q?=E5=85=B6=E4=BB=96=E7=9A=84=E4=B8=8D=E5=AF=B9=E9=BD=90#1300?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/modal/src/modal.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/modal/src/modal.scss b/packages/devui-vue/devui/modal/src/modal.scss index 6e4c917693..ce753279be 100644 --- a/packages/devui-vue/devui/modal/src/modal.scss +++ b/packages/devui-vue/devui/modal/src/modal.scss @@ -45,13 +45,14 @@ align-items: center; &-icon { - display: inline-block; + display: flex; + align-items: center; + justify-content: center; vertical-align: middle; margin-right: 8px; width: 24px; height: 24px; line-height: 16px; - text-align: center; } &-text { From 5390d0bca6a0fdb1ebde2420c261b8d747f48f19 Mon Sep 17 00:00:00 2001 From: handsomezyw <1165966467@qq.com> Date: Sat, 3 Sep 2022 18:36:49 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix(select):=20=E4=BF=AE=E5=A4=8Dselect?= =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=80=89=E9=A1=B9=EF=BC=8C=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E4=B8=80=E4=B8=AA=EF=BC=8C=E5=85=B6=E4=BB=96=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=9A=84=E9=80=89=E9=A1=B9=E5=85=A8=E9=83=A8=E8=A2=AB=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E4=BA=86=20#1274?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/select/src/use-select.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/select/src/use-select.ts b/packages/devui-vue/devui/select/src/use-select.ts index dee17c7217..39823fe078 100644 --- a/packages/devui-vue/devui/select/src/use-select.ts +++ b/packages/devui-vue/devui/select/src/use-select.ts @@ -131,7 +131,7 @@ export default function useSelect( const newOption = { name: value, value: value, - _checked: false, + _checked: true, }; return value ? newOption : option; } else { @@ -236,7 +236,7 @@ export default function useSelect( const tagDelete = (data: OptionObjectItem) => { let { modelValue } = props; const checkedItems = []; - for (const child of injectOptions.value.values()) { + for (const child of selectedOptions.value) { if (data.value === child.value) { child._checked = false; } From 219d0e15d179776228c65a37fc6e93222ddbbd1b Mon Sep 17 00:00:00 2001 From: handsomezyw <1165966467@qq.com> Date: Sun, 4 Sep 2022 01:39:24 +0800 Subject: [PATCH 3/5] =?UTF-8?q?fix(tabs):=20=E4=BF=AE=E5=A4=8DTabs?= =?UTF-8?q?=E6=BA=A2=E5=87=BA=E4=B8=8D=E6=88=AA=E6=96=AD=20#1062?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs/src/components/tab-nav/tab-nav.scss | 9 +++++++ .../tabs/src/components/tab-nav/tab-nav.tsx | 26 +++++++++++++++++-- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss b/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss index 4b5ef22fdc..a2dda34916 100644 --- a/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss +++ b/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss @@ -293,6 +293,15 @@ $devui-tab-slider-bg: $devui-list-item-hover-bg; align-items: center; list-style: none; padding-left: 0; + overflow-y: hidden; + overflow-x: scroll; + // 隐藏滚动条 + scrollbar-width: none; + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } li { a { diff --git a/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx b/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx index c0f255e17e..b78b91f1a5 100644 --- a/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx +++ b/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx @@ -1,4 +1,16 @@ -import { computed, defineComponent, inject, onBeforeMount, onMounted, onUpdated, reactive, SetupContext, shallowRef, watch } from 'vue'; +import { + computed, + defineComponent, + inject, + onBeforeMount, + onMounted, + onUpdated, + reactive, + SetupContext, + shallowRef, + watch, + nextTick, +} from 'vue'; import { TabsData, tabsProps, TabsProps, TabsStateData } from '../../tabs-types'; import { useNamespace } from '../../../../shared/hooks/use-namespace'; import { useTabNavRender } from './composables/use-tab-nav-render'; @@ -35,6 +47,16 @@ export default defineComponent({ } ); + const handleTabAdd = () => { + onTabAdd(); + nextTick(() => { + // 使每次添加新tab后，滚动条都在最右侧 + if (tabsEle.value) { + tabsEle.value.scrollLeft = tabsEle.value.scrollWidth; + } + }); + }; + return () => { const closeIconEl = (item: TabsStateData) => { return tabCanClose(item) ? ( @@ -44,7 +66,7 @@ export default defineComponent({ ) : null; }; const newButton = props.addable ? ( -
  • +
    • ) : null; From 8c9bd0c305ed0b25c4ffcbe7f9cc3c02e8852b07 Mon Sep 17 00:00:00 2001 From: handsomezyw <1165966467@qq.com> Date: Sun, 4 Sep 2022 17:34:14 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix(tabs):=20=E4=BF=AE=E5=A4=8Dtabs?= =?UTF-8?q?=E6=BA=A2=E5=87=BA=E9=BC=A0=E6=A0=87=E6=8B=96=E5=8A=A8tab?= =?UTF-8?q?=E4=B8=8D=E4=BC=9A=E6=BB=91=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tabs/src/components/tab-nav/tab-nav.scss | 1 + .../tabs/src/components/tab-nav/tab-nav.tsx | 64 +++++++++++++++---- 2 files changed, 54 insertions(+), 11 deletions(-) diff --git a/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss b/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss index a2dda34916..2f3db29b8c 100644 --- a/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss +++ b/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss @@ -295,6 +295,7 @@ $devui-tab-slider-bg: $devui-list-item-hover-bg; padding-left: 0; overflow-y: hidden; overflow-x: scroll; + user-select: none; // 隐藏滚动条 scrollbar-width: none; -ms-overflow-style: none; diff --git a/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx b/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx index b78b91f1a5..88b535905a 100644 --- a/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx +++ b/packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx @@ -5,6 +5,7 @@ import { onBeforeMount, onMounted, onUpdated, + onUnmounted, reactive, SetupContext, shallowRef, @@ -33,9 +34,60 @@ export default defineComponent({ const { update, beforeMount, mounted, activeClick, tabCanClose } = useTabNavFunction(props, tabs, tabsList, data, ctx, tabsEle); const { onTabRemove, onTabAdd } = useTabNavEvent(ctx); + // 添加新的tab选项 + const handleTabAdd = () => { + onTabAdd(); + nextTick(() => { + // 使每次添加新tab后，滚动条都在最右侧 + if (tabsEle.value) { + tabsEle.value.scrollLeft = tabsEle.value.scrollWidth; + } + }); + }; + + // 鼠标是否在滑动 + let isSlide = false; + // tab滑动 + const handleSlideTab = (mousedownEvent: MouseEvent) => { + if (tabsEle.value) { + // 鼠标按下x坐标 + const mousedownX = mousedownEvent.clientX; + // 当前滚动条距离 + const scrollLeft = tabsEle.value.scrollLeft; + isSlide = true; + // 监听鼠标滑动 + tabsEle.value.addEventListener('mousemove', (mousemoveEvent: MouseEvent) => { + if (isSlide && tabsEle.value) { + // 当前鼠标移动x坐标 + const mousemoveX = mousemoveEvent.clientX; + // 滑动距离 + const scrollWidth = mousemoveX - mousedownX; + tabsEle.value.scrollLeft = scrollLeft - scrollWidth; + } + }); + tabsEle.value.addEventListener('mouseup', () => { + isSlide = false; + }); + tabsEle.value.addEventListener('mouseleave', () => { + isSlide = false; + }); + } + }; + onUpdated(() => update()); onBeforeMount(() => beforeMount()); - onMounted(() => mounted()); + onMounted(() => { + mounted(); + // tab超出容器后监听滑动 + if (tabsEle.value) { + tabsEle.value.addEventListener('mousedown', handleSlideTab); + } + }); + onUnmounted(() => { + if (tabsEle.value) { + tabsEle.value.removeEventListener('mousedown', handleSlideTab); + } + }); watch( () => props.modelValue, @@ -47,16 +99,6 @@ export default defineComponent({ } ); - const handleTabAdd = () => { - onTabAdd(); - nextTick(() => { - // 使每次添加新tab后，滚动条都在最右侧 - if (tabsEle.value) { - tabsEle.value.scrollLeft = tabsEle.value.scrollWidth; - } - }); - }; - return () => { const closeIconEl = (item: TabsStateData) => { return tabCanClose(item) ? ( From f3ef2b64008ea8435b0e8d6fe22d3d5403385fc6 Mon Sep 17 00:00:00 2001 From: handsomezyw <1165966467@qq.com> Date: Mon, 5 Sep 2022 11:33:22 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix(mention):=20=E4=BF=AE=E5=A4=8DMention?= =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E7=9A=84=E8=81=94=E6=83=B3=E6=96=87?= =?UTF-8?q?=E5=AD=97=E9=80=89=E4=B8=AD=E5=90=8E=E5=BA=94=E6=9B=BF=E6=8D=A2?= =?UTF-8?q?=E8=A7=A6=E5=8F=91=E8=BE=93=E5=85=A5=E7=9A=84=E8=81=94=E6=83=B3?= =?UTF-8?q?=E6=96=87=E6=9C=AC=EF=BC=8C=E8=80=8C=E9=9D=9E=E8=BF=BD=E5=8A=A0?= =?UTF-8?q?=20#1303?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/mention/src/mention.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/devui-vue/devui/mention/src/mention.tsx b/packages/devui-vue/devui/mention/src/mention.tsx index 181cc9732e..7f77ca868e 100644 --- a/packages/devui-vue/devui/mention/src/mention.tsx +++ b/packages/devui-vue/devui/mention/src/mention.tsx @@ -63,7 +63,7 @@ export default defineComponent({ e.stopPropagation(); e.preventDefault(); showSuggestions.value = false; - textContext.value += item[props.dmValueParse.value as keyof IMentionSuggestionItem]; + textContext.value = textContext.value.substring(0, 1) + item[props.dmValueParse.value as keyof IMentionSuggestionItem]; }; const arrowKeyDown = (e: KeyboardEvent) => { @@ -98,7 +98,9 @@ export default defineComponent({ e.stopPropagation(); e.preventDefault(); showSuggestions.value = false; - textContext.value += filteredSuggestions.value[currentIndex.value][props.dmValueParse.value as keyof IMentionSuggestionItem]; + textContext.value = + textContext.value.substring(0, 1) + + filteredSuggestions.value[currentIndex.value][props.dmValueParse.value as keyof IMentionSuggestionItem]; emit('select', filteredSuggestions.value[currentIndex.value]); } }