⚠️ This article is the first contract article in the nuggets community. It is prohibited to reprint without authorization

preface

A recent optimization of the project found a huge drag: a 78KB GIF:

What is this GIF for? It is to display a hollow Logo of our website when requesting some large area data, and then some golden liquid will fill the Logo like water overflowing golden mountain. Since I can’t show you the Logo of our company, I type it. However, although the Logo is not clear, it will also lead to unclear what kind of animation it is, so I changed a familiar Logo, and then used the component library packaging to show you what kind of effect it is:

No, we are the front end, why use this vulgar logo? We should do some front-end marks:

In fact, such a wave loading animation, can be written with CSS! Why use a 78K motion picture? How old is a vue.js? And this wave effect I remember a lot of articles have written about, I also have a collection! Click on the favorites to find the original article:

These waves look different from the wave on our Logo. How are these waves achieved?

After reading this picture, you should be able to understand, using the principle of covering, covering the original calm water, it looks like there is a wave, isn’t it? If you can’t figure out how the mist that looks like water vapor shrouds it, take a look below:It’s really just adivAdd rounded corners, like the one Xiaomi had for $2 millionLogoSame, then turn it around again, then change the color of the cover, and then use it againoverflow: hidden;Just hide the part outside the circle:Isn’t that clever? Unfortunately, there is a drawback to this approach: the background must be a solid color. Some of the pages on our site have background images. Think of this as a giveaway, because the cover is immediately visible against an irregular background. So what we needed was hollowed-out, and after a bit of searching I finally found the library of components I wanted:fancy-components”, which translates asFancy component library. Just by the name: It’s not likeElement UI,Ant DesignThat kind of component library, but can give us some more complex style of component library.

Fancy component library

First, it’s a web Components library that works well with all frameworks, whether you’re Vue, React, Angular, or Svelte, because it’s the native componentalization technology of JS. There is no framework that says it doesn’t support some part of the NATIVE JS API. There are pros and cons about this technology.

• Frameworks may be replaced in the future (this nonsense comes from a popular article on extranet)
• As compatibility gets better, mainstream frameworks will rewrite their componentized systems with Web Components (which is a bit more plausible)
• More and more component libraries will be written using Web Components due to good cross-framing (Fancy-Components is a good example)

In addition to Fancy-Components, one Web components component I use a lot is CSS doodle, which translates to CSS doodle. It’s not really a component library because it has only one component, but it can be painted in a kaleidoscope style, and it’s also a cool Web Components component:

If you are interested, you can go to site B to search: the up master is not able to learn from the front end, and see how the above effect is implemented.

You can already see this trend with many component libraries using Web Components as the underlying technology. But Web Components is rarely talked about at home, so component libraries that are good abroad don’t make it to the ears of the public.

Even the newly released Vue3.2 has a defineCustomElement method specifically designed to generate custom elements (one of the techniques of web components). There are already signs that this technology will be a big hit in the future, and compatibility issues were the main reason it didn’t catch on in the past.

But if there are optimists there must be pessimists, and the pessimists say,

• Almost every popular framework has its own componentized system why bother refactoring with Web Components?
• So many years have not fire up is not to give it time is its own failure ah!
• Are not compatibleIETechnology is not good technology

Why is it a bit of a myth that Web Components might replace frameworks in the future? Release the idea of the author thinks that the demise of the jQuery stems from a browser to achieve the document. The querySelector and document querySelectorAll method, it’s not as the main method of the jQuery $() some similar, who also with jq. So the same goes for Web Components: isn’t componentization the main selling point of modern frameworks? Browsers implement componentization natively, so modern frameworks will look like JQ in the future. (My personal feeling is bullshit)

After all, this article isn’t about Web Components, it’s just a library of components that fancy- Components are wrapped in Web Components, just a quick mention of Web Components. We just need to know how to use Fancy-components:

In the general project

A normal project is a project that simply creates an HTML file in a folder and starts writing code, without all the bells and whistles of engineering, Webpack, and Babel. Let’s create a new HTML and add type=”module” to the

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="UTF-8">
  <title>Public number: the front end does not learn to move</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html.body {
      height: 100%;
      display: grid;
      place-items: center;
    }
    fc-wave-filter{-width: 100px;
    }

    /* : The defined selector selects the defined element */
    /* There is no :undefined selector, so use the :not() selector with */
    /* This selector can be used to search for up */
    /* Find his introduction to Custom Elements at 17:25 */
    :not(:defined) {
      display: none;
    }
  </style>
