element-xb

安装

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