美文网首页
vueuse的部分用法解析

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的部分用法解析

      本文链接:https://www.haomeiwen.com/subject/nbtzqdtx.html