</head>
<body>
  <! <fc-wave-filter> < fC-wave-filter > < fC-wave-filter >
  <fc-wave-filter color="# 047">
    <! Insert img image in slot -->
    <img src="data:image/svg+xml; base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOjFlbTtoZWlnaHQ6MWVtO3ZlcnRpY2FsLWFsaWduOm1pZGRsZSIgdmlld0JveD0iMCAwIDEwM jQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJjdXJyZW50Q29sb3IiIG92ZXJmbG93PSJoaWRkZW4iPjxwYXRoIGQ9I k0yNjQuMTI5IDI2MS4yNjJjNS4wMjUtNS45NCA0LjI4NS0xNS4yNS0zLjAwOS0yMS40MS02LjQ3NS01LjQzNS0xNi4wODUtMy45MzgtMjAuMzU0IDEuMTk4b C0zOC4wNzcgNDUuMzIzIDIzLjY2MiAxOS44NjYgMzcuNzc4LTQ0Ljk3N3ptLTQzLjkzNy01MC4wMTljLTYuMTQ0LTUuMTA0LTE1LjU2NS01LjI3Ny0xOS43O DctLjMxNWwtMzYuMjAzIDQzLjE2NiAyMi40MDIgMTguNzk0IDM1Ljc5My00Mi42NjFjNC41MzctNS4zNTcgNC41MDYtMTMuMzQ0LTIuMjA1LTE4Ljk4NHptN TY2LjQxMyAxMzUuODE0bC0yMi40NDktMjcuOTE2IDQ0LjcyNS02NS4zNzgtLjI4My0uMzE1LTczLjIwOCAzMC4xMjEtMjIuNjg2LTI3Ljc1OCA3Ny40OTMtO TkuNzIyIDE5LjEyNSAyMy42My00OC41MjIgNjMuNTA1IDc0LjE4NS0zMS44NyAyMC41MTIgMjUuMzYzLTQ2LjU2OSA2NS45MyA3Mi4yLTM0LjI4IDE5LjEyN iAyMy41OTktMTEzLjY0OSA1NS4wOTF6TTUwNy4xNjQgODA3LjAzOGMtMTY1LjYwNSAwLTI5OS44NzUtMTM0LjI1NC0yOTkuODc1LTI5OS44NzQgMC0xNjUuN TczIDEzNC4yNy0yOTkuODQzIDI5OS44NzUtMjk5Ljg0MyAxNjUuNjIgMCAyOTkuODc0IDEzNC4yNTQgMjk5Ljg3NCAyOTkuODQzIDAgMTY1LjYyLTEzNC4yN TQgMjk5Ljg3NC0yOTkuODc0IDI5OS44NzR6TTEyNi45MjkgMjY0Ljk4bDYwLjI5LTcxLjgyMmMxMi41MDgtMTQuODg3IDI5Ljk2NC0yNi43ODIgNDYuNTUyL TEyLjg0IDUuMTA1IDQuMjcgNy4yOTQgNS42ODggMTMuNTAxIDE3LjA0NiAxLjQ2NSA0LjAwMiAyLjU4NCAxMS4yOTYtLjE4OSAxOC40NDggMTQuNDE1LTguO TY0IDI5Ljc5LTYuMDM0IDM5LjcxNiAzLjYyMyAxNS4yODEgMTQuODU2IDEzLjA2IDMxLjk5Ni0xLjQ2NSA0OS4zMjZsLTYzLjU4MyA3NS43NzYtOTQuODIyL Tc5LjU1N3ptMzExLjYxLTIwMy4yNTZoMzcuMjI3bDMzLjYxOSA4OCAzMy42MTktODhoMzcuMTYzdjEyMy41NzNoLTI0LjczNHYtODYuM2wtMzIuNTQ3IDg2L jNoLTI3LjA1bC0zMi40ODQtODYuM3Y4Ni4zSDQzOC41NFY2MS43MjR6bTY4LjYyNS0yMy45OTRDMjQ3LjkxOCAzNy43MyAzNy43MyAyNDcuOTE4IDM3LjczI DUwNy4xNjRjMCAyNTkuMjc2IDIxMC4xODggNDY5LjQ4IDQ2OS40MzQgNDY5LjQ4IDI1OS4zMDggMCA0NjkuNDgtMjEwLjIwNCA0NjkuNDgtNDY5LjQ2NVM3N jYuNDcyIDM3LjcxNSA1MDcuMTY0IDM3LjcxNXptMCA3NDkuOTk0YzE1NC45ODYgMCAyODAuNjA3LTEyNS41OSAyODAuNjA3LTI4MC41Nkg1MDcuMTY0Vjc4N y43NHptLTI4MC41NzYtMjgwLjU2aDI4MC41NzZWMjI2LjYxOWMtMTU0Ljk3MSAwLTI4MC41NzYgMTI1LjYwNS0yODAuNTc2IDI4MC41NDV6bTI4MC41NzYgN Dg5LjYzYy0yNjkuOTU4IDAtNDg5LjY0Ni0yMTkuNjU3LTQ4OS42NDYtNDg5LjYzIDAtMjY5Ljk1OCAyMTkuNjg4LTQ4OS42MyA0ODkuNjQ2LTQ4OS42MyAyN zAuMDA1IDAgNDg5LjY0NSAyMTkuNjcyIDQ4OS42NDUgNDg5LjYzIDAgMjY5Ljk3My0yMTkuNjQgNDg5LjYzLTQ4OS42NDUgNDg5LjYzem0wLTk5Ni43OTRDM jI3LjUgMCAwIDIyNy41MDEgMCA1MDcuMTY0YzAgMjc5LjY2MiAyMjcuNTAxIDUwNy4xOTUgNTA3LjE2NCA1MDcuMTk1IDI3OS42OTMgMCA1MDcuMTc5LTIyN y41MzMgNTA3LjE3OS01MDcuMTk1QzEwMTQuMzQzIDIyNy41IDc4Ni44NTcgMCA1MDcuMTYzIDB6IiBmaWxsPSIjQjlCRUMzIi8+PC9zdmc+" />
  </fc-wave-filter>

  <script type="module">
    // Introduce FcWaveFilter from Fancy-Components
    import { FcWaveFilter } from 'https://unpkg.com/fancy-components'

    // new registers the component globally, equivalent to Vue's Vue.component('fc-wave-filter', FcWaveFilter)
    new FcWaveFilter()
  </script>
</body>
</html>
Copy the code

Pictures used:

infancy-componentsThere was a callFcWaveFilterComponent, which translates asThe wave filter, also very visual, with this component<img>Wrapping the label can look like this:

In the React project

npm i fancy-components

Import the component you want in the main file first, and then new it:

/* eslint-disable no-new */
import React from 'react'
import ReactDom from 'react-dom'.// Introduce FcWaveFilter from Fancy-Components
import { FcWaveFilter } from 'fancy-components'

// new registers the component globally, equivalent to Vue's Vue.component('fc-wave-filter', FcWaveFilter)
new FcWaveFilter()
Copy the code

Then when using (xxx.jsx) :

