@brucelikk/brc-hooks-vue v1.0.2

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

npm i -g nrm
nrm use npm
npm i @brucelikk/brc-hooks-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>

• 校验表单

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

• 发起网络请求

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