vueuse的部分用法解析

作者: 焚心123 | 来源:发表于2022-12-28 18:03 被阅读0次

首先下载

npm i @vueuse/core

先介绍`useStorage`这个是将数据存储到本地内存中localStorage

useLocalStorage这个api使用的方法一样，跟下面介绍的也一样
先看代码

import { useStorage } from "@vueuse/core"
const theDefault = {
  name: "Banana",
  color: "Yellow",
  size: "Medium",
  count: 0,
}
let state = useStorage("vue-use-local-storage", theDefault)
// state = JSON.parse(state.value)
console.log(state)

当useStorage有两个参数的时候，是设置存储信息，并返回格式化好的数据
当useStorage只有一个参数的时候，是读取，但是返回的数据需要json.parse下，是字符串对象
具体的可以查看官网，还有多个参数，也可以进行覆盖，读取、存储格式的设置等

`useFullscreen`用于浏览器的全屏展示作用

//isFullscreen 当前是否是全屏,true/false,可用于一些逻辑的判断
//toggle  是函数直接调用即可
const { isFullscreen, toggle } = useFullscreen();

<button @click="toggle">点击切换</button>

一般直接调用方法就可以了

`useClipboard` 剪切板功能

<script setup>
import { useClipboard } from "@vueuse/core"
//text 复制的内容
//copy 是复制的函数
// isSupported 判断当前的浏览器是否支持这个api
const input = ref("")
const { text, copy, isSupported } = useClipboard()
console.log(text, copy, isSupported)
</script>

<template>
  <div>
    <input v-model="input" type="text" />
    <button @click="copy(input)">Copy</button>
  </div>
</template>

`useColorMode`切换主题颜色(换肤)

<script setup>
import { useColorMode } from "@vueuse/core"
const mode = useColorMode() 

const btn = () => {
  mode.value = mode.value === "light" ? "dark" : "light"
}
</script>

<template>
  <div class="home" style="height: 100%">
    <button @click="btn">切换</button>
  </div>
</template>

会在html标签上添加一个class，动态的改变为dark，light
主要是改变mode的值
也可以搭配useCycleList进行使用

<script setup>
import { useColorMode, useCycleList } from "@vueuse/core"
const mode = useColorMode({
  emitAuto: false,
  modes: {
    contrast: "dark contrast",
    cafe: "cafe",
  },
})
const { next } = useCycleList(["dark", "light", "cafe", "contrast", "auto"], {
  initialValue: mode,
})
</script>

<template>
  <button @click="next()">
    <i
      v-if="mode === 'dark'"
      i-carbon-moon
      inline-block
      align-middle
      class="align-middle"
    />
    <i
      v-if="mode === 'light'"
      i-carbon-sun
      inline-block
      align-middle
      class="align-middle"
    />
    <i
      v-if="mode === 'cafe'"
      i-carbon-cafe
      inline-block
      align-middle
      class="align-middle"
    />
    <i
      v-if="mode === 'contrast'"
      i-carbon-contrast
      inline-block
      align-middle
      class="align-middle"
    />
    <i
      v-if="mode === 'auto'"
      i-carbon-laptop
      inline-block
      align-middle
      class="align-middle"
    />

    <span class="ml-2 capitalize">{{ mode }}</span>
  </button>

  <span class="p-4 opacity-50">← Click to change the color mode</span>
</template>

<style>
html.cafe {
  filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
}
html.contrast {
  filter: contrast(2);
}
</style>

emitAuto 这个属性是是否随机的，就是点击下一个数据
attribute: 'theme',这个属性是将默认class改为theme
modes中的属性是动态改变的class类名有这几个除了dark,light这俩是默认的
initialValue 当前要赋值的对象

const a = ref("")
const { next } = useCycleList(["dark", "light", "cafe", "contrast", "auto"], {
  initialValue: a,
})
<button @click="next()">点击</button>------  {{ a }}

`useDark`开启暗黑模式

<script setup>
// import { useToggle } from "@vueuse/shared"
import { useDark, useToggle } from "@vueuse/core"
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
  <button @click="toggleDark()">
   切换
  </button>
</template>

注意上面的写法，写法不对也不行奥

const isDark = useDark({
selector: "html", //这个是将当前的dark类显示的dom元素标签名
attribute: "color-scheme", //这个是class改为了color-scheme，不过一般使用class
valueDark: "dark",///暗黑class名字
valueLight: "light",////高亮class名字
})