export default() = > (<fc-wave-filter color="# 047">
    <img src="data:image/svg+xml; base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOjFlbTtoZWlnaHQ6MWVtO3ZlcnRpY2FsLWFsaWduOm1pZGRsZSIgdmlld0JveD0iMCAwIDEwM jQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJjdXJyZW50Q29sb3IiIG92ZXJmbG93PSJoaWRkZW4iPjxwYXRoIGQ9I k0yNjQuMTI5IDI2MS4yNjJjNS4wMjUtNS45NCA0LjI4NS0xNS4yNS0zLjAwOS0yMS40MS02LjQ3NS01LjQzNS0xNi4wODUtMy45MzgtMjAuMzU0IDEuMTk4b C0zOC4wNzcgNDUuMzIzIDIzLjY2MiAxOS44NjYgMzcuNzc4LTQ0Ljk3N3ptLTQzLjkzNy01MC4wMTljLTYuMTQ0LTUuMTA0LTE1LjU2NS01LjI3Ny0xOS43O DctLjMxNWwtMzYuMjAzIDQzLjE2NiAyMi40MDIgMTguNzk0IDM1Ljc5My00Mi42NjFjNC41MzctNS4zNTcgNC41MDYtMTMuMzQ0LTIuMjA1LTE4Ljk4NHptN TY2LjQxMyAxMzUuODE0bC0yMi40NDktMjcuOTE2IDQ0LjcyNS02NS4zNzgtLjI4My0uMzE1LTczLjIwOCAzMC4xMjEtMjIuNjg2LTI3Ljc1OCA3Ny40OTMtO TkuNzIyIDE5LjEyNSAyMy42My00OC41MjIgNjMuNTA1IDc0LjE4NS0zMS44NyAyMC41MTIgMjUuMzYzLTQ2LjU2OSA2NS45MyA3Mi4yLTM0LjI4IDE5LjEyN iAyMy41OTktMTEzLjY0OSA1NS4wOTF6TTUwNy4xNjQgODA3LjAzOGMtMTY1LjYwNSAwLTI5OS44NzUtMTM0LjI1NC0yOTkuODc1LTI5OS44NzQgMC0xNjUuN TczIDEzNC4yNy0yOTkuODQzIDI5OS44NzUtMjk5Ljg0MyAxNjUuNjIgMCAyOTkuODc0IDEzNC4yNTQgMjk5Ljg3NCAyOTkuODQzIDAgMTY1LjYyLTEzNC4yN TQgMjk5Ljg3NC0yOTkuODc0IDI5OS44NzR6TTEyNi45MjkgMjY0Ljk4bDYwLjI5LTcxLjgyMmMxMi41MDgtMTQuODg3IDI5Ljk2NC0yNi43ODIgNDYuNTUyL TEyLjg0IDUuMTA1IDQuMjcgNy4yOTQgNS42ODggMTMuNTAxIDE3LjA0NiAxLjQ2NSA0LjAwMiAyLjU4NCAxMS4yOTYtLjE4OSAxOC40NDggMTQuNDE1LTguO TY0IDI5Ljc5LTYuMDM0IDM5LjcxNiAzLjYyMyAxNS4yODEgMTQuODU2IDEzLjA2IDMxLjk5Ni0xLjQ2NSA0OS4zMjZsLTYzLjU4MyA3NS43NzYtOTQuODIyL Tc5LjU1N3ptMzExLjYxLTIwMy4yNTZoMzcuMjI3bDMzLjYxOSA4OCAzMy42MTktODhoMzcuMTYzdjEyMy41NzNoLTI0LjczNHYtODYuM2wtMzIuNTQ3IDg2L jNoLTI3LjA1bC0zMi40ODQtODYuM3Y4Ni4zSDQzOC41NFY2MS43MjR6bTY4LjYyNS0yMy45OTRDMjQ3LjkxOCAzNy43MyAzNy43MyAyNDcuOTE4IDM3LjczI DUwNy4xNjRjMCAyNTkuMjc2IDIxMC4xODggNDY5LjQ4IDQ2OS40MzQgNDY5LjQ4IDI1OS4zMDggMCA0NjkuNDgtMjEwLjIwNCA0NjkuNDgtNDY5LjQ2NVM3N jYuNDcyIDM3LjcxNSA1MDcuMTY0IDM3LjcxNXptMCA3NDkuOTk0YzE1NC45ODYgMCAyODAuNjA3LTEyNS41OSAyODAuNjA3LTI4MC41Nkg1MDcuMTY0Vjc4N y43NHptLTI4MC41NzYtMjgwLjU2aDI4MC41NzZWMjI2LjYxOWMtMTU0Ljk3MSAwLTI4MC41NzYgMTI1LjYwNS0yODAuNTc2IDI4MC41NDV6bTI4MC41NzYgN Dg5LjYzYy0yNjkuOTU4IDAtNDg5LjY0Ni0yMTkuNjU3LTQ4OS42NDYtNDg5LjYzIDAtMjY5Ljk1OCAyMTkuNjg4LTQ4OS42MyA0ODkuNjQ2LTQ4OS42MyAyN zAuMDA1IDAgNDg5LjY0NSAyMTkuNjcyIDQ4OS42NDUgNDg5LjYzIDAgMjY5Ljk3My0yMTkuNjQgNDg5LjYzLTQ4OS42NDUgNDg5LjYzem0wLTk5Ni43OTRDM jI3LjUgMCAwIDIyNy41MDEgMCA1MDcuMTY0YzAgMjc5LjY2MiAyMjcuNTAxIDUwNy4xOTUgNTA3LjE2NCA1MDcuMTk1IDI3OS42OTMgMCA1MDcuMTc5LTIyN y41MzMgNTA3LjE3OS01MDcuMTk1QzEwMTQuMzQzIDIyNy41IDc4Ni44NTcgMCA1MDcuMTYzIDB6IiBmaWxsPSIjQjlCRUMzIi8+PC9zdmc+" />
  </fc-wave-filter>
)
Copy the code

Be careful not to write it as a hump:

Because you’re used to writing components, this is the natural way to write components. < FC-wave-filter > is a native HTML tag, just like the

// Don't write it like this:
import { FcWaveFilter } from 'fancy-components'

