@mmyhs/vueuse

该插件提供常用的vue指令、hooks。

Hooks

useWebSocket

const websocket = useWebSocket("ws://127.0.0.1:9501/asd3424");

// 发送消息
websocket.sendMessage("你好").then(res => {
  console.log(res)
})

指令

v-waterMarker

提供背景水印的指令

| 参数 | 说明 | | ----- | ----------------------------- | | text | 水印文本信息 | | font | 水印字体 | | color | 水印颜色 | | align | 对齐方式（left,center,right） |

使用案例

<template>
	<div class="demo-container" v-waterMarker="waterMarker">看，这是水印</div>
</template>

<script lang="ts">
import { ref } from 'vue';

const waterMarker = ref({
  text: "mmyhs 2023-02-07"
})
</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>

v-copy

提供复制文本的指令

接收参数：字符串类型

使用案例

<template>
	<div class="demo-container" v-copy="text">点击复制文本信息</div>
</template>

<script lang="ts">
import { ref } from 'vue';

const text = ref("需要复制的文本信息");
</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>

v-debounce

按钮防抖指令，无论点击多少次，在 500ms 内只响应最后一次点击事件

接收参数：function类型

使用案例

<template>
	<div class="demo-container">
    	<button v-debounce="debounceClick">防抖提交</button>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
    
const debounceClick = () => {
  console.log("debounceClick")
  if (Math.random() > 0.5) {
    console.log("success");
  } else {
    console.log("fail");
  }
}
</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>

v-throttle

按钮节流指令，防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次

接收参数：function类型

使用案例

<template>
	<div class="demo-container">
    	<button v-throttle="throttleClick">防抖提交</button>
        <button v-throttle="throttleClick2">防抖提交(Promise)</button>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
    
const throttleClick = () => {
  console.log("throttleClick")
  if (Math.random() > 0.5) {
    console.log("success");
  } else {
    console.log("fail");
  }
}

const throttleClick2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        console.log("success");
        resolve("success");
      } else {
        console.log("fail")
        reject("fail");
      }
    }, 1000)
  })
}
</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>

v-draggable

拖拽指令，可在父元素区域任意拖拽元素（要求其父元素为relative）

使用案例

<template>
	<div class="demo-container" v-draggable>
    	<span v-draggable>试试拖动我</span>
    </div>
</template>

<script lang="ts">
import { } from 'vue';

</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>