During project development, it is essential that the team have its own component library. Whether it is UI components or some other functional components, the richer the accumulation, the more active the update, the more helpful to rapid development. In the early project development of the team, due to the late establishment of the front-end group, various accumulations were not enough and could only be accumulated slowly. For example, the easy-Dialog introduced in this paper, the early dialog components were also programmed for various search engines every time they developed a project. In order to achieve UI effects, various third-party component libraries were also very tired, so component development began to take the road of self-reliance, that is, the road of no return to build wheels.

This project is not completely original, referring to a lot of large or small open source projects, now open source, but also to give you a reference and choice. Personal ability problems, some writing methods may not be enough standard, but also welcome valuable advice.

Github Repository: Easy-Dialog

A simple introduction

Developed using ES6, there are 6 feature pop-ups, and the usage of each one will be analyzed in detail.

The basic use

You can import directly with tags, or you can use NPM with import support.

npm i easy-dialog
import easyDialog from 'easy-dialog'Or < script SRC =".. /lib/index.js"></script>
Copy the code

declare

Some use help or use permission display

easyDialog.declare({bar: "License".content: txt}, [{'yes': 'confirm'}].function (type, input, c) {
    if (type == 'yes') {
        easyDialog.toast('complete'.3000.function () {
            console.log(c)
        })
        this.hide(); }})Copy the code

imgad

Enter the path of a static image resource.

easyDialog.imgad('http://oankigr4l.bkt.clouddn.com/201804301921_288.png'.function () {
    this.hide();
})
Copy the code

prompt

A popup input box, which can also be extended into the login box, added input information validation, can be extended to match the parameter input regular expression.

easyDialog.prompt({bar: "Please enter the group name".content: 'Shenzhen Section'}, null.function (type, input, c) {
    if (type == 'yes') {
        easyDialog.toast(input, 3000.function () {
            console.log(c)
        })
        this.hide(); }})Copy the code

toast

The most common toast, with a simple style, is to enter a millisecond time.

easyDialog.toast('I'm an ugly popover'.3000.function () {
    console.log('toast to hide')})Copy the code

alert

User alert, only one button.

easyDialog.alert('Are you sure? '.true.function () {
    console.log('Confirmed')})Copy the code

confirm

User confirmation box, there are two buttons, the text displayed on the button can be custom incoming.

easyDialog.confirm('You can't be sure! '.null.function (type) {
    easyDialog.toast('You clicked' + type, 2000);
    this.hide();
})
Copy the code

conclusion

The components are mainly for mobile phones, but are not compatible with PCS.

Last rule, post my blog, welcome to follow