# brc-hooks-vue

**Repository Path**: LiShuaizi/brc-hooks-vue

## Basic Information

- **Project Name**: brc-hooks-vue
- **Description**: BRC  HOOK：超好用的Vue3+TS自定义hook库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-08
- **Last Updated**: 2024-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

-  NPM官方源安装【BRC指令】

```
npm i -g nrm
nrm use npm
npm i @brucelikk/brc-hooks-vue
```



- 轻松倒计时

```vue
<template>
  <div>
    UseCountdownDemo
    <hr />
    remainingSeconds:{{ remainingSeconds }} <br />

    <button @click="startCountdown">startCountdown</button>
    <button @click="stopCountdown">stopCountdown</button>
  </div>
</template>

<script setup lang="ts">
import { useCountdown } from "@brucelikk/brc-hooks-vue";

const { remainingSeconds, startCountdown, stopCountdown } = useCountdown(60);
</script>

<style lang="scss" scoped></style>
```



- 校验表单

```vue
<template>
  <div>
    <h1>表单验证</h1>
    <div>
      <label for="username">用户名：</label>
      <input id="username" v-model="username" type="text" />
      <p v-if="!isUsernameValid">用户名长度必须大于等于 6</p>
    </div>
    <div>
      <label for="password">密码：</label>
      <input id="password" v-model="password" type="password" />
      <p v-if="!isPasswordValid">密码长度必须大于等于 8</p>
    </div>
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script lang="ts">
import { useFormValidator } from '@brucelikk/brc-hooks-vue'

export default {
  name: "FormValidator",
  setup() {
    const {
      username,
      password,
      isUsernameValid,
      isPasswordValid,
      handleSubmit,
    } = useFormValidator();

    return {
      username,
      password,
      isUsernameValid,
      isPasswordValid,
      handleSubmit,
    };
  },
};
</script>
```



- 发起网络请求

```vue
<template>
  <div>
    <button @click="fetchData">fetchData</button>
    <p>loading {{ loading }}</p>
    <p>error {{ error }}</p>
    <p>data {{ data }}</p>
  </div>
</template>

<script setup lang="ts">
import { useRequest } from "@brucelikk/brc-hooks-vue";

const { data, loading, error, fetchData } = useRequest(
  "https://192.168.0.103:4000/api/contract"
);
</script>
```