`useTitle`动态修改标题名

<script setup>
// import { useToggle } from "@vueuse/shared"
import { useTitle } from "@vueuse/core"
const title = useTitle()
console.log(title.value) // print current title
const num = ref(0)
const btn = () => {
  num.value++
  title.value = "Hello" + num.value // change current title
}
</script>

<template>
  <button @click="btn">点击</button>
</template>

`useCssVar`用js操作css变量的

一般我们在全局使用:root声明的变量，可以用在全局，动态的进行修改

全局声明变量
:root {
  --color: red;
}

在其他页面中修改
<script setup lang="ts">
import { ref } from "vue"
import { useCssVar } from "@vueuse/core"
const el = ref(null)
const color = useCssVar("--color", el)
const switchColor = () => {
  color.value = "#df8543"
}
</script>

<template>
  <div ref="el" style="color: var(--color)">Sample text, {{ color }}</div>
  <button @click="switchColor">Change Color</button>
</template>

注意：这个变量需要在标签上写才会生效

`useEventListener`监听事件

这个api的作用是当你监听之后，页面卸载不用再去主动的删除监听事件，会自动的帮助我们删除，当然也可以主动的进行删除，这个事件的返回值是一个函数，调用下就可以删除事件的监听

<script setup>
import { useEventListener } from "@vueuse/core"

const element = ref(null)
const cloup = useEventListener(element, "click", () => {
  console.log("监听点击事件")
})
cloup() //主动删除监听事件之后，不用在调用监听事件
</script>

<template>
  <div ref="element" >Sample text</div>
</template>

`useEyeDropper`滴管也叫取色器

吸取当前选择的颜色并返回结果

<script setup>
import { useEyeDropper } from "@vueuse/core"

const { isSupported, open, sRGBHex } = useEyeDropper()
</script>

<template>
  <button @click="open" :disabled="!isSupported">
    滴管-----------{{ sRGBHex }}
  </button>
</template>

isSupported 当前的浏览器是否支持这个api
sRGBHex 当前吸取返回的颜色值
open 触发的方法

`useWindowSize` 动态的监听当前页面的大小

实时的显示页面的宽、高，可用来做pc和移动的判断

import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

`useArrayFilter`数组的方法，过滤

这个api相当于是使用计算属性，进行包裹的
第一个参数为当前要过滤的对象，第二个为函数，进行条件的筛选
useArrayFind、useArrayEvery、useArrayFind、useArrayFindIndex、useArraySome 、useArrayMap 、useArrayReduce、useSorted这几个的用法是一样的

<script setup>
import { useArrayFilter } from "@vueuse/core"
import { reactive } from "vue"

let data = reactive({
  list1: [{ num: 1 }, { num: 2 }, { num: 3 }],
})
const result0 = computed(() => data.list1.filter((item) => item.num > 2))
data.list1.push({ num: 4 })
console.log(result0.value)

const list = [{ num: 1 }, { num: 2 }, { num: 3 }]
const result = useArrayFilter(list, (i) => i.num > 2)
list.push({ num: 4 })
console.log(result.value);
</script>

时间的两个api

useDateFormat进行时间格式化的
useNow 返回当前时间

<script setup>
import { useNow, useDateFormat } from "@vueuse/core"

const formatted = useDateFormat(useNow(), "YYYY-MM-DD HH:mm:ss")
</script>

<template>
  <div>{{ formatted }}</div>