export default() = > (<fc-wave-filter color="# 047">
    <img src="data:image/svg+xml; base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOjFlbTtoZWlnaHQ6MWVtO3ZlcnRpY2FsLWFsaWduOm1pZGRsZSIgdmlld0JveD0iMCAwIDEwM jQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJjdXJyZW50Q29sb3IiIG92ZXJmbG93PSJoaWRkZW4iPjxwYXRoIGQ9I k0yNjQuMTI5IDI2MS4yNjJjNS4wMjUtNS45NCA0LjI4NS0xNS4yNS0zLjAwOS0yMS40MS02LjQ3NS01LjQzNS0xNi4wODUtMy45MzgtMjAuMzU0IDEuMTk4b C0zOC4wNzcgNDUuMzIzIDIzLjY2MiAxOS44NjYgMzcuNzc4LTQ0Ljk3N3ptLTQzLjkzNy01MC4wMTljLTYuMTQ0LTUuMTA0LTE1LjU2NS01LjI3Ny0xOS43O DctLjMxNWwtMzYuMjAzIDQzLjE2NiAyMi40MDIgMTguNzk0IDM1Ljc5My00Mi42NjFjNC41MzctNS4zNTcgNC41MDYtMTMuMzQ0LTIuMjA1LTE4Ljk4NHptN TY2LjQxMyAxMzUuODE0bC0yMi40NDktMjcuOTE2IDQ0LjcyNS02NS4zNzgtLjI4My0uMzE1LTczLjIwOCAzMC4xMjEtMjIuNjg2LTI3Ljc1OCA3Ny40OTMtO TkuNzIyIDE5LjEyNSAyMy42My00OC41MjIgNjMuNTA1IDc0LjE4NS0zMS44NyAyMC41MTIgMjUuMzYzLTQ2LjU2OSA2NS45MyA3Mi4yLTM0LjI4IDE5LjEyN iAyMy41OTktMTEzLjY0OSA1NS4wOTF6TTUwNy4xNjQgODA3LjAzOGMtMTY1LjYwNSAwLTI5OS44NzUtMTM0LjI1NC0yOTkuODc1LTI5OS44NzQgMC0xNjUuN TczIDEzNC4yNy0yOTkuODQzIDI5OS44NzUtMjk5Ljg0MyAxNjUuNjIgMCAyOTkuODc0IDEzNC4yNTQgMjk5Ljg3NCAyOTkuODQzIDAgMTY1LjYyLTEzNC4yN TQgMjk5Ljg3NC0yOTkuODc0IDI5OS44NzR6TTEyNi45MjkgMjY0Ljk4bDYwLjI5LTcxLjgyMmMxMi41MDgtMTQuODg3IDI5Ljk2NC0yNi43ODIgNDYuNTUyL TEyLjg0IDUuMTA1IDQuMjcgNy4yOTQgNS42ODggMTMuNTAxIDE3LjA0NiAxLjQ2NSA0LjAwMiAyLjU4NCAxMS4yOTYtLjE4OSAxOC40NDggMTQuNDE1LTguO TY0IDI5Ljc5LTYuMDM0IDM5LjcxNiAzLjYyMyAxNS4yODEgMTQuODU2IDEzLjA2IDMxLjk5Ni0xLjQ2NSA0OS4zMjZsLTYzLjU4MyA3NS43NzYtOTQuODIyL Tc5LjU1N3ptMzExLjYxLTIwMy4yNTZoMzcuMjI3bDMzLjYxOSA4OCAzMy42MTktODhoMzcuMTYzdjEyMy41NzNoLTI0LjczNHYtODYuM2wtMzIuNTQ3IDg2L jNoLTI3LjA1bC0zMi40ODQtODYuM3Y4Ni4zSDQzOC41NFY2MS43MjR6bTY4LjYyNS0yMy45OTRDMjQ3LjkxOCAzNy43MyAzNy43MyAyNDcuOTE4IDM3LjczI DUwNy4xNjRjMCAyNTkuMjc2IDIxMC4xODggNDY5LjQ4IDQ2OS40MzQgNDY5LjQ4IDI1OS4zMDggMCA0NjkuNDgtMjEwLjIwNCA0NjkuNDgtNDY5LjQ2NVM3N jYuNDcyIDM3LjcxNSA1MDcuMTY0IDM3LjcxNXptMCA3NDkuOTk0YzE1NC45ODYgMCAyODAuNjA3LTEyNS41OSAyODAuNjA3LTI4MC41Nkg1MDcuMTY0Vjc4N y43NHptLTI4MC41NzYtMjgwLjU2aDI4MC41NzZWMjI2LjYxOWMtMTU0Ljk3MSAwLTI4MC41NzYgMTI1LjYwNS0yODAuNTc2IDI4MC41NDV6bTI4MC41NzYgN Dg5LjYzYy0yNjkuOTU4IDAtNDg5LjY0Ni0yMTkuNjU3LTQ4OS42NDYtNDg5LjYzIDAtMjY5Ljk1OCAyMTkuNjg4LTQ4OS42MyA0ODkuNjQ2LTQ4OS42MyAyN zAuMDA1IDAgNDg5LjY0NSAyMTkuNjcyIDQ4OS42NDUgNDg5LjYzIDAgMjY5Ljk3My0yMTkuNjQgNDg5LjYzLTQ4OS42NDUgNDg5LjYzem0wLTk5Ni43OTRDM jI3LjUgMCAwIDIyNy41MDEgMCA1MDcuMTY0YzAgMjc5LjY2MiAyMjcuNTAxIDUwNy4xOTUgNTA3LjE2NCA1MDcuMTk1IDI3OS42OTMgMCA1MDcuMTc5LTIyN y41MzMgNTA3LjE3OS01MDcuMTk1QzEwMTQuMzQzIDIyNy41IDc4Ni44NTcgMCA1MDcuMTYzIDB6IiBmaWxsPSIjQjlCRUMzIi8+PC9zdmc+" />
  </fc-wave-filter>
)
Copy the code

As long as we introduce and new in the main file:

import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()
Copy the code

In Vue2

The nice thing about React is that components are written differently from native tags and are easily distinguishable:

import Ul form 'xxx'

export default() = > (<Ul>
    <li/>
  </Ul>
)
Copy the code

The upper case hump tag is a component, and the lower case tag is an HTML tag, which is relatively easy to distinguish.

Vue components, however, can be written either as a hump beginning with a capital letter or as a dash beginning with a lowercase letter. So the question is: when we write a component connected by a dash, how does it know whether we’re writing a component or a label?

It does this by listing all HTML and SVG tags, as long as the tags you write are not in the scope, you are a component by default, and if you have not registered in components, a warning will be printed on the console. So we tell Vue: Don’t warn me about tags that are not HTML tags, not SVG tags, and not a Vue component. I’m pretty sure this isn’t a mistake!

npm i fancy-components

Again, go to the main file and introduce fancy-Components:

import Vue from 'vue'
import App from './App'
import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

new Vue({
  render: h= > h(App)
}).$mount('#app')
Copy the code

Then use vue.config to configure which tags to ignore:

import Vue from 'vue'
import App from './App'
import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

// The configuration ignores elements starting with fc-
Vue.config.ignoredElements = [/^fc-/]

new Vue({
  render: h= > h(App)
}).$mount('#app')
Copy the code

In use (xxx.vue) :

