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 的最大响应时间 })
加载数据时显示动效。
在表格等容器中加载数据时显示。
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>
)
}
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
fullscreen | 是否全屏显示 | bool | - | false |
text | 自定义加载文案 | string | - | - |
loading | 控制加载页显示 | bool | - | true |
Backtop 回到顶部返回页面顶部的操作按钮基础用法滑动页面即可看到右下方的按钮。templateScroll down to see the bottom-right ...
在Bootstrap4中包含了很多实用的小工具,这些功能能够让你不用写CSS代码就能实现想要的效果,让开发更快捷和简单。边框使用borde...
Bootstrap4中,我们可以使用各种类对图片的形状、对齐等进行设置。具体使用的类如下:图片形状向一个img元素添加类,轻松地在项...
axios.get('/user/12345').catch(function (error) {if (error.response) {// 请求已发出,且服务器的响应状态码超出了 ...
Axios 插件:重试失败的请求。安装npm install axios-retry使用// CommonJS// const axiosRetry = require('axios-retry'...