Element-xb NPM

安装

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