Vue VueUse-基于Vue组合式API的实用工具集 - 附完整示例

VueUse：是一款基于组合式API的函数集合。

目录

一、介绍

1、官方文档

（1）英文文档：VueUse | VueUse

（2）中文文档：VueUse中文文档 | VueUse中文文档

2、本文使用的两个函数

（1）useDebounceFn：https://www.vueusejs.com/shared/useDebounceFn/

（2） useClipboard：useClipboard | VueUse中文文档

二、准备工作

1、安装依赖包

2、示例版本

三、使用步骤

1、在单页面引入 '@vueuse/core'

2、具体使用

（1）useDebounceFn

（2）useClipboard

四、完整示例

 欢迎扫描下方二维码关注VX公众号

一、介绍

1、官方文档

（1）英文文档：VueUse | VueUse

（2）中文文档：VueUse中文文档 | VueUse中文文档

2、本文使用的两个函数

（1）useDebounceFn：https://www.vueusejs.com/shared/useDebounceFn/

（2） useClipboard：useClipboard | VueUse中文文档

二、准备工作

1、安装依赖包

npm i @vueuse/core

2、示例版本

"@vueuse/core": "^8.3.0",

三、使用步骤

1、在单页面引入 '@vueuse/core'

import { useDebounceFn, useClipboard } from '@vueuse/core';

2、具体使用

（1）useDebounceFn

<template
  <a-select
    v-model:value="keyword"
    show-search
    placeholder="输入关键字搜索"
    style="width: 300px"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    @search="debounceSearchChange"
  >
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useDebounceFn, useClipboard } from '@vueuse/core';

  const keyword = ref('');
  const debounceSearchChange = useDebounceFn(handleSearch, 200);
  
  function handleSearch(str) {
    console.log(str)
    // 处理搜索的逻辑
  }

</script>

（2）useClipboard

<template
  <div>
     经纬度：<span style="cursor: pointer;" @click="handleCopy">{{ coord }} 
     </span>
   </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { useDebounceFn, useClipboard } from '@vueuse/core';

  const coord = ref('');
  const { text, copy, copied, isSupported } = useClipboard({ coord })

  function handleCopy() {
    copy(coord.value)
    message.info('复制成功');
  }

</script>

注：复制还可以用插件 - clipboard.js，具体使用可参照这篇博客

Js Vue 一键复制文本内容 - clipboard.js（兼容谷歌等主流浏览器）- 附完整示例_clipboard.js vue_Web - Nancy的博客-CSDN博客

四、完整示例

<template
  <a-select
    v-model:value="keyword"
    show-search
    placeholder="输入关键字搜索"
    style="width: 300px"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    @search="debounceSearchChange"
  >
  <div>
     经纬度：<span style="cursor: pointer;" @click="handleCopy">{{ coord }} 
     </span>
   </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { useDebounceFn, useClipboard } from '@vueuse/core';

  const keyword = ref('');
  const debounceSearchChange = useDebounceFn(handleSearch, 200);

  const coord = ref('');
  const { text, copy, copied, isSupported } = useClipboard({ coord })

  function handleSearch(str) {
    console.log(str)
    // 处理搜索的逻辑
  }

  function handleCopy() {
    copy(coord.value)
    message.info('复制成功');
  }

</script>

 欢迎扫描下方二维码关注VX公众号