Custom-Hocks

一个自定义 Vue 3 组件和指令库，包含自定义按钮组件和 resize 指令。

安装

npm install usecorehocks
# 或
yarn add usecorehocks
# 或
pnpm add usecorehocks

使用方法

全局注册

import { createApp } from "vue";
import App from "./App.vue";
import CustomHocks from "usecorehocks";

const app = createApp(App);
app.use(CustomHocks);
app.mount("#app");

自定义按钮组件

<template>
  <div>
    <!-- 基本用法 -->
    <CustomButton>默认按钮</CustomButton>
    <CustomButton type="primary">主要按钮</CustomButton>
    <CustomButton type="success">成功按钮</CustomButton>
    <CustomButton type="warning">警告按钮</CustomButton>
    <CustomButton type="danger">危险按钮</CustomButton>
    <CustomButton type="info">信息按钮</CustomButton>

    <!-- 朴素按钮 -->
    <CustomButton plain>朴素按钮</CustomButton>

    <!-- 圆角按钮 -->
    <CustomButton round>圆角按钮</CustomButton>

    <!-- 圆形按钮 -->
    <CustomButton circle>
      <template #icon>
        <span>+</span>
      </template>
    </CustomButton>

    <!-- 禁用状态 -->
    <CustomButton disabled>禁用按钮</CustomButton>

    <!-- 加载状态 -->
    <CustomButton loading>加载中</CustomButton>
  </div>
</template>

<script>
import { CustomButton } from "usecorehocks";

export default {
  components: {
    CustomButton,
  },
};
</script>

按钮属性

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | | -------- | ------------------ | ------- | ----------------------------------------------------- | ------- | | type | 按钮类型 | string | default / primary / success / warning / danger / info | default | | plain | 是否为朴素按钮 | boolean | — | false | | round | 是否为圆角按钮 | boolean | — | false | | circle | 是否为圆形按钮 | boolean | — | false | | disabled | 是否禁用 | boolean | — | false | | loading | 是否显示加载中状态 | boolean | — | false |

按钮事件

| 事件名 | 说明 | 回调参数 | | ------ | -------------- | ------------ | | click | 点击按钮时触发 | event: Event |

按钮插槽

| 插槽名 | 说明 | | ------- | ---------- | | default | 按钮的内容 | | icon | 按钮的图标 |

Resize 指令

<template>
  <div v-resize="handleResize" class="resize-element">
    宽度: {{ width }}px, 高度: {{ height }}px
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 0,
      height: 0,
    };
  },
  methods: {
    handleResize(rect) {
      this.width = rect.width;
      this.height = rect.height;
    },
  },
};
</script>

<style>
.resize-element {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  resize: both;
  overflow: auto;
}
</style>

开发

# 安装依赖
pnpm install

# 构建库
pnpm build