loading插件

2021-07-06 by uino 120 技术组件

效果展示

Aug-06-2021 14-55-14.gif

支持以下2种方式

  • 函数式调用: loading.show(),loading.hide()的方式
  • 组件式: <dl-loading></dl-loading>

安装

  • npm
npm i @uino/loading-plugin
  • cdn
<script src="https://loading.uino.cn/loading.js"></script>

spa项目引用

// 函数式 
import loading from '@uino/loading-plugin' 
 
//组件式 
import '@uino/loading-plugin'

使用

  1. 函数式调用
<button id="showBtn">显示</button>  
 
<script>  
    var showBtn = document.querySelector("#showBtn")  
    showBtn.onclick= () => {  
       loading.show()  
       setTimeout(() => {  
          loading.hide();  
       }, 2000);  
    }  
 
</script>
  1. 组件式
//vue   
<dl-loading :show="show"></dl-loading> 
 
 data() { 
    return { 
      show: false, 
    }; 
  }, 
  mounted() { 
    setTimeout(() => { 
      this.show = true; 
    }, 2000); 
  }, 
 
 
//react 
<dl-loading show={show}></dl-loading> 
 
const [show,setShow] = useState(false) 
useEffect(()=>{ 
  setTimeout(() => { 
      setShow(true); 
    }, 2000); 
})

参数

参数 描述 类型 默认值
fullscreen 全屏展示loading,设置为false时,根据父节点定位loading boolean true
lock 锁定页面 不让滚动(只在全屏模式下生效) 锁定页面 不让滚动(只在全屏模式下生效) false
background loading的背景色 string rgba(0, 0, 0, 0.8)
target 把loading插入到指定dom节点(函数式传dom节点,组件式传字符串) string | dom ''
color loading的颜色 string #fff
size 缩放系数 number 1
delay 点击关闭后hide()方法,延迟的时间(ms) number 500
  1. 函数式
 loading.setOptions({  
        lock: true,          // 锁定页面 不让滚动  
        target: content,     // 把loading插入到dom节点  
        background: '',      // loading的背景色  
        delay: 500,          // 点击关闭后hide()方法,延迟的时间  
        color: '',           // loading的颜色 
        size: 1,            //  缩放系数 
    })
  1. 组件式
<dl-loading show="boolean" background="string" target="string" delay="number" color="string" size="1"></dl-loading>