@uni-helper/vite-plugin-uni-layouts

Vite 下 uni-app 的可定制布局框架

安装

1pnpm i -D @uni-helper/vite-plugin-uni-layouts

使用

配置

1// vite.config.ts
2import { defineConfig } from 'vite'
3import uni from '@dcloudio/vite-plugin-uni'
4import UniLayouts from '@uni-helper/vite-plugin-uni-layouts'
5
6export default defineConfig({
7  plugins: [UniLayouts(), uni()],
8})

创建布局

在 src/layouts 下创建布局

1<!-- default.vue -->
2<template>
3  <slot>main</slot>
4</template>

应用布局

在 pages.json 中的页面中添加 layout 配置

1// pages.json
2{
3  // ...
4  "pages": [{
5    "path": "pages/index/index",
6    // 可选, 这是默认值
7    "layout": "default"
8  }]
9  // ...
10}

禁用布局

1// pages.json
2{
3  // ...
4  "pages": [{
5    "path": "pages/index/index",
6    "layout": false
7  }]
8  // ...
9}

动态布局和额外插槽

你需要先禁用页面的布局， 然后使用内置组件 <uni-layout />, 使用 name 属性指定布局，支持动态绑定 name、ref 等任意属性

1<script setup>
2const defaultName = ref('default')
3</script>
4<template>
5  <uni-layout :name="defaultName">
6    <template #header>uni-layout header</template>
7    use slot
8    <template #footer>uni-layout footer</template>
9  </uni-layout>
10</template>

ref

只需声明一个 ref 变量 uniLayout 即可访问

1<script setup>
2const uniLayout = ref()
3</script>

或者

1<script>
2export default {
3  onLoad() {
4    console.log(this.$refs.uniLayout)
5  }
6}
7</script>

配置

see type.ts

注意

layout 插件并非使用了什么魔法，它只做了两件事：

1. 自动扫描并全局注册 layouts 目录下的组件
2. 将页面使用 layout 组件包裹起来 所以，在微信小程序下，如果你使用了 web-view , 那么不会生效。

如果你使用 vite-plugin-uni-pages, 只需使用 route-block

1<route lang="json">
2{
3  "layout": "anyLayout"
4}
5</route>