<template>
  <fc-wave-filter color="# 047">
    <img src="data:image/svg+xml; base64,PHN2ZyBjbGFzcz0iaWNvbiIgc3R5bGU9IndpZHRoOjFlbTtoZWlnaHQ6MWVtO3ZlcnRpY2FsLWFsaWduOm1pZGRsZSIgdmlld0JveD0iMCAwIDEwM jQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJjdXJyZW50Q29sb3IiIG92ZXJmbG93PSJoaWRkZW4iPjxwYXRoIGQ9I k0yNjQuMTI5IDI2MS4yNjJjNS4wMjUtNS45NCA0LjI4NS0xNS4yNS0zLjAwOS0yMS40MS02LjQ3NS01LjQzNS0xNi4wODUtMy45MzgtMjAuMzU0IDEuMTk4b C0zOC4wNzcgNDUuMzIzIDIzLjY2MiAxOS44NjYgMzcuNzc4LTQ0Ljk3N3ptLTQzLjkzNy01MC4wMTljLTYuMTQ0LTUuMTA0LTE1LjU2NS01LjI3Ny0xOS43O DctLjMxNWwtMzYuMjAzIDQzLjE2NiAyMi40MDIgMTguNzk0IDM1Ljc5My00Mi42NjFjNC41MzctNS4zNTcgNC41MDYtMTMuMzQ0LTIuMjA1LTE4Ljk4NHptN TY2LjQxMyAxMzUuODE0bC0yMi40NDktMjcuOTE2IDQ0LjcyNS02NS4zNzgtLjI4My0uMzE1LTczLjIwOCAzMC4xMjEtMjIuNjg2LTI3Ljc1OCA3Ny40OTMtO TkuNzIyIDE5LjEyNSAyMy42My00OC41MjIgNjMuNTA1IDc0LjE4NS0zMS44NyAyMC41MTIgMjUuMzYzLTQ2LjU2OSA2NS45MyA3Mi4yLTM0LjI4IDE5LjEyN iAyMy41OTktMTEzLjY0OSA1NS4wOTF6TTUwNy4xNjQgODA3LjAzOGMtMTY1LjYwNSAwLTI5OS44NzUtMTM0LjI1NC0yOTkuODc1LTI5OS44NzQgMC0xNjUuN TczIDEzNC4yNy0yOTkuODQzIDI5OS44NzUtMjk5Ljg0MyAxNjUuNjIgMCAyOTkuODc0IDEzNC4yNTQgMjk5Ljg3NCAyOTkuODQzIDAgMTY1LjYyLTEzNC4yN TQgMjk5Ljg3NC0yOTkuODc0IDI5OS44NzR6TTEyNi45MjkgMjY0Ljk4bDYwLjI5LTcxLjgyMmMxMi41MDgtMTQuODg3IDI5Ljk2NC0yNi43ODIgNDYuNTUyL TEyLjg0IDUuMTA1IDQuMjcgNy4yOTQgNS42ODggMTMuNTAxIDE3LjA0NiAxLjQ2NSA0LjAwMiAyLjU4NCAxMS4yOTYtLjE4OSAxOC40NDggMTQuNDE1LTguO TY0IDI5Ljc5LTYuMDM0IDM5LjcxNiAzLjYyMyAxNS4yODEgMTQuODU2IDEzLjA2IDMxLjk5Ni0xLjQ2NSA0OS4zMjZsLTYzLjU4MyA3NS43NzYtOTQuODIyL Tc5LjU1N3ptMzExLjYxLTIwMy4yNTZoMzcuMjI3bDMzLjYxOSA4OCAzMy42MTktODhoMzcuMTYzdjEyMy41NzNoLTI0LjczNHYtODYuM2wtMzIuNTQ3IDg2L jNoLTI3LjA1bC0zMi40ODQtODYuM3Y4Ni4zSDQzOC41NFY2MS43MjR6bTY4LjYyNS0yMy45OTRDMjQ3LjkxOCAzNy43MyAzNy43MyAyNDcuOTE4IDM3LjczI DUwNy4xNjRjMCAyNTkuMjc2IDIxMC4xODggNDY5LjQ4IDQ2OS40MzQgNDY5LjQ4IDI1OS4zMDggMCA0NjkuNDgtMjEwLjIwNCA0NjkuNDgtNDY5LjQ2NVM3N jYuNDcyIDM3LjcxNSA1MDcuMTY0IDM3LjcxNXptMCA3NDkuOTk0YzE1NC45ODYgMCAyODAuNjA3LTEyNS41OSAyODAuNjA3LTI4MC41Nkg1MDcuMTY0Vjc4N y43NHptLTI4MC41NzYtMjgwLjU2aDI4MC41NzZWMjI2LjYxOWMtMTU0Ljk3MSAwLTI4MC41NzYgMTI1LjYwNS0yODAuNTc2IDI4MC41NDV6bTI4MC41NzYgN Dg5LjYzYy0yNjkuOTU4IDAtNDg5LjY0Ni0yMTkuNjU3LTQ4OS42NDYtNDg5LjYzIDAtMjY5Ljk1OCAyMTkuNjg4LTQ4OS42MyA0ODkuNjQ2LTQ4OS42MyAyN zAuMDA1IDAgNDg5LjY0NSAyMTkuNjcyIDQ4OS42NDUgNDg5LjYzIDAgMjY5Ljk3My0yMTkuNjQgNDg5LjYzLTQ4OS42NDUgNDg5LjYzem0wLTk5Ni43OTRDM jI3LjUgMCAwIDIyNy41MDEgMCA1MDcuMTY0YzAgMjc5LjY2MiAyMjcuNTAxIDUwNy4xOTUgNTA3LjE2NCA1MDcuMTk1IDI3OS42OTMgMCA1MDcuMTc5LTIyN y41MzMgNTA3LjE3OS01MDcuMTk1QzEwMTQuMzQzIDIyNy41IDc4Ni44NTcgMCA1MDcuMTYzIDB6IiBmaWxsPSIjQjlCRUMzIi8+PC9zdmc+" />
  </fc-wave-filter>
</template>

<script>
export default {
  components: {
    < fC-wave-filter > is a browser native tag without registering here}}</script>
Copy the code

In Vue3 project of VUE-CLI

There has been a big change in the way Vue3 is written. Instead of Vue, there is app:

import { createApp } from 'vue'
import App from './App'
import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

createApp(App).mount('#app')
Copy the code

So is it ok to change the original Vue into APP?

/ / before
Vue.config.ignoredElements = [/^fc-/]

/ / now,
app.config.ignoredElements = [/^fc-/]
Copy the code

Unfortunately the answer is no, Vue3 is a bit more complicated to handle, we need to create vue.config.js in the root directory (if not, create a new one yourself) :

module.exports = {
    chainWebpack: config= > {
        config.module
            .rule('vue')
            .use('vue-loader')
            .tap(options= >{ options.compilerOptions = { ... (options.compilerOptions || {}),isCustomElement: tag= > tag.startsWith('fc-')}return options
            })
    }
}
Copy the code

