Giter Club home page Giter Club logo

easy-dialog's Introduction

简单介绍

使用es6开发,提供了7种功能弹窗,接下来会对每一个的使用具体分析。

基本使用

可以直接通过标签引入,也可以使用npm,支持import

npm i easy-dialog
import easyDialog from 'easy-dialog'

或者
<script src="../lib/index.js"></script>

declare

一些使用帮助或者使用许可的显示

easyDialog.declare({bar: "使用许可", content: txt}, [{'yes': '确认'}], function (type, input, c) {
    if (type == 'yes') {
        easyDialog.toast('完成', 3000, function () {
            console.log(c)
        })
        this.hide();
    }
})

imgad

用于进入首页的弹窗图片信息显示,输入一个图片静态资源的路径。

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

prompt

一个弹窗输入框,也可以扩展成登录框,添加了输入信息的验证,可以扩展参数输入匹配的正则表达式。

easyDialog.prompt({bar: "请输入小组名", content: '深圳分组'}, null, function (type, input, c) {
    if (type == 'yes') {
        easyDialog.toast(input, 3000, function () {
            console.log(c)
        })
        this.hide();
    }
})

toast

最普通的toast,样式很简单,输入毫秒时间。

easyDialog.toast('我是不好看的弹窗', 3000, function () {
    console.log('toast隐藏')
})

alert

用户提醒,只有一个按钮。

easyDialog.alert('你确定?', true, function () {
    console.log('确定了')
})

confirm

用户确认框,有两个按钮,按钮上显示的文字可以自定义传入。

easyDialog.confirm('你可以不确定的!', null, function (type) {
    easyDialog.toast('您点击了' + type, 2000);
    this.hide();
})

pwinput

用户输入框,类似摩拜的机器码输入框,可以按照输入的不同类型,选择不同的样式

easyDialog.pwinput({bar: "请输入机器编号", inputLength: 10, isPwd: false}, null, function (type, input, c) {
    if (type == 'yes') {
        easyDialog.toast(input, 3000, function () {
            console.log(c)
        })
        this.hide();
    } else {
        easyDialog.toast(input, 3000, function () {
            console.log(c)
        })
        this.hide();
    }

})

总结

组件在主要针对手机端,pc端未进行兼容。

最后的惯例,贴上我的博客,欢迎关注

easy-dialog's People

Contributors

zhyjor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

easy-dialog's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.