⚠️ This article is the first contract article in the nuggets community. It is prohibited to reprint without authorization
preface
Just in the past National Day our company online several National Day activities page 🎉, before the meeting to discuss these activities page UI little sister once asked: “do you have that kind of cool component library? Not like our usual page in the kind of very ordinary components, if you can show me, I will be in accordance with the style of the component library map, so that you save trouble I also save trouble, our progress can also be a little faster. The activity page is to do something new, but if I am too new, I am afraid that you will cause trouble and we can not launch before National Day, so you go to your programmers GitHub, CSS Tricks, CodePen and other websites to find such a library!”
Me: This certainly has! Take a look at this:
She: oh! This effect is not bad! I thought your front-end component library was Element UI, Ant Design.
Me: You don’t know that. We have a lot of fancy component libraries at the front, just because most of our content-oriented sites don’t have any cool effects? That’s why you rarely see component libraries with this effect.
She: That makes sense. What other components are there? Let me see. This is the kind of unconventional component we need to decorate our activity page.
Fancy component library
The name of the component library is Fancy-Components, but I prefer to translate it into Chinese: Fancy Component library. Here’s a look at what components it has to live up to its outrageous name.
Button class
FcWarpBtn
Warp means warp, and as the name suggests, the button looks like it’s warp.
FcDblWarpBtn
Dbl is short for double, and only one side of the button is up. So this one is tilted on both sides, so I added a Dbl.
Fc3DBtn
As the name suggests, 3D! It’s a very three-dimensional feeling.
FcUnderlineBtn
This button will have an Underline in the non-hover state.
FcRoundBtn
Round means Round. A round button.
FcParenthesesBtn
Parentheses – This button will have a Parentheses when in the non-hover state.
FcPixelBtn
Pixel means Pixel, and this button will hover with a pixelwind animation.
FcArrowBtn
Arrow stands for Arrow, and Arrow buttons are perfect for guiding buttons like return buttons.
The form class
FcTypingInput
Typing, the input box in the focus state placeholder will look like Typing.
A filter class
FcWaveFilter
Wave means “Wave” and it will apply a Wave effect to incoming images. For more details, click here.
Progressive enhancement class
FcBubbles
Bubbles means Bubbles, and incremental enhancement components are things you pass in that don’t change anything, just add a special effect.
The national flag class
FcChina
(For some reason, the pictures related to 🇨🇳 cannot be uploaded in this article. Please click this link to view the specific effects.)
China believes that we all know what it means without translation.
The specific use
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 compatible
IETechnology 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">
// Import components from fancy-Components
// Take FcWaveFilter as an example
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 codePictures 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 codeThen 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 codeBe 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 codeAs long as we introduce and new in the main file:
import { FcWaveFilter } from 'fancy-components'
/* eslint-disable no-new */
new FcWaveFilter()
Copy the codeIn 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 codeThe 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 codeThen 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 codeIn 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 codeIn 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 codeSo is it ok to change the original Vue into APP?
/ / before
Vue.config.ignoredElements = [/^fc-/]
/ / now,
app.config.ignoredElements = [/^fc-/]
Copy the codeUnfortunately 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 codeThat’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 codeThen 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 codeUsage of components
FcWaveFilter
This component is very good for generating wave loading animations and we used it to create 🇨🇳 style wave animations during the National Day holiday.
API
| CSS properties | meaning | An optional value | The default value |
|---|---|---|---|
| –width | Component width | Normal CSS width value | fit-content |
| –height | Component height | Normal CSS height | fit-content |
| –color | Fill color | Normal CSS color value | black |
| Tag attributes | 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 |
But unfortunately for some reason I can’t post 🇨🇳 flag related pictures, so let’s change the flag of another country to show you the effect. Find a flag from a country that is friendlier to us! Which country has good relations with us? The first thing that comes to mind is: 🇵🇰
However, there is a large blank on the left side of 🇵🇰, resulting in no obvious wave effect, so let’s change another flag to this one: 🇪🇺
In fact, the above effect compared with the effect of the Chinese flag or sent a lot, I have been in this FcWaveFilter component specific usage: before the waves animation is common, but the wave components are definitely not common, very detailed introduced in this article, so do not take up the space of this article, interested friends can go in and have a look.
Here is the basic usage, that is, we find a solid color (preferably light gray) PNG hollow image, let’s say we find this image:
We just need to wrap the image with the < fC-wave-filter > tag and give a color attribute as the fill color:
<template>
<fc-wave-filter color="# 047">
<img src="bwm.png" />
</fc-wave-filter>
</template>
<script>
import { FcWaveFilter } from 'fancy-components'
/* eslint-disable no-new */
new FcWaveFilter()
export default {}
Copy the codeFcChina
Listen to the name can also guess what this is a component? For that reason, however, there is no way to upload pictures related to 🇨🇳 for this article, so you will have to click on this link to see the awesome flag effect, which is amazing as an opening animation on July 1 and October 1.
API
| CSS properties | meaning | An optional value | The default value |
|---|---|---|---|
| –width | Component width | Normal CSS width value | 300px |
| –height | Component height | Normal CSS height | 200px |
| –star-stroke-color | The stroke color of the five pentacle stars when performing the stroke animation | Normal CSS color value | red |
| –star-fill-color | The fill color of the five pentacle stars when performing the fill animation | Normal CSS color value | red |
| –flag-stroke-color | The stroke color of the flag when the stroke animation is performed | Normal CSS color value | red |
| –dalay | Time-lapse animation | Normal CSS time value | 0s |
| –dur | The execution time of the entire animation | Normal CSS time value | 6.6 s |
<template>
<fc-china></fc-china>
</template>
<script>
import { FcChina } from 'fancy-components'
/* eslint-disable no-new */
new FcChina()
export default {}
</script>
Copy the codeIts default width is 300pxx200px. We can change its width and height using two CSS custom properties (also called CSS variables) : –width and –height:
<template>
<fc-china></fc-china>
</template>
<script>
import { FcChina } from 'fancy-components'
/* eslint-disable no-new */
new FcChina()
export default {}
</script>
<style>
fc-china {
--width: 600px;
--height: 200px;
}
</style>
Copy the code(this article can not post 🇨🇳, the effect here is that the flag is stretched causing five pentacle stars ⭐️ deformation)
The reason why it looks so ugly is because we didn’t give it a width and height of 3:2. The default width and height ratio of the Chinese flag 🇨🇳 is 3:2. We can also change the color of the animation:
<template>
<fc-china></fc-china>
</template>
<script>
import { FcChina } from 'fancy-components'
/* eslint-disable no-new */
new FcChina()
export default {}
</script>
<style>
fc-china {
--star-stroke-color: black;
--star-fill-color: aqua;
--flag-stroke-color: #ff8ef9;
}
</style>
Copy the code(this article cannot post 🇨🇳 images, the effect here is that the pentacle can be generated in other colors, the color of the stroke animation can also be changed, but the five-star red flag will return to the classic red and yellow color at the end of the animation)
You can only change the color when the animation is running. After the animation is over, the national flag will return to its original red and yellow color. After all, the national flag is sacred and cannot be modified at will. We’re going to listen for the AnimationEnd event on it, and as soon as the flag animation ends we’ll write a background diffusion effect to return to the home page:
<template>
<fc-china @animationend="onEnd"></fc-china>
</template>
<script>
import { FcChina } from 'fancy-components'
/* eslint-disable no-new */
new FcChina()
export default {
methods: {
onEnd () {
// Write some logic here}}}</script>
Copy the codeFcWarpBtn
Here’s one of my favorite button components:
API
| CSS properties | meaning | Value range | The default value |
|---|---|---|---|
| –width | Width of the component | Normal CSS width value | 200px |
| –height | Component height | Normal CSS height | 40px |
| –color | The component color | Normal CSS color value | #1cd |
| –shadow-color | Component shadow color | Normal CSS color value | rgba(0, 0, 0, .5) |
| Tag attributes | meaning | Value range | The default value |
|---|---|---|---|
| text-align | Text arrangement | ‘left’, ‘center’, ‘right’ | ‘right’ |
<template>
<fc-warp-btn></fc-warp-btn>
</template>
<script>
import { FcWarpBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcWarpBtn()
export default {}
</script>
Copy the codeWe can change its overall color using the CSS custom property –color (also known as the CSS variable) :
<template>
<fc-warp-btn></fc-warp-btn>
</template>
<script>
import { FcWarpBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcWarpBtn()
export default {}
</script>
<style>
fc-warp-btn {
--color: gold
}
</style>
Copy the code
If you want to change the text inside the tag, say:
<fc-warp-btn>Become warped edge button</fc-warp-btn>
Copy the code
We found that the text is left by default, and it doesn’t look good with less text, so we can use the text-align property to make it center:
<fc-warp-btn text-align="center">Become warped edge button</fc-warp-btn>
Copy the code
It’s still not pretty, so let’s use –width to make it shorter:
<template>
<fc-warp-btn text-align="center">Become warped edge button</fc-warp-btn>
</template>
<script>
import { FcWarpBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcWarpBtn()
export default {}
</script>
<style>
fc-warp-btn {
--width: 160px
}
</style>
Copy the code
Personally, I feel that this button is not suitable for the short text of the button, because this button is long to look good, short will not look good. Also, –shadow-color refers to the shadow color here:
Fc3DBtn
API
| CSS properties | meaning | Value range | The default value |
|---|---|---|---|
| –width | Width of the component | Normal CSS width value | 100px |
| –height | Component height | Normal CSS height | 36px |
| –color | The component color | Normal CSS color value | #a69 |
| –cover-color | The color of the raised part of the component | Normal CSS color value | # 0005 |
| –shadow-color | Component shadow color | Normal CSS color value | # 0008 |
| –inset-shadow-color | Component shadow color | Normal CSS color value | #fffc |
| –inset-shadow-color-active | The color of component shadow when the button is in the clicked state | Normal CSS color value | var(–inset-shadow-color) |
I like this button so let’s change it to a different color and text:
<template>
<div class="container">
<fc-3d-btn>Stereo button</fc-3d-btn>
</div>
</template>
<script>
import { Fc3DBtn } from 'fancy-components'
/* eslint-disable no-new */
new Fc3DBtn()
export default {}
</script>
<style scoped>
.container {
padding: 300px;
background: #4d317a;
}
fc-3d-btn {
--color: #6e50a6;
--shadow-color: rgba(255.255.255.4);
--cover-color: rgba(0.0.0.4);
--inset-shadow-color: rgb(29.4.54);
--inset-shadow-color-active: rgba(49.23.75.9);
}
</style>
Copy the code
FcDblWarpBtn
API
| CSS properties | meaning | Value range | The default value |
|---|---|---|---|
| –width | Width of the component | Normal CSS width value | 180px |
| –height | Component height | Normal CSS height | 40px |
| –color | The component color | Normal CSS color value | #1cd |
| –shadow-color | Shadow color | Normal CSS color value | # 0005 |
<template>
<fc-dbl-warp-btn></fc-dbl-warp-btn>
</template>
<script>
import { FcDblWarpBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcDblWarpBtn()
export default {}
</script>
Copy the codeThe name of the double warped button is a bit too long. We can actually change the name of the component when we register it. We just pass in a string when new, which will become the name of the tag. However, the name is not a random one, it still needs to follow the Web Components naming conventions, such as must start with a letter, must have a dash to connect, etc. The effect is exactly the same:
<template>
<fc-btn></fc-btn>
</template>
<script>
import { FcDblWarpBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcDblWarpBtn('fc-btn')
export default {}
</script>
Copy the code
In theory we can start with any letter we want, but in a Vue project we’re configuring to ignore elements that start with FC -, so we’d better start with FC – as well. Be careful not to have the same name as another component.
FcUnderlineBtn, FcPixelBtn, FcParenthesesBtn, FcRoundBtn
FcUnderlineBtn API
| CSS properties | meaning | Value range | The default value |
|---|---|---|---|
| –width | Width of the component | Normal CSS width value | 100px |
| –height | Component height | Normal CSS height | 30px |
| –color | The component color | Normal CSS color value | #1cd |
FcPixelBtn API
| CSS properties | meaning | Value range | The default value |
|---|---|---|---|
| –width | Width of the component | Normal CSS width value | 100px |
| –height | Component height | Normal CSS height | 40px |
| –color | The component color | Normal CSS color value | #1cd |
FcParenthesesBtn API
| CSS properties | meaning | Value range | The default value |
|---|---|---|---|
| –width | Width of the component | Normal CSS width value | 80px |
| –height | Component height | Normal CSS height | 30px |
| –color | The component color | Normal CSS color value | #1cd |
FcRoundBtn API
| CSS properties | meaning | Value range | The default value |
|---|---|---|---|
| –width | Width of the component | Normal CSS width value | 100px |
| –height | Component height | Normal CSS height | 40px |
| –color | The component color | Normal CSS color value | #1cd |
They all have the same API, so just one example will suffice:
<template>
<fc-underline-btn></fc-underline-btn>
</template>
<script>
import { FcUnderlineBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcUnderlineBtn()
export default {}
</script>
Copy the codeIn addition to the CSS custom properties –width and –height that control the width and height, there is also a –color that controls the overall color:
<template>
<fc-underline-btn></fc-underline-btn>
</template>
<script>
import { FcUnderlineBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcUnderlineBtn()
export default {}
</script>
<style>
fc-underline-btn {
--color: red
}
</style>
Copy the code
FcArrowBtn
API
| CSS properties | meaning | Value range | The default value |
|---|---|---|---|
| –width | Width of the component | Normal CSS width value | 100px |
| –height | Component height | Normal CSS height | 30px |
| –color | The component color | Normal CSS color value | #1cd |
| Tag attributes | meaning | An optional value | The default value |
|---|---|---|---|
| right | The right arrow | Write or not write | Don’t write |
The arrow button has the same three CSS custom attributes as the other buttons, except that it has a tag named Right. The arrow is left by default.
<template>
<fc-arrow-btn right>The next step</fc-arrow-btn>
</template>
<script>
import { FcArrowBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcArrowBtn()
export default {}
</script>
Copy the code
FcTypingInput
API
| CSS properties | meaning | An optional value | The default value |
|---|---|---|---|
| –width | Component width | Normal CSS width value | 220px |
| –height | Component height | Normal CSS height | 40px |
| –color | The overall color | Normal CSS color value | #caf |
| –border-color | Border color | Normal CSS color value | #caf |
| –border-color-hover | Hover state border color | Normal CSS color value | var(–color) |
| –border-color-focus | The border color in focus state | Normal CSS color value | var(–border-color-hover) |
| –border-radius | Rounded corners | Normal CSS fillet value | 4px |
| –box-shadow-focus | Input box shadow in focus state | Normal CSS shadow value | 0 0 6px var(–border-color-focus) |
| –circle-color | The color of the dot in the input box when it has no value and is not in the focus state | Normal CSS color value | # 0003 |
| –circle-color-hover | The color of the dot in the input box with no value and the hover state | Normal CSS color value | var(–circle-color) |
| –placeholder-color | The color of the placeholder | Normal CSS color value | # 0005 |
| –placeholder-color-focus | Placeholder color when the input box is in focus state | Normal CSS color value | var(–border-color-focus) |
| –placeholder-animate-color | Placeholder The color that the animation will be performed in the input box | Normal CSS color value | red |
| –placeholder-animate-title-color | Placeholder Specifies the color that the input box will be animated with | Normal CSS color value | #00ff6b |
| –placeholder-shadow | Placeholder text shadow | Normal CSS text shadow value | none |
| –stripe-color | The stripe color generated when the input box is in the Disabled state | Normal CSS color value | # 0003 |
| –stripe-deg | The stripe Angle generated when the input box is in the Disabled state | digital | 45 |
| –disabled-filter | Filter for the Input box in the disabled state | Normal CSS filter value | opacity(80%) grayscale(100%) |
| Tag attributes | meaning | An optional value | The default value |
|---|---|---|---|
| white | The theme color of the input box is white (for dark background) | Write or not write | Don’t write |
| red | The theme color of the input box is red (for invalid verification) | Write or not write | Don’t write |
Let’s add a disabled attribute to it to see what it looks like:
<template>
<fc-typing-input placeholder="UserName" disabled></fc-typing-input>
</template>
<script>
import { FcTypingInput } from 'fancy-components'
/* eslint-disable no-new */
new FcTypingInput()
export default {}
</script>
Copy the code
These CSS custom attributes seem to be hard to remember, but in most cases they are not used at all, because the most common one for our background is this white light mode, and the other is dark mode. Let’s say we change the background color to dark purple.
It doesn’t look very impressive, does it? Do we have to go through all the different colors? Instead, there is a shortcut CSS custom property called –color that allows you to set the font color, placeholder color, hover color, and other hover colors:
<template>
<fc-typing-input placeholder="UserName"></fc-typing-input>
</template>
<script>
import { FcTypingInput } from 'fancy-components'
/* eslint-disable no-new */
new FcTypingInput()
export default {}
</script>
<style>
fc-typing-input{-color: black
}
</style>
Copy the code
There is also a label attribute white for use on a dark background, which will automatically change the various border colors and font colors to white:
<fc-typing-input placeholder="UserName" white></fc-typing-input>
Copy the code
In the placeholder, by default, there’s no text shadow, but with the white tag it’s going to automatically set a white text shadow for us, so it looks like the text is glowing, which is nice in dark mode, Alternatively, you can set –placeholder-shadow-color to None, and then change –placeholder-color to a lighter color:
<template>
<fc-typing-input placeholder="UserName" white></fc-typing-input>
</template>
<script>
import { FcTypingInput } from 'fancy-components'
/* eslint-disable no-new */
new FcTypingInput()
export default {}
</script>
<style>
body {
background: #3f2766
}
fc-typing-input {
--placeholder-color: #fff8;
--placeholder-shadow: none;
}
</style>
Copy the code
This does not look very nice, so the white property should be carefully configured with values for each color to achieve the best effect.
In addition to white, there is red. Doesn’t white make the whole color white? Red means to make the whole color red:
It is used when the form verification fails. ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ We add a white attribute to the tag on a white background:
Nothing? That’s because our border is white, the font is white, and the placeholder is white, which blends in with the white background, but let’s click and see:
Did you see this one? Placeholder –placeholder animator-color is the color that will change when the animation is in the box, And –placeholder -animator-title-color is the color that will change when the animation is performed on the box. (You won’t use it in most cases)
It’s a shame that the input box can’t use the V-model in Vue because Vue detects that it’s not an input element, but we can just write it like this:
<template>
<fc-typing-input :value="value" @input="onInput"></fc-typing-input>
</template>
<script>
import { FcTypingInput } from 'fancy-components'
/* eslint-disable no-new */
new FcTypingInput()
export default {
data: () = > ({ value: '666' }),
methods: {
onInput (event) {
this.value = event.target.value
}
}
}
</script>
Copy the code⚠️ This component does not support the change event and the type attribute only supports text and password:
<template>
<fc-typing-input
:value="value"
@input="onInput"
type="password"
placeholder="Please enter your password"
></fc-typing-input>
</template>
<script>
import { FcTypingInput } from 'fancy-components'
/* eslint-disable no-new */
new FcTypingInput()
export default {
data: () = > ({ value: '666666' }),
methods: {
onInput (event) {
this.value = event.target.value
}
}
}
</script>
Copy the code
FcBubbles
API
| CSS properties | meaning | An optional value | The default value |
|---|---|---|---|
| –color | Fill color | Normal CSS color value | #1cd |
| –width | Component width | Normal CSS width value | fit-content |
| –height | Component height | Normal CSS height | fit-content |
| Tag attributes | meaning | An optional value | The default value |
|---|---|---|---|
| active | Active attribute is used to control the active effect of bubbles | ‘true’, ‘false’ | ‘false’ |
| click | Through the mouse click to control the bubble dynamic effect of the hidden | Write or not write | Don’t write |
This component is very fun, it and FcWaveFilter, are not their own effect, but for the child element to add effect, with the active attribute to control the bubble effect, for example, many sites have ❤️ such a effect:
This careful heart ❤️ is very lovely? But it doesn’t have any animation, so it’s a little boring, so we wrap it with < FC-bubbles > :
<template>
<fc-bubbles
:active="isLike"
@click="isLike = ! isLike"
>
<svg viewBox="0 0 1024 1024" width="100" height="100">
<path
d="M288.105 122.229C174.047 122.21 64.691 231.687 64.691 388.095c0 176.07 156.747 241.891 261.855 312.283 101.962 68.266 174.057 161.602 185.453 201.393 9.743-38.936 91.03-135.019 185.448-203.373 103.196-74.727 261.861-136.19 261.861-312.262 0-152.117-109.34-260.294-222.908-260.294-86.792 0-167.781 15.754-224.419 128.441-65.593-111.977-138.495-132.042-223.876-132.054"
stroke="black"
stroke-width="22"
:fill="isLike ? 'red' : 'none'"
/>
</svg>
</fc-bubbles>
</template>
<script setup>
import { ref } from 'vue'
const isLike = ref(false)
</script>
<style scoped>
fc-bubbles { --color: #ff3874 }
svg { display: block }
</style>
Copy the code
In this case, the active property is used to control when the animation appears, running the bubble animation when active=”true” and stopping the animation when active=”false”.
⚠️ This works only if active=”false” and active is changed to true.
What does that mean? For example, if we want to put this < fC-bubbles > on a button, and if we want the button to appear, then we can write it like this:
<template>
<fc-bubbles @click="handleClick" :active="isActive">
<fc-3d-btn></fc-3d-btn>
</fc-bubbles>
</template>
<script setup>
import { ref } from '@vue/runtime-core'
import { FcBubbles, Fc3DBtn } from 'fancy-components';
/* eslint-disable no-new */
new FcBubbles()
new Fc3DBtn()
const isActive = ref(false)
const handleClick = () = > isActive.value = true
</script>
<style scoped>
fc-bubbles {
--color: #6195f9;
}
</style>
Copy the code
It turns out that it only works on the first click, and the rest of the clicks don’t work at all, and that’s because the value of active was false before the first click, and it changed it to true on the first click, but it didn’t change it back to false, so active stays true, The value doesn’t change after the first click, so it doesn’t work.
Let’s write handleClick like this:
const handleClick = () = > {
isActive.value = true
isActive.value = false
}
Copy the codeNote that this is not desirable because the animation appears just after active=”true”, then changes active to false and the animation disappears as if nothing had happened. But we just want a bubble animation to appear when we click, so why bother? Of course not! Because there’s a click property that does just that:
<template>
<! -- in Vue3 you need to capitalize click to make it work -->
<fc-bubbles click>
<fc-3d-btn></fc-3d-btn>
</fc-bubbles>
</template>
<script>
import { FcBubbles, Fc3DBtn } from 'fancy-components';
/* eslint-disable no-new */
new FcBubbles()
new Fc3DBtn()
</script>
<style scoped>
fc-bubbles {
--color: #6195f9;
}
</style>
Copy the codeAdd a click attribute to the < fC-bubbles > TAB to make the bubble appear every time it is clicked. The active property is no longer needed to control the timing of the bubble since the bubbles appear when clicked. It is better not to have both click and active at the same time, otherwise there will be a bug.
There is a bug in Vue3 that writes the click attribute in a tag:
<template>
<fc-bubbles click></fc-bubbles>
</template>
Copy the codeThe click attribute does not appear in the TAB, and there are no errors on the page. Vue2 does not have this bug, but we want to write the click attribute in Vue3. The answer is to capitalize click:
<template>
<fc-bubbles Click></fc-bubbles>
</template>
Copy the codeThen there won’t be a problem!
This effect has been used on multiple pages in the company before:
This slot machine effect is from Product Manager: Can you get this number to scroll? The component in this article required three-digit scrolling at that time. When scrolling stops, if the number is 001, it will become 1st, 002, 003, 3rd, and the remaining number is XXXTH. In addition, the color of the flag behind was gray at the beginning, and only when the rolling number stopped would the number of the flag be known. The color of the top 3 flags was this color, the color of the top 10 flags was that color, the color of the top 100 was changed to another color, and the color after 100 was what?
In short, when the number stops, there will be a series of mutations (text + color), the effect is very abrupt, and it is necessary to have some animation to hide it, so I used < FC-Bubbles > component, unexpectedly good effect, at that time, I listened the animationEnd event, when 996 animation stops, this event will be triggered. Then set active to True and you’re done!
If you encounter that kind of abrupt change can try to disguise with this component, the effect is not bad.
I’ve seen this effect before on GitHub and it looks like a similar implementation. The address is posted here and you can click on it if you’re interested.
Fancy-components warehouse address
Github.com/fancy-compo…
There are not many stars in such a cool project, maybe because not many people know about it at the beginning? But I think my push will spread the word. Just like Naive UI, Utah university sends a microblog and a tweet, which immediately raises thousands of stars, but I should not be as good as Utah university B😂
Past wonderful articles
- Mobile Layout Interview Questions: A Thorough review of your CSS Skills
- Styled Components using the React Super-styled CSS-In-JS library in Vue Projects: Styled components
- Create your own visual data map without relying on any library
- Vue second wave of REF syntax proposals coming will it be standard this time?
- Writing a Simple Vue with your own Hands!
- Product Manager: The opening animation of Hongmeng is very cool. Please give us a whole page.
- Vue3 will not support IE11. Efforts will be put into Vue2.7.
- Vue’s fun new feature: JS variables in CSS
- What? Can pull effect be achieved with H5 tag alone?
- Microsoft launches comment section on GitHub
- Vue 3.0.3: New CSS variable passing and the latest Ref proposal
- Double 11 small black box is cool? Let’s use CSS variables to improve!
- Don’t underestimate the nine grid a question can let the candidate’s true colors!
- “A series of confusing behaviors after setting a prototype object as a Proxy”
- Vue super Fun New feature: DOM Portal
- Is It Finally Vue’s Turn to inspire React?
- Vue3 is a pit on IOS
- You Yuxi: The Design Process of Vue3