npm package: @manbuxinghe/components
Description: ```bash # npm npm install @manbuxinghe/components
Latest version: 0.0.15

## 安装

```bash
# npm
npm install @manbuxinghe/components

# yarn
yarn add @manbuxinghe/components

# pnpm
pnpm add @manbuxinghe/components
```

## 项目引入

手动引入（推荐）

```jsx
import { HtmlStringRender } from "@manbuxinghe/components";
import "@manbuxinghe/components/style.css"; // 引入样式
```

全局引入（未测试）

```jsx
// main.ts
import { createApp } from "vue";
import Manbuxinghe from "@manbuxinghe/components";
import "@manbuxinghe/components/style.css"; // 引入样式
import App from "./App.vue";

const app = createApp(App);

app.use(Manbuxinghe);
app.mount("#app");
```

## 组件

### HtmlStringRender

解析 html 字符串

#### 使用示例

```jsx
import { HtmlStringRender } from '@manbuxinghe/components';
import '@manbuxinghe/components/style.css';

<HtmlStringRender :value="string" />
```

#### 参数

| 参数  | 类型   | 是否必填 |
| ----- | ------ | -------- |
| value | String | 是       |

### SplitContainer

分割组合容器

#### 使用示例

左右布局

```vue
<template>
  <div class="demo-split">
    <SplitContainer v-model="state.splitNumber">
      <template #left>
        <div class="demo-split-pane">左边容器</div>
      </template>
      <template #right>
        <div class="demo-split-pane">右边容器</div>
      </template>
    </SplitContainer>
  </div>
</template>
<script setup lang="ts">
import { SplitContainer } from "@manbuxinghe/components";
import "@manbuxinghe/components/style.css";
const state = reactive({
  splitNumber: 0.5,
  splitNumber2: 0.5,
});
</script>
<style scoped lang="scss">
/* 组合使用时 父容器和子容器一定要设置高度100%，否则样式无法计算容器高度 */
.cont {
  height: 100%;
}
.demo-split {
  height: 100%;
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding: 10px;
}
.demo-split-pane.no-padding {
  height: 100%;
  padding: 0;
}
</style>
```

上下布局

```vue
<template>
  <div class="demo-split">
    <SplitContainer v-model="state.splitNumber" mode="vertical">
      <template #top>
        <div class="demo-split-pane">上边容器</div>
      </template>
      <template #bottom>
        <div class="demo-split-pane">下边容器</div>
      </template>
    </SplitContainer>
  </div>
</template>
<script setup lang="ts">
import { SplitContainer } from "@manbuxinghe/components";
import "@manbuxinghe/components/style.css";
const state = reactive({
  splitNumber: 0.5,
  splitNumber2: 0.5,
});
</script>
<style scoped lang="scss">
/* 组合使用时 父容器和子容器一定要设置高度100%，否则样式无法计算容器高度 */
.cont {
  height: 100%;
}
.demo-split {
  height: 100%;
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding: 10px;
}
.demo-split-pane.no-padding {
  height: 100%;
  padding: 0;
}
</style>
```

组合布局
组合使用时 父容器和子容器一定要设置高度 100%，否则样式无法计算容器高度

```vue
<template>
  <div class="cont">
    <div class="demo-split">
      <SplitContainer v-model="state.splitNumber">
        <template #left>
          <div class="demo-split-pane">左边容器</div>
        </template>
        <template #right>
          <div class="demo-split-pane">右边容器</div>
        </template>
      </SplitContainer>
    </div>
    <div class="demo-split">
      <SplitContainer v-model="state.splitNumber2" mode="vertical">
        <template #top>
          <div class="demo-split-pane">上边容器</div>
        </template>
        <template #bottom>
          <div class="demo-split-pane">下边容器</div>
        </template>
      </SplitContainer>
    </div>
  </div>
</template>
<script setup lang="ts">
import { SplitContainer } from "@manbuxinghe/components";
import "@manbuxinghe/components/style.css";
const state = reactive({
  splitNumber: 0.5,
  splitNumber2: 0.5,
});
</script>
<style scoped lang="scss">
/* 组合使用时 父容器和子容器一定要设置高度100%，否则样式无法计算容器高度 */
.cont {
  height: 100%;
}
.demo-split {
  height: 100%;
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding: 10px;
}
.demo-split-pane.no-padding {
  height: 100%;
  padding: 0;
}
</style>
```

#### 参数

| 参数    | 说明                                                                     | 类型                 | 是否必填 | 默认值     |
| ------- | ------------------------------------------------------------------------ | -------------------- | -------- | ---------- |
| v-model | 面板位置，可以是 0~1 代表百分比，或具体数值的像素，可用 v-model 双向绑定 | Number &#124; String | 是       | 0.5        |
| mode    | 容器方向可选值为 horizontal 或 vertical                                  | String               | 否       | horizontal |
| min     | 最小拖拽阈值                                                             | Number &#124; String | 否       | 40px       |
| max     | 最大拖拽阈值                                                             | Number &#124; String | 否       | 40px       |

#### 插槽 slots

| 名称    | 说明                                |
| ------- | ----------------------------------- |
| left    | mode 为 horizontal 时可用，左边面板 |
| right   | mode 为 horizontal 时可用，右边面板 |
| top     | mode 为 vertical 时可用，上边面板   |
| bottom  | mode 为 vertical 时可用，下边面板   |
| trigger | 自定义分割拖拽节点（实验性功能）    |

### BaseFormComp

可配置 form 表单
先懒一端时间在写，还有些功能没完善

**免责声明：本仓库代码和功能仅供学习使用，造成的任何法律后果全权由使用者承担全部责任，本作者概不负责。**