</template>`

格式化的文档，具体的可查看官网

image.png

`useBase64`可以将文本内容，buffer，图片转为base64

import { useBase64 } from '@vueuse/core'

const text = ref('')

const { base64 } = useBase64(text)

`useCounter`数字累加器

<script setup>
import { useCounter } from "@vueuse/core"

const { count, inc, dec, set, reset } = useCounter(1, { min: 0, max: 16 })
</script>

<template>
  <div>{{ count }}</div>
  <button @click="inc()">加</button>
  <button @click="dec()">减</button>
  <button @click="set(10)">设置当前数值为10</button>
  <button @click="reset()">重置</button>
</template>

`useCycleList`循环列表，上面有提到过，在主题颜色哪里

<script setup>
import { useCycleList } from "@vueuse/core"

const { state, next, prev } = useCycleList([
  "Dog",
  "Cat",
  "Lizard",
  "Shark",
  "Whale",
  "Dolphin",
  "Octopus",
  "Seal",
])
</script>

<template>
  <div>{{ state }}</div>
  <button @click="next()">下一个</button>
  <button @click="prev()">上一个</button>
</template>

`useToggle` 切换

可传值，可不传值,两种写法

<script setup>
import { useToggle } from "@vueuse/core"
const value = ref(false)
// const [value, toggle] = useToggle()
const toggle = useToggle(value)
</script>

<template>
  <mark>{{ value }}</mark>
  <button @click="toggle()">切换</button>
</template>

####### useToNumber将字符串转化为数字类型

import { useToNumber } from '@vueuse/core'

const str = ref('123')
const number = useToNumber(str)

number.value // 123

`useToString` 将数字类型转化为字符串

import { useToString } from '@vueuse/core'

const number = ref(3.14)
const str = useToString(number)

str.value // '3.14'

####### useQRCode二维码生成器

不过要搭配qrcode使用

npm i qrcode

不过useQRCode没有在@vueuse/core包中，我是直接将源码拷贝下来了
页面中使用

<script setup>
import { useQRCode } from "../utils/useQrcode"
let inp = ref("")
let qrcode = null
const inpBtn = () => {
  qrcode = useQRCode(inp.value)
}
</script>

<template>
  <input type="text" v-model="inp" @input="inpBtn" />
  <img :src="qrcode" alt="qrcode" />
</template>

源码中进行的封装

import { isClient, resolveRef } from "@vueuse/shared"
import QRCode from "qrcode"

/**
 * Wrapper for qrcode.
 *
 * @see https://vueuse.org/useQRCode
 * @param text
 * @param options
 */
export function useQRCode(text, options) {
  const src = resolveRef(text)
  const result = ref("")

  watch(
    src,
    async (value) => {
      console.log(src.value, value)
      if (src.value && isClient)
        result.value = await QRCode.toDataURL(value, options)
    },
    { immediate: true }
  )

  return result
}

上面的代码中，我没有主动引入vue的api,用的是插件自动引入

vueuse的部分用法解析

先介绍`useStorage`这个是将数据存储到本地内存中localStorage

`useFullscreen`用于浏览器的全屏展示作用

`useClipboard` 剪切板功能

`useColorMode`切换主题颜色(换肤)

`useDark`开启暗黑模式

`useTitle`动态修改标题名

`useCssVar`用js操作css变量的

`useEventListener`监听事件

`useEyeDropper`滴管也叫取色器

`useWindowSize` 动态的监听当前页面的大小

`useArrayFilter`数组的方法，过滤

时间的两个api

`useBase64`可以将文本内容，buffer，图片转为base64

`useCounter`数字累加器

`useCycleList`循环列表，上面有提到过，在主题颜色哪里

`useToggle` 切换

`useToString` 将数字类型转化为字符串

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

vueuse的部分用法解析

先介绍useStorage这个是将数据存储到本地内存中localStorage

useFullscreen用于浏览器的全屏展示作用

useClipboard 剪切板功能

useColorMode切换主题颜色(换肤)

useDark开启暗黑模式

useTitle动态修改标题名

useCssVar用js操作css变量的

useEventListener监听事件

useEyeDropper滴管也叫取色器

useWindowSize 动态的监听当前页面的大小

useArrayFilter数组的方法，过滤

时间的两个api

useBase64可以将文本内容，buffer，图片转为base64

useCounter数字累加器

useCycleList循环列表，上面有提到过，在主题颜色哪里

useToggle 切换

useToString 将数字类型转化为字符串

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

先介绍`useStorage`这个是将数据存储到本地内存中localStorage

`useFullscreen`用于浏览器的全屏展示作用

`useClipboard` 剪切板功能

`useColorMode`切换主题颜色(换肤)

`useDark`开启暗黑模式

`useTitle`动态修改标题名

`useCssVar`用js操作css变量的

`useEventListener`监听事件

`useEyeDropper`滴管也叫取色器

`useWindowSize` 动态的监听当前页面的大小

`useArrayFilter`数组的方法，过滤

`useBase64`可以将文本内容，buffer，图片转为base64

`useCounter`数字累加器

`useCycleList`循环列表，上面有提到过，在主题颜色哪里

`useToggle` 切换

`useToString` 将数字类型转化为字符串