That’s it!

In Vite’s Vue3 project

npm i fancy-components

Go to the main file and introduce Fancy-Components and new:

import { createApp } from 'vue'
import App from './App'
import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter()

createApp(App).mount('#app')
Copy the code

Then go to vite.config.js and change the configuration to this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: tag= > tag.startsWith('fc-'}}})]})Copy the code

Recommended Vite template

Now many people are using Vite, but did not find that Vite unlike vue-CLI, can let us choose a relatively complete project, Vue3 project created by Vite can be regarded as very simple, VUex, VUe-Router these do not have I will not mention, You don’t even have esLint, postCSS, etc. You need to configure it yourself.

However, as you all know, where there is a need, there are wheels. There must be someone on GitHub who has prepared the wheels for us. After a long search, I finally found a project that better meets my needs: github.com/GetKnowledg…

My favorite part is that the documents are all in Chinese, not that I can’t read English, but English is not as comfortable as Chinese. Usage:

NPX degit GetKnowledgeByGitHub/vite own project name

Let’s say we want to create a project on the desktop called my-FxxKing-app

Then we will open a command line and came to the desktop folder, input: NPX degit GetKnowledgeByGitHub/vite my – fxxking – app. Then go to the my-fxxking-app folder and NPM install to install the dependency.

As soon as YARN Dev starts up after I have installed the dependencies, the page opens and I call it “Dude”! Have to admire the author’s imagination:

A sense of joy 😂 a feeling of joy. Fancy-components library is used in this project, just for its Chinese wind 🇨🇳 I must give a star!

Basic usage

Assuming we have NPM I Fancy-Components installed and already registered in the main file (main.js or index.js) :

import { FcWaveFilter } from 'fancy-components'

/* eslint-disable no-new */
new FcWaveFilter() Note: Web Components do not register components locally
Copy the code

And if the Vue project is configured to ignore the web Components starting with FC -, then we only need to wrap a light gray (preferably solid color) hollow image with < fC-wave-filter > :

<fc-wave-filter>
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

Pictures used:

End result:

As you can see, < fC-wave-filter > smartly adds a wave effect for us, but this wave is not what we want because we didn’t specify a color, so it defaults to black. Black with this flower pattern… It’s like a loading animation for some funeral website…

I think you recognize this symbol, right? It is huawei’s standard, and the original color should be Chinese red, so we wrote color attribute in < fC-wave-filter > :

<fc-wave-filter color="#dd1028">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

Does that make it look better? In addition to the color attribute in the < fC-wave-filter > tag, we can also write the –color attribute in CSS:

<template>
  <fc-wave-filter>
    <img src="xxx.png" />
  </fc-wave-filter>
</template>

<style scoped>
fc-wave-filter{-color: #dd1028;
}
</style>
Copy the code

The effect is the same. However, some people may not understand why we use –color instead of the color property, because the color property controls the color of the font, and it does not control our fill color. And the property with the — in front of it is called a custom property, and it’s inside Fancy-Components that encapsulates where we’re going to use that custom property, and a custom property is also called a CSS variable, so if you’re not sure what a CSS variable is, you can click on this link.

The color attribute in the ⚠️ tag takes precedence over the –color CSS variable, and it is best not to mix the two.

This wave filter is perfect for flat labels. What is a flat label? Let’s start with a counter example:

Isn’t that a cute logo? A very three-dimensional feeling, accompanied by flashes of light in the sun, which, while handsome in reality, does not fit well on a flat surface:

I think it would be better to make that black and white line in the upper left corner on a plan like this:

But it’s not really pretty, because there are a lot of lines that describe the edges and corners of solid shapes. Flat is better to be concise:

The lines are a little rough… So NISSAN did not adopt the LOGO, and instead created a new one that was truly flat:

This time put on the poster will look much better:

The benefits of flattening are also presented in exhibitions:

Let’s use < fC-wave-filter > to wrap the label:

You can see that the effect of the wave is really not obvious, the effect is general, but not as rough as it used to be:

What does this prove? Proof that thin lines are not suitable for wave effects? Let’s try a Logo that also has thin lines:

So this proves that a simple thin Logo works just as well with wave effects as it does with thin but complex lines.

So what if the NISSAN Logo was meant to be a Logo loading effect? There is another way to do this, which is to modify the amplitude:

The amplitude is just how big the wave is, and the bigger the amplitude, the bigger the wave. < fC-wave-filter > < amplitude > < amplitude=”1″ amplitude is 1 times the default amplitude, any number multiplied by 1 is equal to itself. So if we want to make it bigger we can give it a amplitude of “1.5” which means it’s 1.5 times the amplitude. So by the same logic, anything times 0 is equal to 0. We gave a amplitude=”0″ not to indicate that the amplitude is 0, not wave up?

<fc-wave-filter color="#dd1028" amplitude="0">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

Now that there are no waves, the speed is a little slow. The default is 3 seconds from empty to full animation. To change this value, use the dur property, short for duration, and let it fill in 2 seconds:

<fc-wave-filter color="#dd1028" amplitude="0" dur="2">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

For the record, I just think this logo is representative. NISSAN does not pay me for the advertisement. Please send me money 😆 as soon as you see it

In our daily life, some people always show various brand logos intentionally or unintentionally. For example, someone likes to take photos of coffee with Starbucks Logo on moments, which proves that some people want to show more marks on purpose, right? Let’s see what we have so far:

Fill her up and then immediately empty it and refill it again, right? How does that work? We want to stay a little longer after we fill her up and show off her beautiful face! We need delay=”1″ to keep the fluid filling her body for another second:

<fc-wave-filter color="# 006241" delay="1">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

Delay, DUr, amplitude this kind of digital attributes are to support decimals, such as delay=”1″ this integer is too loaded B deliberately, generally we give 0.3 seconds is enough to show our logo. Beyond that, the effect may not be very good, as you have seen…

However, this component is not perfect, some symbols work well when wrapped in it, while others don’t work well with wave effects.

Did you notice that the logos we just showed basically all have some common features? It doesn’t matter if they’re round or square or triangular, they’re about the same length and width, which means they’re almost square. Be aware that some logos are too long or too wide, usually because of a bunch of characters added to the right of the square Logo:

This kind of mark is also very common! A graphic Logo on the left + a text Logo on the right. The effect of the standard wave filter looks like this:

It can be seen that the wave is flattened because the mark is too wide, so let’s modify the amplitude to double the original wave:

