@pzy915/backend-layout

作用

基于 vue3 的一个管理系统布局组件，已实现上下布局，左右布局，混合布局以及不同布局的动态切换

详细使用文档: vue3 管理系统布局组件

获取组件

pnpm add @pzy915/backend-layout

局部引入

<script setup lang="ts">
  import {
    TopCenterLayout,
    LeftRightLayout,
    MixLayoutOne,
    MixLayoutTwo,
    BackendLayout,
  } from '@pzy915/backend-layout'
  import '@pzy915/backend-layout/dist/style.css'
</script>

全局引入

// main.ts
import BackendLayoutLib from '@pzy915/backend-layout'
import '@pzy915/backend-layout/dist/style.css'

import { createApp } from 'vue'
const app = createApp(App)
app.use(BackendLayoutLib)

vue 組件调用

<template>
  <!-- 上中布局(只是示例省略了属性和slot,请根据实际使用添加) -->
  <TopCenterLayout></TopCenterLayout>

  <!-- 左右布局(只是示例省略了属性和slot,请根据实际使用添加) -->
  <LeftRightLayout></LeftRightLayout>

  <!-- 混合布局一(只是示例省略了属性和slot,请根据实际使用添加) -->
  <MixLayoutOne></MixLayoutOne>

  <!-- 混合布局二(只是示例省略了属性和slot,请根据实际使用添加) -->
  <MixLayoutTwo></MixLayoutTwo>

  <!-- 可实现不同布局风格的切换(只是示例省略了属性和slot,请根据实际使用添加) -->
  <BackendLayout></BackendLayout>
</template>

特点

• 实现简洁
• 文档详细
  • 包含组件实现详解，拒绝黑盒组件
  • 包含大量使用场景分析与实践

浏览器兼容性

| Chrome | Edge | Safari | Firefox | Opera | IE | Chrome for Android | Safari on iOS | Opera Mobile | Android Browser | Firefox for Android | | :----- | :--- | :----- | :------ | :---- | :----- | :----------------- | :------------ | :----------- | :-------------- | :------------------ | | 49+ | 16+ | 10+ | 31+ | 36+ | 不支持 | 108+ | 10+ | 72+ | 108+ | 107+ |

为什么是这些浏览器版本？

因为依赖 vue3,同时组件实现用到了css变量和flex布局，从 can i use 网站可以查看这两个 css 特性在不同浏览器以及不同版本的支持情况

关于 vue3 对低版本浏览器的兼容性支持，需要使用@vitejs/plugin-legacy插件在具体项目中自行实现