# element-xb

> npm install element-xb

Latest version **1.0.12** (published 2023-04-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install element-xb
pnpm add element-xb
yarn add element-xb
bun add element-xb
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2023-04-23 |
| First published | 2023-04-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 57.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | xubo_wang |

## Links

- npm: https://www.npmjs.com/package/element-xb
- npm.io page: https://npm.io/package/element-xb

## Recent versions

- 1.0.12 (latest) — 2023-04-23
- 1.0.11 — 2023-04-23
- 1.0.10 — 2023-04-23
- 1.0.9 — 2023-04-23
- 1.0.8 — 2023-04-19
- 1.0.7 — 2023-04-14
- 1.0.6 — 2023-04-14
- 1.0.5 — 2023-04-13
- 1.0.4 — 2023-04-12
- 1.0.3 — 2023-04-12
- 1.0.2 — 2023-04-12
- 1.0.1 — 2023-04-12
- 1.0.0 — 2023-04-12

## README

# 安装

npm install element-xb




## 使用方法/示例

```javascript
<!-- 通过script标签引入 -->
<script src="node_modules/element-xb/dist.js"></script>

<!-- 在vue中使用 -->
    main.js文件中👇
import 'element-xb'
    
其他引入方式自行测试
```


## 附录

引入文件后，自动全局挂载$Xubo


## API 参考

#### 一、消息提示 (show)

```javascript
<script>
    let xb = new $Xubo()
    xb.show({
      type:"success",
      message:'操作成功！',
      showClose:true
    })
</script>
```

| 参数 | 类型     | 描述                |
| :-------- | :------- | :------------------------- |
| `type` | `string` | **消息类型**. 默认'success',可选 success，error，warn |
| `message` | `string` | **提示消息内容**.  |
| `duration` | `number` | **延迟关闭时间**. 默认3000ms，单位ms |
| `showClose` | `boolean` | **是否显示关闭按钮**. 可手动关闭 |
| `icon` | `string` | **自定义图标类名**. 仅支持类名 |
| `customClass` | `string` | **自定义组件类名**. 可修改默认背景色、字体颜色、字号等 |
| `onClose` | `function` | **关闭的回调**. 返回当前实例 |





#### 二、加载遮罩层 (showLoading | hideLoading)

```javascript
<script>
    let xb = new $Xubo()
    xb.showLoading({
      rgbText:"加载中..."
    })
    xb.hideLoading()
</script>
```
#### 2.1、showLoading

| 参数 | 类型     | 描述                       |
| :-------- | :------- | :-------------------------------- |
| `rgbColor`      | `string` | **自定义图标颜色值**. 例如：'#ccc' |
| `rgbTextColor`      | `string` | **自定义文本颜色值**. 例如：'#888' |
| `rgbText`      | `string` | **自定义文本** |
| `maskColor`      | `string` | **自定义遮罩层颜色** 例如:'#5A5A5A9E' |

#### 2.2、hideLoading

| 参数 | 类型     | 描述                       |
| :-------- | :------- | :-------------------------------- |
| `无`      |  | **调用即可关闭遮罩层** |





#### 三、弹出框 (open)

```javascript
<script>
    let xb = new $Xubo()
    xb.open({
        offset: 'center',
        title:"我是标题",
        isCenterTitle:true,
        content:'显示内容区域',
        cancel(res){
          xb.show({
            message:'关闭成功',
            duration:2000,
            showClose:true
          })
        },
        isMove:true,
        isTop:true
      })
</script>
```

| 参数 | 类型     | 描述                       |
| :-------- | :------- | :-------------------------------- |
| `title`      | `string` | **弹出层标题** |
| `isCenterTitle`      | `boolean` | **弹出层标题是否居中显示** 默认false |
| `isTop`      | `boolean` | **点击弹出层标题区域是否可置顶该弹框**.存在多个弹出层时，存在遮罩问题，默认最后打开的在最上层，开启该属性可随意切换。默认false |
| `offset`      | `string或array` | **弹出层位置**.支持`center` `lt` `lc` `rt` `cl` `cr` `bl`.默认`center`。 数组形式支持`['50%','50%']` `['200px','200px']`|
| `area`      | `array` | **弹出层宽高** ['400px','400px'] 或 ['50%','50%']|
| `content`      | `dom或string` | **弹出层内容** 例如：document.querySelector("#id") `#id元素不渲染，只渲染#id元素中的子元素`，`#id元素需要手动添加style="display:none",这个后续再优化，我现在不会`|
| `cancel`      | `function` | **弹出层关闭的回调** 返回当前实例 |
| `isMove`      | `boolean` | **弹出层是否可拖动**  默认false|
| `anim`      | `number` | **弹出层打开动画** 可选 `0:缩放、1:渐进、2：抖动` 默认0|
| `resize`      | `boolean` | **是否允许拉伸**  默认true,这个也有点小问题，可以无限缩小内容溢出，后续再优化，我现在不会|
| `headClass`      | `string` | **自定义标题类名** |
| `bodyClass`      | `string` | **自定义内容区域类名** |
| `minWidth` | `srting` | **定义最小宽度**  无需添加单位，例如 100，开启resize时很有效 |
| `minHeight` | `srting` | **定义最小高度** 无需添加单位，例如 100，开启resize时很有效 |
| `maxmin` | `boolean` | **是否开启最大化最小化功能** 默认true |



#### 四、销毁页面中所有弹出框 (closeAllDialog)

```javascript
<script>
    let xb = new $Xubo()
    xb.closeAllDialog()
</script>
```
| 参数 | 类型     | 描述                       |
| :-------- | :------- | :-------------------------------- |
| `无`      |  |  |



#### 五、打印机(typewriter)

```js
<script>
    xb.typewriter({
        dom:"#page",
        text:"轻轻的我走了，正如我轻轻的来",
        anim:true,
        diriction:'rotate',
        dazzling:true,
        userDefinedClass:'cl'
    })
</script>
```

| 参数               | 类型      | 描述                                                         |
| ------------------ | --------- | ------------------------------------------------------------ |
| `dom`              | `string`  | **内容承载元素**                                             |
| `text`             | `string`  | **文本**                                                     |
| `time`             | `number`  | **文字进入速度** 值越小速度越快。默认45                      |
| `anim`             | `boolean` | **是否开启进场动画** 默认false                               |
| `diriction`        | `string`  | **动画进入方向** 支持 `top` `bottom` `left` `right` `rotate` 默认 top |
| `dazzling`         | `boolean` | **是否开启炫彩文字** 默认false                               |
| `userDefinedClass` | `string`  | **自定义文字类名**                                           |
| `lastEl`           | `string`  | **最后一个字节** 模拟闪动光标，默认‘"_"                      |

---
_Source: https://npm.io/package/element-xb · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._