进阶用法

介绍

通过本章节你可以了解到 ZebraUI 的一些进阶用法。

组件注册

zebra-ui支持单组件引入以及通过easycom的方式引入。

如果通过uni_modules引入，则不需要再进行引入。

easycom和uni_modules方式都会过滤未使用的组件，即按需引入。

单组件全局注册

// main.ts
import { createSSRApp } from "vue";
// 通过路径引入button
import zButton from "@zebra-ui/uniapp/components/z-button/z-button.vue";
import App from "./App.vue";
export function createApp() {
  const app = createSSRApp(App);
  //全局注册组件
  app.component("z-button", zButton);
  return {
    app,
  };
}

单组件页面注册

在 <script setup> 中可以直接使用 ZebraUI 组件，不需要进行组件注册。

<!-- test.vue -->
<template>
  <div class="wrapper">
    <z-button type="primary">Primary</z-button>
  </div>
</template>

<script setup>
import zButton from "@zebra-ui/uniapp/components/z-button/z-button.vue";
</script>

使用组件样式变量

zebra-ui提供了大量的组件样式变量，通过变量可控制组件的主题，以及自定义组件的样式。

使用示例

<style lang="scss" scoped>
.demo-rolling-text {
  .my-rolling-text {
    --z-rolling-text-background: #1989fa;
    --z-rolling-text-color: white;
    --z-rolling-text-font-size: 48rpx;
    --z-rolling-text-gap: 12rpx;
    --z-rolling-text-item-border-radius: 10rpx;
    --z-rolling-text-item-width: 80rpx;
  }
}
</style>

以上样式通过在页面中声明zebra-ui的样式变量，对默认的变量执行覆盖，从而实现自定义样式。

当然，也可以通过z-config-provider组件自定义样式。

自动引入组件API

zebra支持使用unplugin-auto-import插件对api实现自动引入。

pnpm install -D unplugin-auto-import

安装后在vite.config.ts文件引入插件。

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    AutoImport({
      imports: [
        {
          '@zebra-ui/uniapp': ['useDialog', 'useToast', 'useNotify']
        }
      ]
    })
  ]
})

未使用插件前：

<script lang="ts" setup>
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
toast.showToast('文字提示')
</script>

使用插件后：

<script lang="ts" setup>
const toast = useToast()
toast.showToast('文字提示')
</script>

无需引入，直接声明后使用。

支持的组件：

• z-toast 轻提示
• z-dialog 弹出框
• z-notify 消息提示