分享我收藏的小而美JS库[一] -- notie

Posted on Edited on In

14/53，每周一篇博，坚持！

每周一篇博文的目标还是比较艰巨的，有时候时间比较紧张的时候根本来不及想主题。。

准备开一个系列，介绍下我收藏的那些小而美的JS开源库。这是第一篇，关于一个设计良好的美观实用PC、移动兼容良好的弹框库–notie。

关于notie

众所周知，浏览器默认的弹框–alert是异常丑陋的，我们在业务中通常是不会直接使用alert来显示应用弹框消息的，一般都会重新设计应用自己的弹框来替代之。
notie就是一款用来替代alert的消息弹框库。

它的几项主要功能：

  1. alert的功能：提醒用户
  2. 弹出选项让用户确认
  3. 允许用户输入信息
  4. 允许用户选择选项
  5. 允许用户选择日期

放一张官网的demo图看一下notie的效果，还是非常优雅的：

使用方式

既然是小而美的库，使用起来也是相当方便的：

  1. 安装
    在HTML内加载notie文件，并加载notie的样式文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <head>
      ...
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/notie/dist/notie.min.css">
      <style>
        /* override styles here */
        .notie-container {
          box-shadow: none;
        }
      </style>
    </head>
    <body>
      ...
      <!-- Bottom of body -->
      <script src="https://unpkg.com/notie"></script>
    </body>

  2. 业务调用
    在业务js中调用notie API：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    notie.alert({
      type: Number|String, // optional, default = 4, enum: [1, 2, 3, 4, 5, 'success', 'warning', 'error', 'info', 'neutral']
      text: String,
      stay: Boolean, // optional, default = false
      time: Number, // optional, default = 3, minimum = 1,
      position: String // optional, default = 'top', enum: ['top', 'bottom']
    })

    notie.force({
      type: Number|String, // optional, default = 5, enum: [1, 2, 3, 4, 5, 'success', 'warning', 'error', 'info', 'neutral']
      text: String,
      buttonText: String, // optional, default = 'OK'
      position: String, // optional, default = 'top', enum: ['top', 'bottom']
      callback: Function // optional
    }, callbackOptional())

    notie.confirm({
      text: String,
      submitText: String, // optional, default = 'Yes'
      cancelText: String, // optional, default = 'Cancel'
      position: String, // optional, default = 'top', enum: ['top', 'bottom']
      submitCallback: Function, // optional
      cancelCallback: Function // optional
    }, submitCallbackOptional(), cancelCallbackOptional())

    notie.input({
      text: String,
      submitText: String, // optional, default = 'Submit'
      cancelText: String, // optional, default = 'Cancel'
      position: String, // optional, default = 'top', enum: ['top', 'bottom']
      submitCallback: Function(value), // optional
      cancelCallback: Function(value), // optional
      autocapitalize: 'words', // default: 'none'
      autocomplete: 'on', // default: 'off'
      autocorrect: 'off', // default: 'off'
      autofocus: 'true', // default: 'true'
      inputmode: 'latin', // default: 'verbatim'
      max: '10000',// default: ''
      maxlength: '10', // default: ''
      min: '5', // default: ''
      minlength: '1', // default: ''
      placeholder: 'Jane Smith', // default: ''
      spellcheck: 'false', // default: 'default'
      step: '5', // default: 'any'
      type: 'text', // default: 'text'
      allowed: ['an', 's'] // Default: null, 'an' = alphanumeric, 'a' = alpha, 'n' = numeric, 's' = spaces allowed. Can be custom RegExp, ex. allowed: new RegExp('[^0-9]', 'g')
    }, submitCallbackOptional(value), cancelCallbackOptional(value))

    notie.select({
      text: String,
      cancelText: String, // optional, default = 'Cancel'
      position: String, // optional, default = 'bottom', enum: ['top', 'bottom']
      choices: [
        {
          type: Number|String, // optional, default = 1
          text: String,
          handler: Function
        }
        ...
      ],
      cancelCallback: Function // optional
    }, cancelCallbackOptional())

    notie.date({
      value: Date,
      submitText: String, // optional, default = 'OK'
      cancelText: String, // optional, default = 'Cancel'
      position: String, // optional, default = 'top', enum: ['top', 'bottom']
      submitCallback: Function(date), // optional
      cancelCallback: Function(date) // optional
    }, submitCallbackOptional(date), cancelCallbackOptional(date))

    最常用的还是alert了。
    如果我们想弹出一个成功的提示消息给用户只需简单调用如下：

    1
    2
    3
    4
    5
    notie.alert({
        type: 1,
        text: "Success",
        stay: true
    });

    使用的时候可以多多尝试，看看哪个效果是自己需要的。

  3. 在React等前端框架下使用
    在如今前端工程化的背景下，notie同样也支持在如React等前端框架下使用。
    首先要使用npm安装notie：

    1
    npm install notie

    然后引入notie并加载需要使用的notie组件:

    1
    2
    3
    4
    // 加载全部
    import notie from 'notie';
    // 加载部分
    import {alert, force, confirm, input, selecct, date, setOptions, hideAlerts} from 'notie';

    调用API的方式和浏览器使用方式一致。