vue-canteen

一个简单而高效实用的工具库

directive 指令

vDebounce 防抖

import { vDebounce } from "vue-canteen";

<!-- 默认click事件 - 默认间隔时间1000ms - 首次不触发-->
<div v-debounce="handle"></div>
<!-- 默认click事件 - 间隔时间1500ms - 首次不触发-->
<div v-debounce.1500="handle"></div>
<!-- 鼠标移动事件 - 间隔500ms - 首次立即执行 -->
<div v-debounce:mousemove.500.immediate="handle"></div>

vThrottling 节流

import { vThrottling } from "vue-canteen";

<!-- 默认click事件 - 默认间隔时间1000ms-->
<div v-throttling="handle"></div>
<!-- 鼠标移动事件 - 间隔500ms -->
<div v-throttling:mousemove.500="handle"></div>

vFocus 聚焦

基础用法

<template>
  <input type="text" v-focus />
</template>
<script setup>
import { vFocus } from "vue-canteen";
</script>

异步方法

<template>
  <input type="text" v-focus="handle" />
</template>
<script setup>
import { vFocus } from "vue-canteen";
const handle = async () => {
  return (
    new Promise() <
    boolean >
    ((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, 5000);
    })
  );
};
handle();
</script>

vLoading 加载

基础用法

<template>
  <div v-loading="loading">容器</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { vLoading } from "vue-canteen";

const loading = ref<boolean>(false);
</script>

自定义组件

<template>
  <div v-loading:[CustomLoading]="loading">容器</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { vLoading } from "vue-canteen";
import CustomLoading from "./customLoading.vue";

const loading = ref<boolean>(false);
</script>

vCopy 复制

基础用法

<template>
  <button v-copy:[str]>copy</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { vCopy } from "vue-canteen";

const str = ref<string>("树叶的一生只是为了归根吗？");
</script>

事件回调

<template>
  <button v-copy:[str]="handle">copy</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { vCopy } from "vue-canteen";

const str = ref<string>("疾风亦有归途");

const handle = (error) => {
  if (!error) {
    alert("复制成功");
    return;
  }
  alert("复制失败");
};
</script>

<style scoped></style>

hooks

useNumberAnimation 数字增长

<template>
  <div>
    <button @click="start">开始</button>
    <button @click="paused">暂停</button>
    <button @click="stop">结束</button>

    <div>
      倒计时: <b>{{ countDown }}</b>
    </div>

    <p>
      当前状态:<b>{{ stateInfo.get(state) }}</b>
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  ITimeInfo,
  useNumberAnimation,
  UseNumberAnimationStatus,
} from "vue-canteen";

const countDown = ref<number>(100);

const state = ref<UseNumberAnimationStatus>(UseNumberAnimationStatus.Wait);

const stateInfo = new Map();
stateInfo.set(UseNumberAnimationStatus.Wait, "等待开始");
stateInfo.set(UseNumberAnimationStatus.Progress, "正在执行");
stateInfo.set(UseNumberAnimationStatus.Paused, "已暂停");
stateInfo.set(UseNumberAnimationStatus.End, "执行结束");

const animate = useNumberAnimation({
  from: 1, // 起始值
  to: 100, // 目标值
  duration: 3000, // 执行时间
  // 开始回调
  onStart(status: UseNumberAnimationStatus) {
    state.value = status;
  },
  // 执行进度回调
  onProgress(
    value: number,
    timeInfo: ITimeInfo,
    status: UseNumberAnimationStatus
  ) {
    state.value = status;
    countDown.value = Math.floor(value);
  },
  // 暂停回调
  onPaused(timeInfo: ITimeInfo, status: UseNumberAnimationStatus) {
    state.value = status;
  },
  // 结束回调
  onStop(value, timeInfo, status) {
    state.value = status;
  },
});

const start = () => animate.start();
const paused = () => animate.paused();
const stop = () => animate.stop();
</script>

useWebSocket 全双工通信

<template>
  <div>
    <button @click="connect">连接</button>
    <button @click="send">发送</button>
    <button @click="close">关闭</button>
  </div>
</template>

<script setup lang="ts">
import { useWebSocket } from "vue-canteen";

const socket = useWebSocket(
  {
    url: "ws://192.168.2.207:8080",
    immediate: false, // 是否立即连接
    // 消息回调
    onMessage(data, instance, status, ev) {
      console.log("🚀 Message", data);
    },
    // 连接成功回调
    onConnect(instance, status, ev) {
      console.log("🏀 Connect");
    },
    // 连接失败回调
    onDisConnect(instance, status, ev) {
      console.log("🔓 DisConnect");
    },
    // 错误回调
    onError(instance, status, ev) {
      console.log("❌ Error");
    },
  },
  // 断线重连
  {
    interval: 3000, // 间隔时间
    count: 5, // 重连次数
  },
  // 心跳包
  {
    interval: 1000, // 间隔时间
    heartbeat: "ping", // 心跳包数据
  }
);

const connect = () => {
  socket.connect();
};
const send = () => {
  socket.send("1");
};
const close = () => {
  socket.close();
};
</script>

useLoading 加载

基本使用

<template>
  <button @click="handle">
    {{ flag ? "hide" : "show" }}
  </button>
  <div id="loading-container">container</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useLoading } from "vue-canteen";

const flag = ref<boolean>(false);

const loading = useLoading({
  // 需要添加loading的容器
  target: "#loading-container",
});

const handle = () => {
  flag.value = !flag.value;
  flag.value ? loading.show() : loading.hide();
};
</script>

自定义 Loading

<template>
  <button @click="handle">
    {{ flag ? "hide" : "show" }}
  </button>
  <div id="loading-container__custom">container</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useLoading } from "vue-canteen";
// 隐去自定义组件
import CustomLoading from "./customLoading.vue";
import { h } from "vue";

const flag = ref<boolean>(false);

const loading = useLoading({
  target: "#loading-container__custom",
  component: h(CustomLoading),
  // 添加容器类名，可自行修改外层样式
  wrapClass: "customClass",
});

const handle = () => {
  flag.value = !flag.value;
  flag.value ? loading.show() : loading.hide();
};
</script>

延时关闭

调用 hide 方法后，延时关闭

<template>
  <button @click="handle">
    {{ flag ? "hide" : "show" }}
  </button>
  <div id="loading-container__delay">container</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useLoading } from "vue-canteen";

const flag = ref<boolean>(false);

const loading = useLoading({
  target: "#loading-container__delay",
  // 延时关闭时间
  delay: 2000,
  wrapClass: "customClass",
});

const handle = () => {
  flag.value = !flag.value;
  flag.value ? loading.show() : loading.hide();
};
</script>