<fc-wave-filter color="# 006241" amplitude="2">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

The effect also seems to be ok, not as bad as I thought, but still a little square with this wave filter will look better:

With the Windows logo and blue waves, it really looks like water is pouring out of the window.

Advanced usage

Have you noticed that the images we use are all light gray solid color images, so that they look better when filled with bright colors? What if instead of solid color images, we use bright color images:

Results:

You can see that the effect is really not very good, because the wave is according to the picture hollow or not to fill, but like this picture in no hollow place is also a lot of details, such as: hair, hexenbiest hat, golden hoop, skirt… But the wave fills in all these details, and when it fills in we see only a silhouette, only a silhouette. Although the outline of this little witch can be seen, but is there a way to retain the details of the unhollowed-out part? Of course the answer is yes, our current fill mode is based on transparency by default, the transparent part is not filled, the opaque part is filled, so that the black and white fill mode, which is naturally suitable for the black and white label:

But not for colorful images, so we’ll use another mode: brightness mode. Take this picture of the little witch for example:

We humans are visual animals and can distinguish rich colors, but what about color blindness? They can’t tell colors. Is this what they see as a little witch?

The answer is no, they can’t see the world in silhouette, they can see details, but they can see it in brightness: The part of the witch’s skin that is exposed is light color, the magic stick in her hand and the orange color that is similar to the magic stick are dark light color, the hair and dress are dark color, and the dress and hat are very dark color. This is the brightness pattern.

Mode =”luminance” mode=”luminance”

<fc-wave-filter color="# 047" mode="luminance">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

The brightness mode fills with the same color we specified with the color property, but with a different opacity depending on the brightness:

Although the details can be seen after filling:

But it doesn’t feel much better. It would be nice if we filled it with the color of the image, like this:

The color attribute can only be used for solid colors. We will also use the fill mode property mode, which can be given four values: alpha, luminance, IMG, and slideshow.

<fc-wave-filter mode="img">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

If mode=”img”, you do not need to specify the color attribute, because it does not depend on the color, but on the image:

Why is it different from the way it used to be:

It used to be that we needed to use that image as the background, then regenerate it into a solid color wave animation, and then superimpose the two together, which is basically equivalent to:

But now we set mode to img, and if we keep the old way, we will change it to:

Since there is an identical background and the fill is filled with the exact same colors and shapes, the end result is nothing:

This means that when mode=”img”, the image is not used as the background, only the image is used as the fill. What if we still want a background? Easy! Let’s just upload two images:

Let’s first drag out the outline of the little witch and generate a picture separately:

Then pass in the full version of the enchantress as the first child element, and the enchantress outline as the second child element:

<fc-wave-filter mode="img">

  <! -- The first one represents the fill -->
  <img src="xxx.png" />

  <! -- The second one represents the background -->
  <img src="xxx.png" />

</fc-wave-filter>
Copy the code

End result:

How’s that？ Isn’t he gorgeous? The principle is actually very simple, just like this:

There are many different effects you can try, depending on your creativity and material:

But a few key points to note:

• The two images must be of the same size
• The two graphs must be related
• The position must be aligned
• Don’t get the order wrong

It doesn’t matter if the pictures we post are different in size and irrelevant:

Slide mode

We are in a lot of film and television or comics seen such a scene: leading role originally is a gentle honest man, even being bullied at ordinary times was also just laughed, but suddenly something happened: perhaps being interchangeable body, may be influenced by what the heavy blow, or is it for some reason lead to personality changes…

At this time, the original mild character of the protagonist starts to “bad”, we are surprised to find that the protagonist becomes more handsome after bad, such as the venom infected spider-man:

Different facial expressions make the whole face look different:

Another example is karkarot after the bad guys swap their bodies:

This is perfect for slide mode. I was looking for different facial expressions with the same outline of the same person, but I couldn’t find them for a long time. Instead, I found these three images:

Slideshow mode=”slideshow”

<fc-wave-filter mode="slideshow">
  <img src="Sun Wukong (Kakarote).png" />
  <img src="Friesa.png" />
  <img src="Bic (piccolo).png" />
</fc-wave-filter>
Copy the code

It works well, too. Imagine if we could find different facial expressions of the same character with the same outline, such as a Silly Kakarot, a Super Saian Kakarot, and a kakarot with the body changed by the bad guy.

We want to be able to switch to an image and stay for a moment to show it. What properties should we use? Delay?

<fc-wave-filter mode="slideshow" delay="2">
  <img src="Friesa.png" />
  <img src="Bic (piccolo).png" />
</fc-wave-filter>
Copy the code

You probably won’t feel anything wrong because the dynamic graph posted is an infinite loop, so let’s look at it frame by frame:

Started the first picture directly by wave effects to cut in the past, here we are actually want to come in the first picture is to show two seconds to switch again, the red box that part of the picture is correct, it will always show two seconds, then cut back to the first one will show two seconds, only first opening will not display switch directly, is this a bug? No, delay is not mainly used in this kind of situation, but in the situation where we want to show the logo for a longer time:

While it’s true that we want to show the logo a little bit longer, if you start with a two-second delay and don’t have any padding, you might think it’s stuck or that it’s a static image. Because many of these animations are applied in loading animation scenes, as long as there is not a large amount of data or a special network card, the loading time usually does not exceed half a second, and during this half second and a second time, the logo is not moving, which is not good. So delay only adds delay effects at the end of the animation.

But now what if instead of loading animations, we want to animate slides? The answer is the interval property, which is used exactly the same way as delay, passing in a number that will delay a few seconds:

<fc-wave-filter mode="slideshow" interval="2">
  <img src="Friesa.png" />
  <img src="Bic (piccolo).png" />
</fc-wave-filter>
Copy the code

The difference is that interval is delayed at the beginning of the animation:

This is perfect for our slideshow! Just remember to use the Delay property for the fill animation and the Inerval property for the slide animation.

⚠️ should not be used at the same time because delay applies to both properties

The principle of analysis

I’m sure you’re just as curious as I am about how Fancy-Components works. Not only do we need to know how to use it, but we also need to understand how it works.

And then hide the parts that are exposed:

Doesn’t it look like a wave? But we don’t want a square wave, so let’s try a different shape:

Make the background a little darker:

Finally remove the exposed part of the wave:

Then we add a light grey background:

And that’s it:

So how did we achieve this weird shape? The answer is the clip-path or mask attribute, if we have an image like this:

