vueuse的部分用法解析

2022-12-28 本文已影响0人焚心123

首先下载

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` 将数字类型转化为字符串