举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > element按需加载 Element-React Loading 加载

element按需加载 Element-React Loading 加载

2023-06-05 11:18

element按需加载 Element-React Loading 加载

element按需加载

Element按需加载是一种技术,它可以帮助开发者在不同的页面中加载不同的组件,而不是一次性加载所有组件。这样做的好处是可以减少页面加载时间,提升用户体验。

Element按需加载的实现原理是使用Webpack的代码分割功能,将所有组件拆分成多个文件(也就是chunk),然后在需要时再根据不同的路由来加载对应的chunk文件。

// 定义一个异步组件函数
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 加载中应该使用的组件
  loading: LoadingComponent,
  // 出错时渲染的组件
  error: ErrorComponent,
  // 渲染 loading 组件前的延时时间。默认:200ms.
  delay: 200,   // 0.2s 的延迟时间  
  // 最长等待时间。超出此时间则渲染 error 组件。默认:Infinity  
  timeout: 3000   // 3s 的最大响应时间  
})   

Element-React Loading 加载

加载数据时显示动效。

区域加载

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

constructor(props) {
  super(props);


  this.table = {
    columns: [
      {
        label: "日期",
        prop: "date",
        width: 180
      },
      {
        label: "姓名",
        prop: "name",
        width: 180
      },
      {
        label: "地址",
        prop: "address"
      }
    ],
    data: [{
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    }, {
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄"
    }, {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄"
    }, {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄"
    }]
  }
}


render() {
  return (
    <div className="el-loading-demo">
      <Loading>
        <Table
          style={{width: "100%"}}
          columns={this.table.columns}
          data={this.table.data}
        />
      </Loading>
    </div>
  )
}

加载文案

可自定义加载文案。

添加text属性,其值会被渲染为加载文案,并显示在加载图标的下方。

constructor(props) {
  super(props);


  this.table = {
    columns: [
      {
        label: "日期",
        prop: "date",
        width: 180
      },
      {
        label: "姓名",
        prop: "name",
        width: 180
      },
      {
        label: "地址",
        prop: "address"
      }
    ],
    data: [{
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    }, {
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄"
    }, {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄"
    }, {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄"
    }]
  }
}


render() {
  return (
    <div className="el-loading-demo">
      <Loading text="拼命加载中">
        <Table
          style={{width: "100%"}}
          columns={this.table.columns}
          data={this.table.data}
        />
      </Loading>
    </div>
  )
}

隐藏代码

整页加载

页面数据加载时显示。

当需要全屏遮罩时,可使用fullscreen修饰符(此时遮罩会插入至 body 上)。

constructor(props) {
  super(props);


  this.state = {
    fullscreen: false
  }
}


onClick() {
  clearTimeout(this.timeout);


  this.timeout = setTimeout(() => {
    this.setState({
      fullscreen: false
    });
  }, 3000);


  this.setState({
    fullscreen: true
  });
}


render() {
  return (
    <div>
      <Button type="primary" onClick={this.onClick.bind(this)}>显示整页加载,3 秒后消失</Button>
      {
        this.state.fullscreen && <Loading fullscreen={true} />
      }
    </div>
  )
}

Attributes

参数 说明 类型 可选值 默认值
fullscreen 是否全屏显示 bool - false
text 自定义加载文案 string - -
loading 控制加载页显示 bool - true
阅读全文
以上是编程学为你收集整理的element按需加载 Element-React Loading 加载全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部