更新记录

1.0.0（2024-11-06） 下载此版本

初版

平台兼容性

x-container

页面根容器组件

项目所有页面使用该组件作为根元素，方便做到一些全局能力，全局loading，全局弹窗，CSS变量，使用CSS变量实现主题切换

示例

my-container组件（需自行实现）

<template>
    <x-container :theme-style="themeStyle[theme]">
        <slot></slot>
    </x-container>
</template>

<script>
    export default {
        name: "my-container",
        data() {
            return {
                // 主题可以放到全局状态管理
                theme: 'dark',
                themeStyle: {
                    dark: {
                        '--color': '#000'
                    },
                    light: {
                        '--color': 'skyblue'
                    }
                }
            };
        }
    }
</script>

页面使用

<template>
    <my-container>
        <text></text>
    </my-container>
</template>

<style>
    text {
        color: var(--color);
    }
</style>

Slots

Props

Emits

实践模版项目