@snicesoft/vite-plugin-uni-layouts
v0.0.1
Published
Customizable layouts framework for uni-app applications using Vite.
Downloads
3
Readme
@snicesoft/vite-plugin-uni-layouts
Vite 下 uni-app 的可定制布局框架
安装
pnpm i -D @snicesoft/vite-plugin-uni-layouts
使用
配置
// vite.config.ts
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import UniLayouts from "@snicesoft/vite-plugin-uni-layouts";
export default defineConfig({
plugins: [UniLayouts(), uni()],
});
hbx建议使用easycom,可兼容nvue。pages.json
增加easycom配置,如下:
{
"easycom": {
"autoscan": true,
"custom": {
"^layout-(.*)-uni": "@/layouts/$1.vue"
}
},
"pages": [...]
}
创建布局
在 src/layouts
(hbx项目可能是layouts
) 下创建布局
<!-- default.vue -->
<template>
<slot>main</slot>
</template>
应用布局
在 pages.json 中的页面中添加 layout 配置
// pages.json
{
...
"pages": [{
"path": "pages/index/index",
// 可选, 这是默认值
"layout": "default"
}]
...
}
禁用布局
// pages.json
{
...
"pages": [{
"path": "pages/index/index",
"layout": false
}]
...
}
使用布局的插槽
你需要先禁用页面的布局, 然后使用内置组件 <uni-layout />
, 使用 name
属性指定布局,支持动态绑定 name、ref 等任意属性
<script setup>
const defaultName = ref('default')
</script>
<template>
<uni-layout :name="defaultName">
<template #header>uni-layout header</template>
use slot
<template #footer>uni-layout footer</template>
</uni-layout>
</template>
ref
只需声明一个 ref 变量 uniLayout
即可访问
<script setup>
const uniLayout = ref()
</script>
或者
<script>
export default {
onLoad() {
console.log(this.$refs.uniLayout)
}
}
</script>
配置
see type.ts
注意
layout 插件并非使用了什么魔法,它只做了两件事:
- 自动扫描并全局注册 layouts 目录下的组件
- 将页面使用 layout 组件包裹起来 所以,在微信小程序下,如果你使用了 web-view , 那么不会生效。
如果你使用 vite-plugin-uni-pages, 只需使用 route-block
<route lang="json">
{
"layout": "anyLayout"
}
</route>
TODO
- [x] ref 支持
- [x] 动态布局
- [ ] 类型安全