fix: 修复common文件夹大小写问题
This commit is contained in:
张传龙
parent
4bf8916fdc
commit
fa11b1bc64
@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<n-config-provider :theme-overrides="themStore.naiveThemeOverrides">
|
|
||||||
<n-loading-bar-provider>
|
|
||||||
<n-dialog-provider>
|
|
||||||
<n-notification-provider>
|
|
||||||
<n-message-provider>
|
|
||||||
<slot></slot>
|
|
||||||
<NaiveProviderContent />
|
|
||||||
</n-message-provider>
|
|
||||||
</n-notification-provider>
|
|
||||||
</n-dialog-provider>
|
|
||||||
</n-loading-bar-provider>
|
|
||||||
</n-config-provider>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { defineComponent, h } from 'vue'
|
|
||||||
import { useLoadingBar, useDialog, useMessage, useNotification } from 'naive-ui'
|
|
||||||
|
|
||||||
import { useCssVar } from '@vueuse/core'
|
|
||||||
import { useThemeStore } from '@/store/modules/theme'
|
|
||||||
import { setupMessage, setupDialog } from '@/utils/common/naiveTools'
|
|
||||||
|
|
||||||
const themStore = useThemeStore()
|
|
||||||
watch(
|
|
||||||
() => themStore.naiveThemeOverrides.common,
|
|
||||||
(vars) => {
|
|
||||||
for (const key in vars) {
|
|
||||||
useCssVar(`--${key}`, document.documentElement).value = vars[key]
|
|
||||||
if (key === 'primaryColor') {
|
|
||||||
window.localStorage.setItem('__THEME_COLOR__', vars[key])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
// 挂载naive组件的方法至window, 以便在全局使用
|
|
||||||
function setupNaiveTools() {
|
|
||||||
window.$loadingBar = useLoadingBar()
|
|
||||||
window.$notification = useNotification()
|
|
||||||
|
|
||||||
window.$message = setupMessage(useMessage())
|
|
||||||
window.$dialog = setupDialog(useDialog())
|
|
||||||
}
|
|
||||||
|
|
||||||
const NaiveProviderContent = defineComponent({
|
|
||||||
setup() {
|
|
||||||
setupNaiveTools()
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
return h('div')
|
|
||||||
},
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
@ -1,143 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="wrapper" class="tags-wrapper" @mousewheel.prevent="handleMouseWheel">
|
|
||||||
<template v-if="showArrow && isOverflow">
|
|
||||||
<div class="left" @click="handleMouseWheel({ wheelDelta: 50 })">
|
|
||||||
<icon-ic:baseline-keyboard-arrow-left />
|
|
||||||
</div>
|
|
||||||
<div class="right" @click="handleMouseWheel({ wheelDelta: -50 })">
|
|
||||||
<icon-ic:baseline-keyboard-arrow-right />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div
|
|
||||||
ref="content"
|
|
||||||
class="tags-content"
|
|
||||||
:class="{ overflow: isOverflow && showArrow }"
|
|
||||||
:style="{
|
|
||||||
height: height + 'px',
|
|
||||||
transform: `translateX(${translateX}px)`,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { debounce } from '@/utils'
|
|
||||||
import { isNullOrUndef } from '@/utils/is'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
height: {
|
|
||||||
type: Number,
|
|
||||||
default: 50,
|
|
||||||
},
|
|
||||||
showArrow: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
refreshIsOverflow()
|
|
||||||
})
|
|
||||||
|
|
||||||
const translateX = ref(0)
|
|
||||||
const content = ref(null)
|
|
||||||
const wrapper = ref(null)
|
|
||||||
const isOverflow = ref(false)
|
|
||||||
|
|
||||||
function refreshIsOverflow(isIncrease) {
|
|
||||||
isOverflow.value = content.value.offsetWidth > wrapper.value.offsetWidth
|
|
||||||
if (isNullOrUndef(isIncrease)) return
|
|
||||||
if (isOverflow.value) {
|
|
||||||
handleMouseWheel({ wheelDelta: isIncrease ? -100 : 100 })
|
|
||||||
} else if (!isIncrease && translateX.value < 0) {
|
|
||||||
handleMouseWheel({ wheelDelta: 100 })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function handleMouseWheel(e) {
|
|
||||||
const { wheelDelta } = e
|
|
||||||
const wrapperWidth = wrapper.value.offsetWidth
|
|
||||||
const contentWidth = content.value.offsetWidth
|
|
||||||
/**
|
|
||||||
* @wheelDelta 平行滚动的值 >0： 右移 <0: 左移
|
|
||||||
* @translateX 内容translateX的值
|
|
||||||
* @wrapperWidth 容器的宽度
|
|
||||||
* @contentWidth 内容的宽度
|
|
||||||
*/
|
|
||||||
if (wheelDelta < 0 && -translateX.value > contentWidth - wrapperWidth + 10) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (wheelDelta > 0 && translateX.value > 10) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
translateX.value += wheelDelta
|
|
||||||
|
|
||||||
resetTranslateX(wrapperWidth, contentWidth)
|
|
||||||
}
|
|
||||||
|
|
||||||
const resetTranslateX = debounce(function (wrapperWidth, contentWidth) {
|
|
||||||
if (!isOverflow.value) {
|
|
||||||
translateX.value = 0
|
|
||||||
} else if (-translateX.value > contentWidth - wrapperWidth) {
|
|
||||||
translateX.value = wrapperWidth - contentWidth
|
|
||||||
} else if (translateX.value > 0) {
|
|
||||||
translateX.value = 0
|
|
||||||
}
|
|
||||||
}, 200)
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
refreshIsOverflow,
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.tags-wrapper {
|
|
||||||
display: flex;
|
|
||||||
background-color: #fff;
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
z-index: 9;
|
|
||||||
overflow: hidden;
|
|
||||||
.tags-content {
|
|
||||||
padding: 0 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
transition: transform 0.5s;
|
|
||||||
&.overflow {
|
|
||||||
padding-left: 30px;
|
|
||||||
padding-right: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.left,
|
|
||||||
.right {
|
|
||||||
background-color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin: auto;
|
|
||||||
|
|
||||||
width: 20px;
|
|
||||||
height: 35px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
font-size: 18px;
|
|
||||||
border: 1px solid #e0e0e6;
|
|
||||||
border-radius: 2px;
|
|
||||||
|
|
||||||
z-index: 2;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.left {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.right {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user