安装

# npm
npm install @manbuxinghe/components

# yarn
yarn add @manbuxinghe/components

# pnpm
pnpm add @manbuxinghe/components

项目引入

手动引入（推荐）

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

全局引入（未测试）

// 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 字符串

使用示例

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

<HtmlStringRender :value="string" />

参数

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

SplitContainer

分割组合容器

使用示例

左右布局

<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>

上下布局

<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%，否则样式无法计算容器高度

<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 | String | 是 | 0.5 | | mode | 容器方向可选值为 horizontal 或 vertical | String | 否 | horizontal | | min | 最小拖拽阈值 | Number | String | 否 | 40px | | max | 最大拖拽阈值 | Number | String | 否 | 40px |

插槽 slots

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

BaseFormComp

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

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