Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

A journey of a thousand miles begins with single step

Continuously updated…

Common components portal:

  • Vue build background management system – full screen components

screenfullIntroduction to the

Official website: github.com/sindresorhu…

The installation

# use npm
npm install screenfull -S

# use yarn
yarn add screenfull
Copy the code

Introduction and Use

Introduced in 

import screenfull from "screenfull"
Copy the code

Template code

<div class="full-srcreen">
  <i class="icon-style" :class="{ 'el-icon-full-screen': ! isFull, 'el-icon-tuichuquanping iconfont': isFull }" @click="toggleFull"></i>
</div>
Copy the code

Added a way to click full screen

toggleFull() {
  if(! screenfull.isEnabled) {this.$message({ type: 'warning'.message: 'you brower can not work' })
    return false
  }
  screenfull.toggle()
  this.isFull = !this.isFull
}
Copy the code

Encapsulating component code

Create the FullScreen folder under components and create the index.vue file under FullScreen

<template> <div class="full-srcreen"> <i class="icon-style" :class="{ 'el-icon-full-screen': ! isFull, 'el-icon-tuichuquanping iconfont': isFull }" @click="toggleFull"></i> </div> </template> <script> import screenfull from "screenfull" export default { name: 'FullScreen', data() { return { isFull: false } }, methods: { toggleFull() { if (! screenfull.isEnabled) { this.$message({ type: 'warning', message: 'you brower can not work' }) return false } screenfull.toggle() this.isFull = ! this.isFull } } } </script> <style scoped lang="scss"> </style>Copy the code

Page usage component

  • The introduction of

    import FullScreen from '@c/FullScreen'
Copy the code

  • registered

    components: { FullScreen }
Copy the code

  • use

    <full-screen></full-screen>
Copy the code

vueProject use of third partiesiconfontIcon steps

  • Alibaba Vector icon library: www.iconfont.cn/

  • Select the desired icon to add the icon to the shopping cart, then create the project, fill in the project information, add the selected icon to the project, download the icon for use

  • Create the iconFONT folder under Assets and place the downloaded files in iconfont

  • Introduce the iconfont. CSS style file in main.js

    import '@a/iconfont/iconfont.css'
Copy the code

  • The icon can then be used on the page (see exiting the full icon in this component)

    <i class="iconfont el-icon-xxx"><i>
Copy the code

The effect

The code address

Gitee.com/yunxii/vuv/…

Write in the last

Follow me, more content continues to output

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