安装

npm install element-xb

使用方法/示例

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

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

附录

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

API 参考

一、消息提示 (show)

<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)

<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)

<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)

<script>
    let xb = new $Xubo()
    xb.closeAllDialog()
</script>

| 参数 | 类型 | 描述 | | :-------- | :------- | :-------------------------------- | | 无 | | |

五、打印机(typewriter)

<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 | 最后一个字节 模拟闪动光标，默认‘"_" |