This is the second day of my participation in the First Challenge 2022. Check out the event details for the first Challenge 2022.

preface

VueUse is a collection of utility functions based on the Composition API, supporting Vue2 and Vue3, that can help you quickly implement common requirements in daily development. This article will share a few common requirements that can be implemented through VueUse to make you feel its charm!

Installation before use

Vue3:

npm i @vueuse/core --save
Copy the code

Vue2 requires an additional @vue/ composition-API installation

npm i @vue/composition-api --save
Copy the code

Page full screen

In the background management system, there is usually a function to enable the full screen of web pages, most of which is achieved by using the screenFull plug-in.

VueUse provides us with an API that makes it easy to implement full-screen web pages.

<template>
  <el-button @click="toggle">{{ isFullscreen ? 'Exit full screen' : 'Enable full screen'}}</el-button>
</template>

<script lang="ts" setup>
import { useFullscreen } from '@vueuse/core'

const { isFullscreen, toggle } = useFullscreen()
</script>
Copy the code

UseFullscreen also supports passing in an element so that only the element area is displayed in full screen.

<template>
  <el-button @click="toggle">Open the full screen</el-button>
  <div ref="el">My full screen</div>
</template>

<script lang="ts" setup>
import { useFullscreen } from '@vueuse/core'

const el = ref<HTMLElement | null> (null)
const { toggle } = useFullscreen(el)
</script>
Copy the code

clipboard

Vue2 has previously been implemented using vue-Clipboard2 plugins, which can also be easily implemented using VueUse.

<template>
  <el-button @click="onClick">copy</el-button>
</template>

<script lang="ts" setup>
import { useClipboard } from '@vueuse/core'

const { isSupported, copy } = useClipboard()

const onClick = () = > {
  if (isSupported) {
    copy('I am the copied content').then(() = > {
      console.log('copy success')})}else {
    alert('Your browser does not support Clipboard API')}}</script>
Copy the code

The color is

<template>
  <div>
    <el-button @click="open">Turn on the color picker</el-button>
    <el-button type="primary" style="width: 100px">button</el-button>
    <p>{{sRGBHex}}</p>
  </div>
</template>

<script lang="ts" setup>
import { useEyeDropper } from '@vueuse/core'

const { open, sRGBHex } = useEyeDropper()
</script>
Copy the code

Call the open function to open the color picker, click the left mouse button anywhere to get the color in response.

Drag and drop elements

<template>
  <div
    ref="el"
    style="position: fixed; width: 400px; height: 400px; background: red"
    :style="style"
  ></div>
  <p>X: {{x}}, y: {{y}}</p>
</template>

<script lang="ts" setup>
import { useDraggable } from '@vueuse/core'

const el = ref<HTMLElement | null> (null)
const { x, y, style } = useDraggable(el)
</script>
Copy the code

A few simple lines of code make elements draggable.

The local cache

<script lang="ts" setup>
import { useStorage } from '@vueuse/core'

const state = useStorage('test', { id: 'xxxx'.name: 'james' })
</script>
Copy the code

The above code stores an object with test as the key and returns a value of type REF.

This allows us to do the json to String conversion that we do with the native API.

We can then easily manipulate a field in an object, rather than having to pull out an entire object and replace it as we would with the native API, which is very comfortable.

state.value.id == 'abc' // Check localStorage to find the id changed to ABC
Copy the code

Using sessionStorage mode:

const state = useStorage('test', { id: 'xxxx'.name: 'james' }, sessionStorage)
Copy the code

other

The safety area

Use the useScreenSafeArea to easily get the safe zone distance of the screen, and never worry about the fringe and bottom safe distance again.

<script lang="ts" setup>
import { useScreenSafeArea } from '@vueuse/core'

const { top, right, bottom, left } = useScreenSafeArea()
</script>
Copy the code

Dynamically modify the Favicon

If we need to change the Favicon dynamically in a project, creating tags, adding elements, replacing addresses, etc., it’s not a lot of code, but it’s much easier.

<template>
  <el-button @click="onClick">Switch the favicon</el-button>
</template>

<script lang="ts" setup>
import { useFavicon } from '@vueuse/core'
import Logo from '@/assets/image/logo.png'

const icon = useFavicon()

const onClick = () = > {
  icon.value = Logo
}
</script>
Copy the code

As shown above, we can dynamically set an image as a website icon.

The last

The above is just the tip of VueUse’s iceberg. There are many practical things in VueUse, such as: anti-vibration, throttling, scrolling, mouse operation, components and so on, which are highly recommended for everyone to eat. If you find some interesting apis, please share them in the comments section!

The last