We want to change the shape of this picture to a heart ❤️ shape! So we need to prepare an ❤️ heart-shaped picture first:

Note that the image needs to be a hollowed-out PNG, where the heart is opaque and everything else is transparent, and code like this:

<template>
  <img src="girl.gif" />
</template>

<style scoped>
img {
  -webkit-mask: url(xxx/heart.png)}</style>
Copy the code

Why a heart and a half ❤️? This is because mask is a property similar to background and is tiled by default if you don’t want it tiled:

<template>
  <img src="girl.png" />
</template>

<style scoped>
img {
  -webkit-mask: url(xxx/heart.png);
  -webkit-mask-repeat: no-repeat;
}
</style>
Copy the code

Similarly, if we change the little Sister GIF into a wave animation, it will become:

The < fC-wave-filter > component uses the image we uploaded as the background image, and then uses the background image as the mask for the wave animation to make the wave look like the image we uploaded. Finally, the image we uploaded and the image shaped wave are superimposed on each other to form:

Have to say this train of thought is really wonderful ah! However, < FC-wave-filter > does not use the MASK attribute of CSS, but the

tag of SVG. Because it needs to implement various complicated functions such as picture mode and slide mode, it must use the lower-level SVG, which can show the author’s deep SVG knowledge. I went to his GitHub and gave him a thumb-up, hoping that he would not feel discouraged because no one paid attention to his project and would not bring forth new ideas.

Their packaging

In fact, ordinary people can also achieve this effect, assuming that everyone does not know SVG and cannot draw the wave, we will use a stupid method:

Then hide the part that is exposed:

< FC-wave-filter > < fC-wave-filter > < fC-wave-filter > < fC-wave-filter > < fC-wave-filter > < fC-wave-filter > < fC-wave-filter > < fC-wave-filter > < fC-wave-filter > < fC-wave-filter >

This wave is not as good as < FC-wave-filter >, it feels a bit fake… Forget it, let’s just use someone else’s:

This one looks a lot better.

Summary of Basic Usage

High level usage may not be as common as the basic usage, so let’s focus on the basic usage. First we pass an image in

:

<fc-wave-filter>
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

This picture should be a light gray solid color hollow out:

The width of the component is the width of the image we passed in. If you want to change the width of the component, it is best to use the CSS –width and –height properties:

<template>
  <fc-wave-filter>
    <img src="xxx.png" />
  </fc-wave-filter>
</template>

<style scoped>
fc-wave-filter{-width: 120px;
  --height: 100px;
}
</style>
Copy the code

The advantage of using –width and –height is that if you specify only one width or only one height, the component will maintain the scale of the image, but if you specify width and height, specifying only one may not be correct for the other.

You can also specify the fill color with –color:

<template>
  <fc-wave-filter>
    <img src="xxx.png" />
  </fc-wave-filter>
</template>

<style scoped>
fc-wave-filter{-width: 120px;
  --color: # 987129;
}
</style>
Copy the code

Instead of writing –color in your CSS, you can also write the color property in the component’s tag, and the effect is the same:

<fc-wave-filter color="# 987129">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

The color attribute in the ⚠️ tag takes precedence over the –color CSS variable, and it is best not to mix the two.

There are 6 properties in the tag, which are color, DUr, amplitude, delay, mode and interval:

<fc-wave-filter color="xxx" dur="xxx" amplitude="xxx" delay="xxx" mode="xxx" interval="xxx">
  <img src="xxx.png" />
</fc-wave-filter>
Copy the code

In addition to writing these attributes in the tag, we can also use dom.xxx as we used to do with the DOM:

<template>
  <fc-wave-filter ref="dom">
    <img src="xxx.png" />
  </fc-wave-filter>
</template>

<script>
export default {
  mounted () {
    const { dom } = this.$refs
    
    dom.id = 'xxx'
    dom.className = 'xxx'
    
    dom.color = 'xxx'
    dom.mode = 'xxx'
    dom.dur = 123
    dom.amplitude = 456
    dom.delay = 789
    dom.interval = Awesome!}}</script>
Copy the code

The effect is the same.

But here’s a caveat: Google’s kernel browser will stop animation after running wave animation by dynamically changing color, mode, dur, amplitude, delay, interval. This is a bug in Google’s SVG SMIL animation support. Firefox and Safari do not have this problem. There is no good way to solve it. However, there is rarely a requirement to dynamically change the wave pattern and other attributes, which are set up in advance on the label.

If you really need to change the behavior of the wave dynamically according to certain conditions, such as normal mode and image mode, you can write two tags and use V-if to switch:

<template>
  <fc-wave-filter :mode="mode">
   <img src="xxx.png" />
  </fc-wave-filter>
</template>

<script>
export default {
  data: () = > ({ mode: 'img' }),
  mounted () {
    // Do not dynamically change the value of color, mode, dur, amplitude, delay, interval, etc
    setTimeout(() = > this.mode = 'alpha'.3500)}}</script>
<! -- This is a bug in The Google Kernel browser -->
Copy the code

<! -- If dynamic change is necessary according to certain conditions, it is recommended to write like this.
<template>
  <div>
    <fc-wave-filter v-if="xxx" mode="img">
      <img src="xxx.png" />
    </fc-wave-filter>
    
    <fc-wave-filter v-else mode="alpha">
      <img src="xxx.png" />
    </fc-wave-filter>
  </div>
</template>
Copy the code

We can also use the :not(:defined) selector to select the state to which the Web Components have not yet connected to the DOM. What is connected to the DOM and what is the defined selector? This is the knowledge of Web Components, the length of this article is too long to go into details, interested students can B site search: front-end learning does not move the up master, find his “Custom elements basics” in 17:25 position, MY knowledge of Web components is also learned from this.

API

attribute	Chinese meaning	An optional value	The default value
color	Fill color	Normal CSS color value	‘black’
dur	Animation duration	Numbers greater than 0 (in seconds)	3
amplitude	The wave amplitude	Number (multiple of original wave amplitude)	1
delay	Duration after filling	Numbers greater than 0 (in seconds)	0
mode	The animation mode	‘Alpha’, ‘luminance’, ‘img’, ‘slideshow’	‘alpha’
interval	Change everything in seconds (suitable for slide mode)	Numbers greater than 0 (in seconds)	0

---

CSS properties	Chinese meaning	An optional value	The default value
–color	Fill color	Normal CSS color value	black
–width	Component width	Normal CSS width value	fit-content
–height	Component height	Normal CSS height	There is no