naive-factory

使用工厂类创建naive-ui组件库组件，让vue可以使用arkts和flutter类似的语法构建页面。基于 naive-ui 和 jsx 语法实现，使用前请先安装 naive-ui 和配置 jsx 插件。

1.安装

//npm
npm i naive-factory -S
//yarn
yarn add naive-factory -S
//pnpm
pnpm add naive-factory -S

2.使用示例

正常使用 naive-ui

// naive-ui
<template>
  <NButton class="my-btn" :style="{ marginBottom: '10px' }" type="primary">
    Button
  </NButton>
</template>
<script setup lang="ts">
import { NButton } from "naive-ui";
</script>

基于 naive-factory 使用

//naive-factory
import { ButtonFactory } from "naive-factory";
export default defineComponent({
  name: "index",
  setup() {
    return new ButtonFactory()
      .setAttrs({
        style: {
          marginBottom: "10px",
        },
        class: "my-btn",
      })
      .setProps({ type: "primary" })
      .setDefault("Button")
      .create();
  },
});

3.方法

3.1 设置组件 props

调用实例化对象的 setProps传递对象即可。

3.2 设置组件的样式和类

调用实例化对象的setAttrs传递对象即可。

3.3 设置插槽

naive-ui组件提供了哪个插槽，调用setXXX即可，比如：NButton 提供了插槽default 和 icon ,那么直接调用setDefault 和 setIcon 即可。以setDefault为例子，若插槽没有抛出数据即为BaseComponentType类型，若排除数据即为(data:T)=>BaseComponentType T 为 data 的数据类型。

export type BaseSlot = JSX.Element | string | number | null;
export type BaseComponentType =
  | BaseSlot
  | Array<BaseSlot>
  | (() => BaseSlot)
  | (() => Array<BaseSlot>);

3.4 调用组件的方法

要调用组件的方法，首先得naive-ui的组件上有这个方法，再调用实例化的对应方法即可。例如：

import { defineComponent } from "vue";

import {
  ButtonFactory,
  CarouselFactory,
  ElementFactory,
  FlexFactory,
  ImageFactory,
} from "../factory/index";

export default defineComponent({
  name: "home",
  setup() {
    const carousel = new CarouselFactory(); //在此处实例化,即可调用组件的方法
    const next = () => carousel.next();
    const prev = () => carousel.prev();

    return () =>
      new ElementFactory()
        .setProps({
          tag: "div",
        })
        .setAttrs({
          style: {
            padding: "20px",
          },
        })
        .setDefault(
          new FlexFactory()
            .setProps({
              vertical: true,
            })
            .setDefault([
              carousel
                .setProps({
                  autoplay: true,
                })
                .setDefault([
                  new ImageFactory()
                    .setProps({
                      src: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg",
                    })
                    .create(),
                  new ImageFactory()
                    .setProps({
                      src: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg",
                    })
                    .create(),
                  new ImageFactory()
                    .setProps({
                      src: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg",
                    })
                    .create(),
                  new ImageFactory()
                    .setProps({
                      src: "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg",
                    })
                    .create(),
                ])
                .create(),
              new FlexFactory()
                .setDefault([
                  new ButtonFactory()
                    .setProps({
                      onClick: () => prev(),
                    })
                    .setDefault("prev")
                    .create(),
                  new ButtonFactory()
                    .setProps({
                      onClick: () => next(),
                    })
                    .setDefault("next")
                    .create(),
                ])
                .create(),
            ])
            .create()
        )
        .create();
  },
});

3.5 创建组件

要在页面上渲染组件，必须在实例化调用create 方法。