Radon — The child’s name is important

For the front end of the fierce competition now, a component library, the most important thing is to have a hanging bomb name, what dog eggs ah, dog left ah, although it is easy to raise, but easy to be despised, the name of our component library is Radon (Baidu Baidu, Wiki).

It’s a lazy element, but it’s the most active one of the lazy elements, and it fits our setup, why do you use the component library, or why do you use other people’s component library, because you’re lazy, so why do we write the component library as a team? Because we are lazy people in the most diligent (self-proclaimed) one, natural match, perfect!! At the same time, Radon is radioactive and can emit radiation, and we also want to use our own energy to have a small impact on the Vuers at the lower end.

Where ideas come from

Ideas because we want to do an own background management system, but the design of the system, only a prototype, so we have to use someone else’s components or mature Css framework to build, followed by the server interface is not ready, oh, no, should be written, it doesn’t even make the date so opportunity produced here, That said, we had some time to prepare, so we came up with the idea of having a small goal of writing components first and then building our system out of components. This critical period of time came into being. Prince Awe of Vue plug-ins just came to our company. He had no project burden, no historical burden, and he could devote himself to this component library.

Why write it yourself

  • Over the long term, we have benefited from the open source world of plugins, components, frameworks, and countless developers who help us write code. Now is the time to give back to the community, so we’ve always had the idea of writing an open source thing to give back. I’ve had a few small open source plug-ins before, but this time it’s our team’s product.

  • Choose to use Vue to write a UI component library, in addition to our current technology stack is to choose the Vue, and just fit I mentioned that the timing of the above, the most important thing is that we have not found a better Vue component library, so we need to, we also should be need, this is a just need (whether you believe it or not, anyway we believe.)

  • The most important thing is that we have the people, the ability, and the confidence to produce a good component library for everyone to use. (Stop hitting me!!)

Radon– Why awesome

The basic characteristics of

  • High quality UI components developed based on Vue
  • Based on NPM + Webpack + ES6 + PostCSS development
  • Data driven, easy to use
  • Has been used in some of our own background management system projects, personally accepted
  • We don’t have KPIs, this is not a KPI open source project
  • Two ways to use, one can use our source code, in vue project new directory, reference, and one can use NPM, direct reference, as you like.

Micro innovation

Image Preview (Preivew)

Clicking on an image or any other element in the Radon UI opens a preview of the hd image. To use it, just place < RD-preview >
in the root node, and then you can use the V-Preview directive on any element to register the corresponding hd preview image. Such as:

Copy the code

This completes the preview of the image. Something like this

Global components

Global components are a kind of special components, such as Modal and Notification, which only need to be placed in an appropriate place and pop up or request interaction when needed, without repeated registration, invocation or destruction. Therefore, our solution is to place such components in the root instance. Use the parent component’s reactive data objects directly, so that any child components can call them in the business code through the instance methods of the Vue we defined, for example:

With this line of code, we can realize sending a message as “edit succeeded” success status, and automatically disappear after 3s notification.

This.$notification. success(' ', ')Copy the code

Here, a simple call to $modal. create pops up a confirmation box to request user interaction, which executes the callback function accordingly.

Enclosing $Modal. The create (' here is the title ', 'should say something here, () = > {the console. The log (' confirm')}, () = > {the console. The log (" cancel ")})Copy the code

compatibility

Compatible with PC and Mobile, both sides can be used, unified the company’s UI style, so cool.

Last address

  • The document address

  • The source code