- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## Loading 加载

加载数据时显示动效。

### 区域加载

在表格等容器中加载数据时显示。

暂无数据
BeerUi 提供了两种调用 Loading 的方法：指令和服务。对于指令标签use:loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点。

        import { BeTable, BeTableColumn } from '@brewer/beerui'
        import {loading} from '$lib/utils/loading'
        const load = true
        const tableData = [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]

        <div use:loading={load}>
          <BeTable data={tableData}>
            <BeTableColumn prop="name" label="姓名" />
            <BeTableColumn prop="date" label="日期" />
            <BeTableColumn prop="address" label="地址" />
          </BeTable>
        </div>

显示代码

### 服务方式

调用 loadingSerive

1. target: Element
2. background: string
3. text:string
4. customClass:string

    function showLoading() {
    	let loadingInstance1 = new loadingSerive({
    		target: 'body',
    		text: 'loading'
    		// background: 'rgba(0, 0, 0, 0.8)'
    	});
    	loadingInstance1.show();
    	setTimeout(() => {
    		loadingInstance1.close();
    	}, 5000);
    }

        <BeButton class='demo-button' size="normal" type="primary" on:click={showLoading}>默认按钮</BeButton>

显示代码