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]); } } 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 { 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; } 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..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 @@ -293,6 +293,16 @@ $devui-tab-slider-bg: $devui-list-item-hover-bg; align-items: center; list-style: none; padding-left: 0; + overflow-y: hidden; + overflow-x: scroll; + user-select: none; + // 隐藏滚动条 + 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..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 @@ -1,4 +1,17 @@ -import { computed, defineComponent, inject, onBeforeMount, onMounted, onUpdated, reactive, SetupContext, shallowRef, watch } from 'vue'; +import { + computed, + defineComponent, + inject, + onBeforeMount, + onMounted, + onUpdated, + onUnmounted, + 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'; @@ -21,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, @@ -44,7 +108,7 @@ export default defineComponent({ ) : null; }; const newButton = props.addable ? ( -