You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
<!--
|
|
* @Author: weisheng
|
|
* @Date: 2023-06-13 11:34:35
|
|
* @LastEditTime: 2023-08-16 10:51:08
|
|
* @LastEditors: weisheng
|
|
* @Description:
|
|
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-config-provider\wd-config-provider.vue
|
|
* 记得注释
|
|
-->
|
|
<template>
|
|
<view :class="themeClass" :style="themeStyle">
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'wd-config-provider',
|
|
options: {
|
|
virtualHost: true,
|
|
addGlobalClass: true,
|
|
styleIsolation: 'shared'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
type ConfigProviderTheme = 'light' | 'dark'
|
|
interface Props {
|
|
theme?: ConfigProviderTheme
|
|
themeVars?: Record<string, any>
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
theme: 'light',
|
|
themeVars: () => {
|
|
return {}
|
|
}
|
|
})
|
|
|
|
const themeClass = computed(() => {
|
|
return `wot-theme-${props.theme}`
|
|
})
|
|
|
|
const themeStyle = computed(() => {
|
|
return mapThemeVarsToCSSVars(props.themeVars)
|
|
})
|
|
|
|
const kebabCase = (str: string): string => {
|
|
str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase())
|
|
return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase())
|
|
}
|
|
const colorRgb = (str: string) => {
|
|
if (!str) return
|
|
var sColor = str.toLowerCase()
|
|
//十六进制颜色值的正则表达式
|
|
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
|
// 如果是16进制颜色
|
|
if (sColor && reg.test(sColor)) {
|
|
if (sColor.length === 4) {
|
|
var sColorNew = '#'
|
|
for (let i = 1; i < 4; i += 1) {
|
|
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
|
|
}
|
|
sColor = sColorNew
|
|
}
|
|
//处理六位的颜色值
|
|
var sColorChange: number[] = []
|
|
for (let i = 1; i < 7; i += 2) {
|
|
sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
|
|
}
|
|
return sColorChange.join(',')
|
|
}
|
|
return null
|
|
}
|
|
|
|
const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
|
|
if (!themeVars) return
|
|
const cssVars: Record<string, string> = {}
|
|
Object.keys(themeVars).forEach((key) => {
|
|
cssVars[`--wot-${kebabCase(key)}`] = themeVars[key]
|
|
})
|
|
|
|
return cssVars
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|