npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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 插件并非使用了什么魔法,它只做了两件事:

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

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

<route lang="json">
{
  "layout": "anyLayout"
}
</route>

TODO

  • [x] ref 支持
  • [x] 动态布局
  • [ ] 类型安全